Home forums Using CanvasJS Canvas js is showing single line as bar data for Multi Series Range Column Chart

This topic contains 1 reply, has 2 voices, and was last updated by  Shashi Ranjan 4 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24174

    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
    }]
    });

    #24187

    @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

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

You must be logged in to reply to this topic.