jQWidgets Forums

Tagged: bind, chart, data, jqxChart, json, key, key-value pair, line, stacked, stackedline, value

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

json data as key value pair Posts
November 7, 2014 at 6:42 am json data as key value pair #62353
jitheshchandra
Participant
Hi i am a newbie for jqcharts i want to create a stacked line chart , i am having this data in the database

Day   Label    Hits
2014-11-04   abc   1
2014-11-04   contoso-cscoISE-syslg   249
2014-11-05   contoso-cscoISE-syslg   50
2014-11-05   abc   20
2014-11-06   contoso-cscoISE-syslg   100
2014-11-06   abc   15
2014-11-07   contoso-cscoISE-syslg   50
2014-11-07   abc   20
2014-11-08   contoso-cscoISE-syslg   50
2014-11-08   abc   30
2014-11-10   contoso-cscoISE-syslg   10
2014-11-10   abc   54
2014-11-11   contoso-cscoISE-syslg   12
2014-11-11   abc   12

and i am using a web method in my c# code to retieve the data which is of the following type

` public string eventDate { get; set; }
public KeyValuePair<string,int> eventHits { get; set; }
```
and i am converting the object to json before reading them in my view , but am unable to do so 

this is my javascript code 
can anyone tell me where i am going wrong 
```
$(document).ready(function () {

//var date = new Date(parseInt(jsonDate.substr(6)));

var source =
{
datatype: “json”,
datafields: [
{ name: ‘IncidentDate’ },
{ name: ‘ComputerHits’ }

],

url: ‘SeriesChart/GetOrders’
};

var dataAdapter = new $.jqx.dataAdapter(source,
{
autoBind: true,

async: false,
downloadComplete: function () { },
loadComplete: function (source) {
var data = new Array();

for (var i = 0; i < source.length; i++) {

var Computers = source[i].ComputerHits;
Computers.name = Computers.Key;
Computers.vlaue = Computers.Value;

data.push(Computers);
}

source.ComputerHits = data;

},
//loadComplete: function () { },
loadError: function () { }
});
var i = 0;
// prepare jqxChart settings

var settings = {
title: “Incidents By Date”,
showLegend: true,
padding: { left: 50, top: 5, right: 50, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘IncidentDate’,
formatFunction: function (jsonDate) {
var ret = jsonDate.split(” “);
var str1 = ret[0];
var offset = new Date().getTimezoneOffset() * 60000;
return $.jqx.dataFormat.formatdate(str1, ‘MM/dd/yyyy’);

},
showTickMarks: true,
tickMarksInterval: Math.round(dataAdapter.records.length / 500),
tickMarksColor: ‘#888888’,
unitInterval: Math.round(dataAdapter.records.length / 50),
showGridLines: true,
gridLinesInterval: Math.round(dataAdapter.records.length / 5000),
gridLinesColor: ‘#888888’,
axisSize: ‘auto’
},
colorScheme: ‘scheme05’,
seriesGroups:
[
{
type: ‘stackedline’,
valueAxis:
{
displayValueAxis: true,
description: ‘Hits’,
//descriptionClass: ‘css-class-name’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’,
unitInterval: 1,
minValue: 0,
maxValue: 20
},
series: [

// { dataField: ‘Hits’, displayText: ‘Hits’ },
{ dataField: ‘ComputerHits.Object(ComputerHits(Object.Value))’, displayText: ‘Computer’ }
],
bands:
[
{ minValue: 2000, maxValue: 2500, color: ‘#FF0000’, opacity: 0.15 },
{ minValue: 1000, maxValue: 1100, color: ‘#FF0000’, opacity: 0.20 }
]
}
]
};

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

});
</script>
</head>
<body class=’default’>
<div style=’height: 600px; width: 682px;’>
<div id=’host’ style=”margin: 0 auto; width: 850px; height: 400px;”>
<div id=’jqxChart’ style=”width: 850px; height: 400px; position: relative; left: 0px; top: 0px;”>
</div>
</div>
</div>
</body>
</html>
`
the x axis should contain date and the y axis should be plotted against the number of hits and should have multiple series graphs based on label.

Note : these labels are generated dynamically .
November 7, 2014 at 1:46 pm json data as key value pair #62384
Dimitar
Participant
Hello jitheshchandra,

There are multiple issues with the code presented:

1) The names of the source datafields have to correspond to the names of the database columns. Otherwise, mapping would be required. So, your source object should be like:
```
var source = {
    datatype: "json",
    datafields: [{
            name: 'Day'
        }, {
            name: 'Hits'
        }

    ],

    url: 'SeriesChart/GetOrders'
};
```
2) I am not sure what you are trying to achieve in the dataAdapter loadComplete callback function. Adding a ComputerHits field to the source object would have no effect on the loaded data. In my opinion, if you load the data as I suggested in 1), you will be able to successfully plot your chart (with Days on the x-axis Hits on the y-axis).

We suggest you take at our extensive collection of jqxChart demos, which demonstrates a large variety of bindings and functionalities. For example, the demo Negative Values shows how to bind a chart to a JSON source. You may also find the jqxChart API Documentation helpful.

If you wish to modify the data before it is fully loaded, you can do it in the data adapter’s beforeLoadComplete callback. You can read more about it in the jqxDataAdapter Getting Started guide.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
November 10, 2014 at 5:51 am json data as key value pair #62433

jitheshchandra
Participant

thank you Dimitar, but the problem for me is i am able to get a single line graph , i want a series line graph , as the data in the database would be dynamic like one line for contoso-cscoISE-syslg another for abc . i am not sure how i do this .

November 10, 2014 at 6:44 am json data as key value pair #62436

Dimitar
Participant

Hi jitheshchandra,

Please refer to the demo Stacked Line Series to see how you can implement this functionality.

Best Regards,
Dimitar

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

November 10, 2014 at 7:18 am json data as key value pair #62441

jitheshchandra
Participant

Hi Dimitar,
I did go through the demo , but here the lines under series referral ,SearchPaid, SearchNonpaid are predefined but my worry is here abc and contoso-cscoISE-syslg are generated dynamically , how do i do it if i am getting the data dynamically .

November 11, 2014 at 6:37 am json data as key value pair #62505

Dimitar
Participant

Hi jitheshchandra,

Please provide us with a sample of your JSON data. It may be that it is not suitable to load in jqxChart as it is and would require some modification.

Best Regards,
Dimitar

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

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.