Hello guys i have a problem with displaying my pie chart, when i try to add more data into the pie chart this error occurs, i need your expertise on this matter
this is my controller code. and the error message is
[50053] - Incomplete dimensions binding
onInit: function() {
this._setupSelectionList();
// 2.Create a JSON Model and set the data
var oModel = new sap.ui.model.json.JSONModel("http://lssinh000.sin3.sap.corp:8000/SAP_LE/lionExpress/Volunteer/Services/request.xsjs");
var oVizFrame = this.getView().byId("idpiechart");
// 3. Create Viz dataset to feed to the data to the graph
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{
name : 'Status',
value : "{Status}",
name : 'StartDate',
value : '{StartDate}'
}],
measures : [{
name : 'reqID',
value : '{reqID}',
},],
data : {
path : "/Status"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
// 4.Set Viz properties
oVizFrame.setVizProperties({
title:{
text : "Delivery Summary"
},
plotArea: {
colorPalette : d3.scale.category20().range(),
drawingEffect: "glossy"
}});
var feedSize = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "size",
'type': "Measure",
'values': ["reqID"]
}),
feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Status"]
}),
feedValue = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "value",
'type': "Dimension",
'values': ["StartDate"]
});
oVizFrame.addFeed(feedSize);
oVizFrame.addFeed(feedColor);
oVizFrame.addFeed(feedValue);
//this.getView().byId("idPopOver").connect(oVizFrame.getVizUid());
},
In the dataset, the name attribute has to be same as in the values arrays of the feeds.
Related
I have a JS view in which I am creating a sap.m.Table. It's "columns" are bound to a JSONModel. It's "items" are bound to ODataModel. I want to access the row data and the column name when I click on an Icon contained in the ColumnListItem.
View code:
createContent : function(oController) {
var oTable = new sap.m.Table("table1", {
width: "auto",
noDataText: "Please add rows to be displayed!"
}).addStyleClass("sapUiResponsiveMargin");
oTable.bindAggregation("columns", "Periods>/periods", function(sId, oContext) {
var sColumnId = oContext.getObject().period;
return new sap.m.Column({
hAlign: "Center",
vAlign: "Middle",
header: new sap.m.Text({
text: sColumnId
})
});
});
oTable.bindItems("zStatus>/StatusSet", function(sId, oContext) {
var row = new sap.m.ColumnListItem(sId, {
type : "Inactive",
cells: [
new sap.ui.core.Icon({
src: "sap-icon://delete",
hoverColor: "red",
activeColor: "red",
press: [oController.onDeleteIconPress, oController]
}),
new sap.m.Text({
text: "{zStatus>Description}"
}),
new sap.ui.core.Icon(sId, {
src: {
path: "zStatus>Status1",
formatter: function(status) {
switch(status) {
case "R":
return "sap-icon://sys-cancel";
case "G":
return "sap-icon://sys-enter";
case "Y":
return "sap-icon://notification";
default:
return "sap-icon://sys-help";
}
}
},
size: "1.5em",
press: [oController.onStatusIconPress, oController]
}) ]
});
return oTable;
}
In my controller I create an array, then a JSON model "Periods" from it and set it to this view. Odata model "zStatus" is defined in manifest file.
Controller code:
onInit : function() {
// array aPeriods is populated first then
var oPeriodsModel = new sap.ui.model.json.JSONModel();
oPeriodsModel.setData({
periods : aPeriods
});
this.getView().setModel(oPeriodsModel, "Periods");
},
onStatusIconPress : function(oEvent) {
// I can get the row data on icon press
// Problem 2: but how do I get the column name?
// I wanted to attach the column name to icon as customData but I could
// not access model attached to columns inside bindItems method
}
I managed to solve it myself.
Created an array in createContent. Filled it with column IDs in bindAggregation of columns and then used this array in bindItems method.
Then I can pass customData to icons.
Here is the code -
createContent : function(oController) {
var aColumns = []; // array to store column ids
var columnIndex = 0; // index to track
//more code
// create table oTable
oTable.bindAggregation("columns", "/columns", function(sId, oContext) {
var sColumnId = oContext.getObject().period;
if (sColumnId === "DeleteIcon") {
// this is always my first column
columnIndex = 0;
return new sap.m.Column({
hlign : "Begin",
vAlign : "Middle",
width : "2em",
header : new sap.m.Text({
text : ""
})
});
} else {
// add column ids to array
aColumns[columnIndex++] = sColumnId;
return new sap.m.Column({
hlign : "Center",
vAlign : "Middle",
header : new sap.m.Text({
text : sColumnId
})
});
}
});
oTable.bindItems("/rows", function(sId, oContext) {
var row = new sap.m.ColumnListItem({
new sap.m.Text({
text: "{Name}"
}),
new sap.ui.core.Icon(sId, {
src: "sap-icon://sys-help"
size: "1.5em",
press: [oController.onStatusIconPress, oController],
customData : [
// use column ids here
new sap.ui.core.CustomData({key: "column", value: aColumns[0]})
]
}),
});
return row;
}
}
The JSON data is in Correct Format ! yet i am unable to bind the JSON data with the Grid . I dont even get an Empty Grid ! The problem lies with my extjs code,I am a new to Extjs! i am using 4.2.1
I am Trying to Render the Grid in the upload.gsp div by using
renderTo: 'csvGrid' in the extjs Panel .
It simply Renders the JSON data but not inside the grid ! Please help !
Grails Contoller Actions Contoller Code
def index() {
render (view:"upload")
}
def upload() {
def uploadedCSVFile = request.getFile('file')
// def csvMap = [:]
// def listOfCsvMap = []
def materialCode
def serialNumber
def label
String [] row ;
char separator = ';';
CSVReader reader = new CSVReader(new InputStreamReader(uploadedCSVFile.getInputStream()),separator);
String [] header = reader.readNext()
// String [] temp;
if (header[0].equalsIgnoreCase("Material_Code") && header[1].equalsIgnoreCase("Serial_Number") && header[2].equalsIgnoreCase("#Labels") )
{
List <String []> fileData = reader.readAll()
Iterator<String[]> rowIterator = fileData.iterator()
def listOfCsvMap = []
while (rowIterator.hasNext())
{
def csvMap = [:]
row = rowIterator.next()
materialCode = row.collect().get(0)
serialNumber = row.collect().get(1)
label = row.collect().get(2)
csvMap.put('Material_Code', materialCode)
csvMap.put('Serial_Number', serialNumber)
csvMap.put('Labels', label)
listOfCsvMap.add(csvMap)
}
render([items:listOfCsvMap] as JSON)
upload.gsp
<body>
<div class="body">
<g:uploadForm action="upload" enctype="multipart/form-data">
<input type="file" name="file">
<g:submitButton name="upload" value="Upload"/>
</g:uploadForm>
<g:javascript src="grid.js" />
<div id="csvGrid"> </div>
and in the grid.js
var store1;
Ext.onReady(function() {
store1 = new Ext.data.JsonStore({
storeId: 'myStore1',
pageSize: 20,
proxy: {
type: 'ajax',
url:'upload',
reader: {
type: 'json',
root: 'items'
}
},
fields: ['Material_Code','Serial_Number','Labels']
});
var grid = Ext.create('Ext.grid.Panel', {
store: store1,
stateful: false,
layout:'fit',
enableColumnMove: true,
enableColumnResize:true,
emptyText:'<b style="font-size:14px;color: #F49000;">'+'Please fill all the mandatory fields!!!'+'</b>',
columns: [
{
text : 'Material Code',
width:175,
sortable : true,
dataIndex: 'Material_Code',
},
{
text : 'Serial Number',
width :275,
sortable : true,
dataIndex: 'Serial_Number'
},
{
text : '#Labels',
width :275,
sortable : true,
dataIndex: 'Labels'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store1,
pageSize: 20,
displayInfo: true,
displayMsg: 'Displaying rows {0} - {1} of {2}',
emptyMsg: "No rows to display"
}),
height: 350,
width: 850,
renderTo: 'csvGrid',
viewConfig: {
stripeRows: true,
enableTextSelection:true
}
});
store1.reload();
});
The error that is causing the issue directly is this :
<g:uploadForm action="upload" enctype="multipart/form-data">
The action is upload, which is the url that returns the JSON.
A solution would be to create a separate page, define it as action and load the JavaScript on that page.
Alternatively, instead of submitting the form you can send the values as parameters when you load the store (pass them in the options object of store1.load({params: {...}}). In this case it would be a better design to create the whole page with extjs, including the form.
There are other problems with the code, like you have store1.reload();, but you never called load() before.
I have a simple set of JSON data that I am pulling from a local file and loading into a datatable
Using YUI, how can I filter the response of this request to match only the data that is relevant to the request data?
EDIT: improper formatting on first post
YUI().use('aui-datatable', 'datatable-sort', 'aui-io-request', 'aui-tabview', 'datasource-io',
function(Y) {
var columns = [{
key : 'id',
sortable : true
}, {
key : 'name',
sortable : true
},{
key : 'price',
sortable : true
}];
var dataTable = new Y.DataTable({
columns : columns
}).render("#searchResultsTab");
var node = Y.one('#searchButton');
var criteria = document.getElementById("searchCriteria");
node.on(
'click', //on Search..
function(){
dataSource = new Y.DataSource.IO({source:'mydata.json'});
request = document.getElementById("searchBox").value;
dataSource.sendRequest({
on: {
success: function(e){
var response = e.data.responseText;
jdata = Y.JSON.parse(response);
dataTable.set('data', jdata.info); //setting table data to json response
},
failure: function(e){
alert(e.error.message);
}
}
});
}
);
new Y.TabView(
{
srcNode: '#searchResultsContainer'
}
).render();
});
mydata.json
{"info" : [
{"id": 1,"name": "A green door","price": 12.50 },
{"id": 2,"name": "A blue door","price": 10.50 },
{"id": 3,"name": "A red door","price": 8.50 }
}
In your on success method filter your response data before setting the datatable data source. Here is an example of model list filtering: http://yuilibrary.com/yui/docs/model-list/#filtering-models
I have this code
dojo.ready(function(){
inventoryStore = new dojo.store.JsonRest({
target: "http://localhost:9080/driver/dojoMVC",
idProperty: "name",
put: function(object, options){
if(object.quantity < 0){
throw new Error("quantity must not be negative");
}
}
});
results = inventoryStore.query("");
var storeData = new dojo.data.ItemFileWriteStore({
data:dojo.fromJson(results)
});
gridLayout = [
{ name: 'Name', field: 'name', editable: true},
{ name: 'Quantity', field: 'quantity'},
{ name: 'Category', field: 'category'}];
var grid = new dojox.grid.DataGrid({
store: storeData,
clientSort: true,
structure: gridLayout
}, dojo.byId("gridElement"));
grid.startup();
When i run it i receive this strange error in FF console
SyntaxError: missing ] after element list
[Break On This Error]
([object Object])
json.js (line 26, col 9)
Can anyone help me with this?
Thanks
maybe you must setup your Layout like this :
var layout = [[
{name:"Id", field: "ident", width:"30%"},
{name:"Name", field: "name", width:"70%"}
]];
In Ev'ry Example i find in dojo the layout is in double brackets.
This would explain why the Error says " missing ]".
Look:
http://dojotoolkit.org/reference-guide/1.9/dojo/data/ItemFileWriteStore.html?highlight=itemfilewritestore#itemfilewritestore-changes-reflected-in-dojox-data-datagrid
Update1
so the Error lies in the store. Have you tried to fill in the data like:
results = inventoryStore.query( name : "*"); // to query all items
Have you checked it there are any results in "results"?
var storeData = new dojo.data.ItemFileWriteStore({
data:results
});
After all i would try to fill in the data without dojo.fromJson.
Give it a try.
Regards, Miriam
The problem is inside the code you posted, which has a syntax error at the very end around line 26. You started with dojo.ready({ but didn't finish it with });
Here, reformatted to make it more obvious:
dojo.ready(function(){
inventoryStore = new dojo.store.JsonRest({
target: "http://localhost:9080/driver/dojoMVC",
idProperty: "name",
put: function(object, options){
if(object.quantity < 0){
throw new Error("quantity must not be negative");
}
}
});
results = inventoryStore.query("");
var storeData = new dojo.data.ItemFileWriteStore({
data:dojo.fromJson(results)
});
gridLayout = [
{ name: 'Name', field: 'name', editable: true},
{ name: 'Quantity', field: 'quantity'},
{ name: 'Category', field: 'category'}
];
var grid = new dojox.grid.DataGrid({
store: storeData,
clientSort: true,
structure: gridLayout
}, dojo.byId("gridElement"));
grid.startup();
Try adding:
});
Also, you're missing some var keywords in there.
I am trying to output just the hometeam name's to the page so that I can try to understand how to work with my code better. It is only printing one team to the page, and it is printing all the details of that team to the page, whereas I only want it to print one part.
This is my code, I want it to print the name's of each hometeam to the page
app.get('/home', function(req, res) {
Match.findOne({}).populate('hometeam.name').exec(function(err, teams){
util.log(teams);
res.send(teams);
});
});
But when I load the page all I get is the first piece of data from this list of Matches
[
{
"hometeam": "5106e7ef9afe3a430e000007",
"_id": "5113b7ca71ec596125000005",
"__v": 0,
"key": 1360246730427
},
{
"hometeam": "5113c13e0eea687b28000001",
"_id": "5113e951354fe70330000001",
"__v": 0,
"key": 1360259409361
},
{
"hometeam": "5113c13e0eea687b28000001",
"_id": "5113e999354fe70330000002",
"__v": 0,
"key": 1360259481412
}
]
Also, if I try to put util.log(teams.hometeam.name) I get the following:
TypeError: Cannot call method 'toString' of undefined
But I would want it to be able to print the name which belongs to hometeam here. As hometeam is just the objectId of a Team in my database, am I missing something with the DBreferencing here?
Update:
Team Schema
var Team = new Schema({
'key' : {
unique : true,
type : Number,
default: getId
},
'name' : { type : String,
validate : [validatePresenceOf, 'Team name is required'],
index : { unique : true }
}
});
module.exports.Schema = Team;
module.exports.Model = mongoose.model('Team', Team);
Match Schema
var Team = require('../schemas/Team').Schema;
var Match = new Schema({
'key' : {
unique: true,
type: Number,
default: getId
},
'hometeam' : { type: Schema.ObjectId, ref: 'Team' },
'awayteam' : { type: Schema.ObjectId, ref: 'Team' }
});
module.exports = mongoose.model('Match', Match);
Populate takes the property name of the property you are trying to retrieve. This means that you should use 'hometeam' instead of 'hometeam.name'. However, you want to retrieve the name of the team so you could filter for that. The call would then become..
Match.findOne({}).populate('hometeam', {name: 1}).exec(function(err, teams)
Now you have a property called 'hometeam' with in that the name. Have fun :)
EDIT
Showing how to have a single mongoose instance in more files to have correct registration of schemas.
app.js
var mongoose = require('mongoose');
var Team = require('./schemas/team-schema')(mongoose);
var Match = require('./schemas/match-schema')(mongoose);
// You can only require them like this ONCE, afterwards FETCH them.
var Team = mongoose.model('Team'); // LIKE THIS
schemas/match-schema.js
module.exports = function(mongoose) {
var Match = new mongoose.Schema({
'key' : {
unique: true,
type: Number,
default: getId
},
'hometeam' : { type: mongoose.Schema.ObjectId, ref: 'Team' },
'awayteam' : { type: mongoose.Schema.ObjectId, ref: 'Team' }
});
return mongoose.model('Match', Match);
};
schemas/team-schema.js
module.exports = function(mongoose) {
var Team = new mongoose.Schema({
'key' : {
unique : true,
type : Number,
default: getId
},
'name' : { type : String,
validate : [validatePresenceOf, 'Team name is required'],
index : { unique : true }
}
});
return mongoose.model('Team', Team);
};