Line series chart does not plot all sources (legends) when they have null values

[priya srivastavaParticipant]

Dear Team,

I am trying to plot line series chart with multiple sources having null values for few dates, but some of the sources are not getting plotted on the chart. Please see below code snippet. In the sample data, Cycling source has null value for four different dates and is not getting plotted. Please let me know what else I should do? There is a prerequisite to show data in line chart only.

self.loadChart = function() {
var sampleData = [
{ Day: “2013-08-06T00:00:00”, Running: 30, Swimming: 0, Cycling: null, Goal: 40 },
{ Day: “2013-08-07T00:00:00”, Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
{ Day: “2014-01-23T00:00:00”, Running: 30, Swimming: 0, Cycling: null, Goal: 60 },
{ Day: “2014-02-10T00:00:00”, Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: “2014-03-13T00:00:00”, Running: 0, Swimming: 20, Cycling: null, Goal: 50 },
{ Day: “2014-05-16T00:00:00”, Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
{ Day: “2014-09-22T00:00:00”, Running: 20, Swimming: 40, Cycling: null, Goal: 90 }
];
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
// prepare jqxChart settings
var settings = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise by activity”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
colorScheme: ‘scheme05’,
borderLineColor: ‘#888888’,
categoryAxis:
{
type: ‘date’,
baseUnit: ‘day’,
textRotationAngle:-45,
dataField:’Day’,
showGridLines:true,
gridLinesColor:’#ccc’,
axisSize:’auto’,
valuesOnTicks: true,
unitInterval:50,
formatFunction: function (value) {
return value.getDate() + ‘-‘ + months[value.getMonth()] + ‘-‘ + value.getFullYear();
},
gridLines: {
visible: true,
interval: 3
}
},
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
visible: true,
unitInterval: 10,
minValue: 0,
maxValue: 100,
title: { text: ‘Time in minutes’ },
tickMarks: {color: ‘#888888’},
gridLines: {color: ‘#888888’},
axisSize: ‘auto’
},
columnsGapPercent: 50,
seriesGapPercent: 5,
series: [
{ dataField: ‘Goal’, displayText: ‘Personal Goal’, opacity: 0.7 },
{ dataField: ‘Running’, displayText: ‘Running’ },
{ dataField: ‘Swimming’, displayText: ‘Swimming’ },
{ dataField: ‘Cycling’, displayText: ‘Cycling’ }
]
}
]
};

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

setTimeout(function () {
$(‘#chart1’).jqxChart(‘refresh’);
}, 0);
};

[DimitarParticipant]

Hello priya srivastava,

Please check out the demo Line Serie with missing points, which showcases the different display options when having data points with null values.

Best Regards,
Dimitar

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

[priya srivastavaParticipant]

Hi Dimitar,

Thanks for your prompt response. Yes, I had tried this option with the latest jqx version (3.7) and there it is working absolutely fine. Is there any work around to achieve the same with earlier version of jqx libraries (2.7 Feb 2013) version?

Regards,
Priya

[DimitarParticipant]

Hi Priya,

This feature has been introduced in version 3.3.0 and cannot be implemented in any older versions. We always recommend using the latest version for the best widget experience.

Best Regards,
Dimitar

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

[Author]

Posts