Stacked Column Cart with JSON Data Input

[KeuleMember]

Hello Fellows,

i have a problem integrating hierarchical data in JSON format into a stacked column chart.
My code:

var data = ‘[{“time”:20,”data”:[{“Service”:”service_a”,”count”:22},{“Service”:”service_b”,”count”:2}]},{“time”:21,”data”:[{“Service”:”service_a”,”count”:17}]},{“time”:22,”data”:[{“Service”:”service_a”,”count”:22}]},{“time”:23,”data”:[{“Service”:”service_a”,”count”:9}]}]’;

var source =
{
datatype: “json”,
datafields: [
{ name: “time”, type : ‘int’},
{ name: “Service”, map : “data>Service”, type : ‘string’ },
{ name: “count”, map : “data>count”, type : ‘int’ }
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

var settings = {
title: “Hits-Scorecard”,
description: “Number of funtioncalls per hour”,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
showBorderLine: false,
categoryAxis:
{
dataField: ‘hour’,
showGridLines: false
},
colorScheme: ‘myScheme’,
seriesGroups:
[
{
type: ‘stackedcolumn’,
columnsGapPercent: 30,
seriesGapPercent: 0,
valueAxis:
{
unitInterval: 25,
description: ‘Hits per hour’
},
series: [
{
dataField: ‘count’,
displayText: ‘Service’
}
]
}
]
};

$(‘#hitsChart’).jqxChart(settings);

The Chart is rendered but without data. I don’t know, where my Errors are. May somebody help me?
In the final application, the json-data will be load from a webservice via a php-proxy.

Thx a lot!

[DimitarParticipant]

Hello Keule,

The issue comes from the data source. Instead of:

var data = ‘[{"time":20,"data":[{"Service":"service_a","count":22},{"Service":"service_b","count":2}]},{“time”:21,”data”:[{"Service":"service_a","count":17}]},{“time”:22,”data”:[{"Service":"service_a","count":22}]},{“time”:23,”data”:[{"Service":"service_a","count":9}]}]’;

you should have:

var data = [{ "time": 20, "data": { "Service": "service_a", "count": 22} }, { "time": 21, "data": { "Service": "service_a", "count": 17} }, { "time": 22, "data": { "Service": "service_a", "count": 22} }, { "time": 23, "data": { "Service": "service_a", "count": 9}}];

However, in the latter case, note that you cannot have two “Service” fields in one data item.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts