Series not being plotted

[gduarteParticipant]

Hello you all!

I am trying to plot some data using a jqxChart but I’m having a trouble… The series I want to plot, only the first on is being inserted into the graph. I got the following code, it’s based on the examples:

// prepare the data

//var json_str;// = “[{\”name\” : \”Date\”}, {\”name\” : \”S&P 500\”},{\”name\” : \”NASDAQ\”}]”;
var fields;

$.ajax({
async: false,
type: “GET”,
url: “/posto/tools/getbicosgraph/15”,
success : function(data) {
fields = $.parseJSON(data)
}
});
console.log(fields[1][“serie_vals”]);
console.log(fields[0][“serie_names”]);
//var json_src = $.parseJSON(fields);
var data = fields[1][“serie_vals”];

var source =
{
datatype: “json”,
datafields: fields[0][“serie_names”],
localdata: data,
url: “/posto/tools/getbicosgraph/15”,
async: false
};

console.log(source);

var dataAdapter = new $.jqx.dataAdapter(source);//, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

var months = [‘Jan’, ‘Fev’, ‘Mar’, ‘Abr’, ‘Mai’, ‘Jun’, ‘Jul’, ‘Ago’, ‘Set’, ‘Out’, ‘Nov’, ‘Dez’];

// prepare jqxChart settings
var settings = {
title: “U.S. Stock Market Index Performance (2011)”,
description: “NASDAQ Composite compared to S&P 500”,
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
// source: dataAdapter,
source: data,
// source: source,
categoryAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘Date’,
formatFunction: function (value) {
return months[value.getMonth()];
},
type: ‘date’,
baseUnit: ‘month’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 1,
gridLinesColor: ‘#888888’,
valuesOnTicks: false
},
colorScheme: ‘scheme05’,
seriesGroups:
[
{
type: ‘spline’,
toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
if (serie.dataField == “NASDAQ”) {
serie.toolTipLineColor = ‘#2B8C3F’;
serie.toolTipBackground = ‘#2B8C3F’;
}
else {
serie.toolTipLineColor = ‘#2190C4’;
serie.toolTipBackground = ‘#2190C4’;
}
//console.log(value);

return ‘<DIV style=”padding: 5px; font-weight: bold; color: #fff; text-align:left”>’ + dataAdapter.formatDate(categoryValue, ‘f’) + ‘ – ‘ + dataAdapter.formatNumber(value, ‘f’) + ‘</DIV>’;
},
valueAxis:
{
unitInterval: 500,
minValue: 0,
maxValue: 3000,
displayValueAxis: true,
description: ‘Daily Closing Price’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888′
},
//series: //[
//{ dataField: ’06’, displayText: ’06’ },
//{ dataField: ’04’, displayText: ’04’ },
//{ dataField: ’05’, displayText: ’05’ },
//{ dataField: ‘NASDAQ’, displayText: ‘NASDAQ’ }
//]
series: fields[0][“serie_names”].slice(1)
//]
}
]
};

// setup the chart
$(‘#jqxChart’).jqxChart(settings);

});

The code consumes the following json:

[{ “serie_names” : [ { “dataField” : “Date”}, { “dataField” : “06”, “displayText” : “06” },{ “dataField” : “05”, “displayText” : “05” },{ “dataField” : “04”, “displayText” : “04” }] }, {“serie_vals” : [ { “Date” : “10/15/13,12:12:12”, “06” : “1001990.0”,”05″ : “15792.0”,”04″ : “15072.0” }, {“Date” : “11/27/13,14:07:59”, “06” : “0.0”,”05″ : “15792.0”,”04″ : “15072.0” }, {“Date” : “11/27/13,14:08:01”, “06” : “0.0”,”05″ : “15792.0”,”04″ : “15072.0” }] } ]

The problem is that only the “06” is being plotted 🙁

http://imgur.com/5blQqoR

Idea about what’s happening?

Any help is appreciated 🙂

Cheers

[DimitarParticipant]

Hello gduarte,

This happens because the properties maxValue and unitInterval are not set to comply the data in the source. Please try setting them this way:

unitInterval: 50000,
maxValue: 1100000,

Best Regards,
Dimitar

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

[gduarteParticipant]

Dimitar, REALLY THANKS! 😀

It worked fine!!

Thank you very much!!

Cheers,
Gabriel

[gduarteParticipant]

Sorry for annoying you again, but I realized that only 2 of 3 series are being plotted and I got no idea why. The last one is being ignored. Any ideas?

Cheers

[DimitarParticipant]

Hi gduarte,

It is possible that the third deries cannot be seen, because its data points are too close to the ones of the second series.

Best Regards,
Dimitar

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

[gduarteParticipant]

Hmmm I see… Is there a way to select the serie I want in front?

[DimitarParticipant]

Hi gduarte,

You can do this by reordering the series in the series array. E.g.:

from:

series: [
        { dataField: 'HPI', displayText: 'Real Home Price Index' },
        { dataField: 'BuildCost', displayText: 'Building Cost Index' }
    ]

to:

series: [
        { dataField: 'BuildCost', displayText: 'Building Cost Index' },
        { dataField: 'HPI', displayText: 'Real Home Price Index' }
    ]

Best Regards,
Dimitar

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

[Author]

Posts