I'm new to SAPUI5 and I'm trying to aggregate some JSON data before displaying in a column chart.
Here are some lines of my code:
var xsodataURL = 'That is my URL to my xsodata';
var oModelBU = new sap.ui.model.odata.ODataModel(xsodataURL, false);
oModelBU.bindList('/PM_PROJECT', false, {
select: 'PMBudget, PMActual, PMEAC'
});
var oDatasetBU = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'ProgramID: Overall Result',
value: ''
}],
measures: [
[{
name: 'Budget',
value: '{PMBudget}'
}, {
name: 'Actual',
value: '{PMActual}'
}, {
name: 'EAC',
value: '{PMEAC}'
}]
],
data: {
path: '/PM_PROJECT'
}
});
var oChartBU = new sap.viz.ui5.Column({
width: '100%',
height: calcChartHeight,
legendGroup: {
layout: {
position: 'bottom'
}
},
plotArea: {
colorPalette : d3.scale.category20().range()
},
title: {
visible: true,
text: 'Budget use in mEUR',
alignment: 'left'
},
dataset: oDatasetBU
});
oChartBU.setModel(oModelBU);
Actually everything works fine, but the application just display the JSON data of the last item in my xsodata. That's why I tried to aggregate the data in the xsodata file like:
"PM_SHOWCASE"."PM_PROJECT" aggregates always(SUM of "PMBudget", SUM of "PMActual", SUM of "PMEAC");
But that doesnt work - does anyone know, how I can display ALL data aggregated as SUM of the table "PM_PROJECTS"? Thanks in advance!
Have a great day, Arne.
Related
I have a kendo grid which is filled with some JSON data,
in the filter window in the grid, you can select a condition Type and then fill the condition value text box and then filter the grid based on your selection.
now I have a column that is filled with just four or five different value.
I want to make the condition value field of the filter section to become a drop-down list and instead of writing those values to select them, I want to choose them from the list. ( I mean in the filter section of the grid column, not in the column itself.)
I read an article which was like what I wanted, but it had added those values in the code,
I should notify you that those fields are not the same each time, so I can't write those value in the filter by hard coding.
even something like this one is very similar to what I wanted ( Filter Condition Created For 'City' Field ), but it's using a different source for getting the condition drop-down values, not grid column itself.
in addition, I can't use JSON data, I must use the information from the kendo grid.
thanks in advance.
I found the solution to my problem at last...
after binding the grid to the data source, by setting a loop on the data source of the grid, I take data of one column of the grid and push it to an array, then I set the filter on that column to the array.
<script type="text/javascript">
var arrayName = [];
$(function () {
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/products",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
schema: {
data: "Data",
total: "Total",
model: {
fields: {
"Id": { type: "number" },
"Name": { type: "string" },
"IsAvailable": { type: "boolean" },
"Price": { type: "number" }
}
}
},
error: function (e) {
alert(e.errorThrown);
},
sort: { field: "Id", dir: "desc" },
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
productsDataSource.read();
$("#report-grid").kendoGrid({
dataSource: productsDataSource,
dataBound:
function (e) {
var data = $("#report-grid").data("kendoGrid").dataSource._data;
for (i = 0; i < data.length; i++) {
arrayName.push(data[i].Name);
}
},
autoBind: false,
scrollable: false,
pageable: true,
sortable: true,
filterable: { extra: false },
reorderable: true,
columnMenu: true,
columns: [
{ field: "Id", title: "No", width: "130px" },
{ field: "Name", title: "ProductName", filterable: { ui: SystemFilter } },
{
field: "IsAvailable", title: "Available",
template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "Price", title: "Price", format: "{0:c}" }
]
});
function SystemFilter(element) {
element.kendoDropDownList({
dataSource: arrayName,
optionLabel: "--Select Name--"
})
};
});
One way that I like to do this is to create a list of my values and add that list to ViewData, which then gets passed to the View.
public IEnumerable<ModelName> GetTypes()
{
//Get data from the table you store your values in.
return dbContext.TypesTable.OrderBy(f => f.Name);
}
public ActionResult YourView()
{
IEnumerable<ModelName> types = GetTypes();
ViewData["MyTypes"] = types;
return View();
}
Then in your grid add a ForeignKey column and set it to look at the ViewData you set earlier.
#(Html.Kendo().Grid<ViewModelName>()
.Name("GridName")
.Columns(columns =>
{
columns.ForeignKey(c => c.RecipientType, (System.Collections.IEnumerable)ViewData["MyTypes"], "TypeId", "Name");
})
)
This column will now display the Name of your value for the current records. Then when you go to edit or add a record, this field will display as a dropdown with all of the possible values.
Jqgrid is not showing JSON data, however rows are generating
Server side code:
public JsonResult Denominations()
{
.
.
int counter = 0;
var jsonData = new
{
total = result.UserObject.Count,
page = 1,
rows = (
from p in result.UserObject
select new
{
id = ++counter,
cell = new string [] {
p.CurrencyID.ToString(),
p.DenominationID.ToString(),
p.DenominationName.ToString(),
p.DenominatorCount.ToString(),
p.Multiplier.ToString(),
p.TenderID.ToString()
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Data from server side is like this:
{"total":1,"page":1,"rows":[{"id":1,"cell":["1","1","Penny","0","0.0100","1"]}]}
JavaScript code:
$("#denominators").jqGrid({
url: '/Denominations?tenderid=1¤cyid=1',
contentType: "application/json",
datatype: "json",
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
repeatitems: false,
cell: 'cell',
id: 'id',
userdata:'userdata'
},
mtype: "GET",
colNames: ["CurrencyID", "DenominationID", "TenderID", "Multiplier", "DenominationName", "DenominatorCount"],
colModel: [
{ name: "currencyid", width: 80, align: "center" },
{ name: "denominationid", width: 90, align: "center" },
{ name: "tenderid", width: 250 },
{ name: "multiplier", width: 250 },
{ name: "denominationname", width: 95 },
{ name: "denominatorcount", width: 95 },
],
height: 'auto',
loadonce: true,
sortname: "DenominationID",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true
});
View:
<table id="denominators" ></table>
View creates the grid with column header however rows are generated but rows did not any data int.
You use wrong jsonReader. To be exactly the property repeatitems: false is false. It means that the format of every item in rows array is
{
"currencyid": "1",
"denominationid": "1",
"tenderid": 1,
"denominationname": "Penny",
"denominatorcount": "0",
"multiplier": "0.0100"
}
You use
{
"id": 1,
"cell": [
"1",
"1",
"Penny",
"0",
"0.0100",
"1"
]
}
instead. So you should remove jsonReader because the format of input data corresponds the default jsonReader, but you need still reorder the columns of the grid or change the order of items which you place in cell array so that it corresponds the order of columns in colModel.
Additional remarks: you use wrong value for total. It should be the number of pages. By the way you use loadonce: true. In the case you can remove "total":1,"page":1 part from the response and just return array of named items. You should just choose the names of columns the same as the names of properties if the items.
this is showing data json type from query database but can't show chart on page. what the problem?
The first image shows the results of a database query that I've already done1
whereas the second graphic image display json, but do not appear in my web page]2
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'pendapatan',
type: 'line'
},
title: {
text: 'PENDAPATAN DAN PENGELUARAN'
},
subtitle: {
text: 'Source: Data pendapatan dan pengeluaran harian'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Rupiah'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: []
}
$.getJSON("home/dashboard/show_pendapatan_pengeluaran", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
I have a grid that is generated dynamically
I build the columns array and store, then call reconfigure on my grid
Next I create a filter array. Now filters have to be applied to the columns in my grid.
But the filters are not reflected in my grid. How can ths be achieved?
myView.js
Ext.define('myView.view.myView', {
extend: 'Ext.grid.Panel',
plugins: 'gridfilters',
store: 'myStore.store.myStore',
pageSize:10,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'WhiskerPlot.store.settingStore', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
filters :[]
});
myController.js
var colFilters = [];
colFilters.push({
type : 'list',
dataIndex : dummyDataIndex,
options : [small,large]
});
var filters = {
ftype : 'filters',
filters : colFilters
};
var gridview = Ext.ComponentQuery.query('myView')[0];
gridview.reconfigure(store,columnarr);
gridview.filters.addFilters(filters);
Add the filters to the column array itself.
Copied from: Filters Doc
var grid = Ext.create('Ext.grid.Panel', {
store: {
url: 'path/to/data'
},
plugins: 'gridfilters',
columns: [{
dataIndex: 'id',
text: 'Id',
filter: 'number'
}, {
dataIndex: 'name'
text: 'Name',
filter: {
type: 'string',
value: 'Ben'
}
}, {
...
}]
});
I'd like to have a dojo grid which connects to a server url which outputs the following json :
{identifier : "id"
items : [ { id: "1", name: "John", university : { name: "XXX", address: "YYY" } }].
Basically I have a nested json. I would like to represent the university name and University address as separate columns in the grid.
I tried using the dojox.grid.DataGrid object and creating a gird layout, but do not know how to refer to the nested elments and university.name and university.address don't seem to work.
I am using dojo 1.6.1.
Does anybody have any pointers?
This is the js code I use :
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function(){
// our test data store for this example:
var jsonStore = new dojo.data.ItemFileReadStore({
url: '/MainDeployer/ajax/users/get.json'
});
var layoutUsers = [
[{
field: "name",
name: "Name",
width: 10
},
{
field: "university.name",
name: "University Name",
width: 10
},
{
field: "university.address",
name: "University Address",
width: 'auto'
}]];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {},
store: jsonStore,
clientSort: true,
rowSelector: '20px',
structure: layoutUsers
},
document.createElement('div'));
dojo.byId("usersTable").appendChild(grid.domNode);
grid.startup();
});
Thanks,
Cristian
What kind of store are you using? Have a look at the dojo.data.ItemFileReadStore documentation, there is an example with a situation like yours:
http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html#item-structure
This would help you fetching all the items with a single call to the method "fetch". If for some reasons it doesn't work due to the different json structure, you can continue using ItemFileReadStore , and create a function that loops over all the objects in your json and uses the loadItem method for adding items one by one in this way (it's not beautiful but it works):
var myData = {"items" : []};
var myStore = new dojo.data.ItemFileWriteStore({data: myData});
var myLayout = [{
field: 'name',
name: 'Name',
width: '200px'
},
{
field: 'universityName',
name: 'University Name',
width: '100px'
},
{
field: 'universityAddress',
name: 'University Address',
width: '60px'
}];
var myGrid;
dojo.addOnLoad(function(){
myGrid = new dojox.grid.DataGrid({
store: myStore,
structure: myLayout
}, document.createElement('div'));
dojo.byId("myGridContainer").appendChild(myGrid.domNode);
myGrid.startup();
dojo.xhrGet({
url: myURL,
handleAs: "json",
headers: {
"Content-Type": "application/json; charset=uft-8",
"Accept" : "application/json"
},
load: function(responseObject, ioArgs) {
myList = responseObject;
dojo.forEach(myList.items, function(element) {
myStore.newItem({"name": element.name,
"universityName": element.university.name,
"universityAddress": element.university.address});
});
})
});
}
se a formatter:
var nameFormatter = function(value, rowIdx){
return value.name;
};
var addressFormatter = function(value, rowIdx){
return value.address;
};
var layoutUsers = [
[{
field: "name",
name: "Name",
width: 10
},
{
field: "university",
name: "University Name",
width: 10,
formatter: nameFormatter
},
{
field: "university",
name: "University Address",
width: 'auto',
formatter: addressFormatter
}]];