Canvas js is showing single line as bar data for Multi Series Range Column Chart

[darshan jain]

canvas js is showing graph sometime and sometime it is not showing graph.

graph is shown for below dataset
[
{
“x” : new Date(“2019-01-22T11:00:53.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-22T00:00:00-08:00”,
“end”: “2019-01-22T16:30:53-08:00”
}
},
{
“x” : new Date(“2019-01-22T03:59:00.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-13T00:00:00-08:00”,
“end”: “2019-01-21T09:29:00-08:00”
}
},
{
“x” : new Date(“2019-01-22T11:00:53.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-14T00:00:00-08:00”,
“end”: “2019-01-22T16:30:53-08:00”
}
},
{
“x” : new Date(“2019-01-22T04:00:34.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-13T00:00:00-08:00”,
“end”: “2019-01-21T09:30:34-08:00”
}
},
{
“x” : new Date(“2019-01-22T11:00:53.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-14T00:00:00-08:00”,
“end”: “2019-01-22T16:30:53-08:00”
}
},
{
“x” : new Date(“2019-01-22T11:34:00.000″z””),
“y”:[
139,
88
],
“z”:{
“start”: “2019-01-13T00:00:00-08:00”,
“end”: “2019-01-21T17:04:00-08:00”
}
},
{
“x” : new Date(“2019-01-22T11:00:53.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-14T00:00:00-08:00”,
“end”: “2019-01-22T16:30:53-08:00”
}
},
{
“x” : new Date(“2019-01-22T11:36:27.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-13T00:00:00-08:00”,
“end”: “2019-01-21T17:06:27-08:00”
}
},
{
“x” : new Date(“2019-01-22T11:00:53.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-22T00:00:00-08:00”,
“end”: “2019-01-22T16:30:53-08:00”
}
},
{
“x” : new Date(“2019-01-22T02:23:00.000″z””),
“y”:[
88,
139
],
“z”:{
“start”: “2019-01-14T00:00:00-08:00”,
“end”: “2019-01-22T07:53:00-08:00”
}
}
]

graph is not getting showed for below dataset
[
{
x : new Date(“2018-08-02T23:20:29.000Z”),
y :[
85,
142
],
z:{
“start”: “2018-08-02T16:20:29-07:00”,
“end”: “2018-08-02T16:20:29-07:00”
}
},
{
x : new Date(“2018-08-01T14:24:45.000Z”),
y :[
86,
148
],
z:{
“start”: “2018-08-01T07:24:45-07:00”,
“end”: “2018-08-01T07:24:45-07:00”
}
},
{
x : new Date(“2018-08-02T23:20:00.000Z”),
y :[
86,
144
],
z:{
“start”: “2018-08-02T16:20:00-07:00”,
“end”: “2018-08-02T16:20:00-07:00”
}
},
{
x : new Date(“2018-07-31T22:58:36.000Z”),
y :[
134,
87
],
z:{
“start”: “2018-07-31T15:58:36-07:00”,
“end”: “2018-07-31T15:58:36-07:00”
}
},
{
x : new Date(“2018-08-03T14:43:14.000Z”),
y :[
86,
137
],
z:{
“start”: “2018-08-03T07:43:14-07:00”,
“end”: “2018-08-03T07:43:14-07:00”
}
},
{
x : new Date(“2018-08-03T14:40:00.000Z”),
y :[
139,
86
],
z:{
“start”: “2018-08-03T07:40:00-07:00”,
“end”: “2018-08-03T07:40:00-07:00”
}
},
{
x : new Date(“2018-08-02T14:37:08.000Z”),
y :[
86,
147
],
z:{
“start”: “2018-08-02T07:37:08-07:00”,
“end”: “2018-08-02T07:37:08-07:00”
}
},
{
x : new Date(“2018-08-01T14:23:00.000Z”),
y :[
86,
141
],
z:{
“start”: “2018-08-01T07:23:00-07:00”,
“end”: “2018-08-01T07:23:00-07:00”
}
},
{
x : new Date(“2018-07-31T22:56:00.000Z”),
y :[
134,
85
],
z:{
“start”: “2018-07-31T15:56:00-07:00”,
“end”: “2018-07-31T15:56:00-07:00”
}
},
{
x : new Date(“2018-08-02T14:35:00.000Z”),
y :[
147,
86
],
z:{
“start”: “2018-08-02T07:35:00-07:00”,
“end”: “2018-08-02T07:35:00-07:00”
}
}
]

canvasjs property i am using is

`Scope.chart = new CanvasJS.Chart(“chartCon_”+Scope.graphId, {
animationEnabled: true,
exportEnabled: false,
dataPointWidth: 20,
axisX: {
valueFormatString: “YYYY-MM”,
labelFontSize: 11,
gridThickness: .5,
},
axisY: {
includeZero: false,
suffix: ” mmhg”,
interval: 40,
minimum:0,
labelFontSize: 11,
gridThickness: .5,
stripLines: [{
color:”blue”,
opacity: .1,
startValue:0,
endValue:400,
}]
},
toolTip: {
shared: true,
fontSize: 11,
content: “Week:{x} <br> {y[0]}/{y[1]} ” ,
contentFormatter: function ( e ) {
var d=e.entries[0].dataPoint.x;
month = ” + (d.getMonth() + 1),
day = ” + d.getDate(),
year = d.getFullYear();

if (month.length < 2) month = ‘0’ + month;
if (day.length < 2) day = ‘0’ + day;
return “Week of: ” + [year, month, day].join(‘-‘)+”<br> Average BP: “+e.entries[0].dataPoint.y[0]+”/”+e.entries[0].dataPoint.y[1]+”mmhg”;
}
},
legend: {
cursor: “pointer”,
itemclick: Scope.toggleDataSeries
},
data: [{
type: “rangeColumn”,
color:”#5DADE2″,
click: function(e){
getGraphTableData(e.dataPoint.z);
if(Scope.readingType = AVG_VALID_READING ){
Scope.currentValidSystolicValue = e.dataPoint.y[0];
Scope.currentValiddiastolicValue = e.dataPoint.y[1];
}
else if(Scope.readingType = AVG_ALL_READING ){
Scope.currentAllSystolicValue = e.dataPoint.y[0];
Scope.currentAlldiastolicValue = e.dataPoint.y[1];
}
Scope.currentWeekEndingDate=formatDate(new Date(e.dataPoint.x));
defaultSelection=false;
//alert( e.dataSeries.type+ “, dataPoint { x:” + e.dataPoint.x + “, y: “+ e.dataPoint.y + ” }” );
},
dataPoints:Scope.data
}]
});

[Shashi Ranjan]

@darshan-jain,

Chart seems to be working fine with all the sets of dataPoints that you have shared. Can you kindly create a JSFiddle reproducing the issue you’re facing so that we can look into the code, understand it better and help you out?

____
Shashi Ranjan
Team CanvasJS