Home forums Feature Requests & Feedback Plot dates only present in dataseries

This topic contains 1 reply, has 2 voices, and was last updated by  Anjali 1 year, 10 months ago.

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

    ankitcanvas
    Participant

    Hello,
    I need to plot date on x axis. But only those dates which have some data in it. Currently all dates get populated in the x-axis. Please help. Below is the code:

    window.onload = function () {
    var chart_1= new CanvasJS.Chart(“chartContainer”, {
    title:{
    fontSize: 20,
    fontColor:’#0095da’,
    fontWeight:’normal’,
    text: ‘HW’
    },
    exportEnabled: true,
    exportFileName: ‘HW’,
    zoomEnabled:false,
    axisY:{
    interlacedColor: “#fbfbfb”,
    tickLength: 1,
    tickThickness: 1,
    //suffix: ‘m’,
    labelFontSize: 12,
    labelFontColor:’#0095da’

    },
    toolTip:{
    shared: true,
    content: function(e){
    var body = new String;
    var head ;
    for (var i = 0; i < e.entries.length; i++){
    var str = ” ” + e.entries[i].dataSeries.name + “: “+ e.entries[i].dataPoint.y + “ ” ;
    body = body.concat(str);
    }
    head = “Date Time :“+ (parseDate(e.entries[0].dataPoint.x)) + ““;

    return (head.concat(body));
    }
    },
    axisX:{
    gridColor: “Silver”,
    tickColor: “silver”,
    valueFormatString: “DD-MM-YYYY hh:mm TT”,
    title:’Date Time’,
    titleFontSize: 17,
    //titleFontColor:’#0095da’,
    labelAngle: 97,
    labelFontSize: 12,
    labelFontColor:’#0095da’
    },
    data: [

    {
    type: “line”,
    lineThickness:3,
    showInLegend: true,
    name: ‘Height(m)’,
    color: “#00B74F”,
    dataPoints: [{ x : new Date(1415016180000) , y : 2.0 },{ x : new Date(1420093800000) , y : 2.0 },{ x : new Date(1420790940000) , y : 1.0 },{ x : new Date(1420877280000) , y : 2.0 },{ x : new Date(1421815440000) , y : 1.0 },{ x : new Date(1421818740000) , y : 2.0 }]

    },

    {
    type: “line”,
    lineThickness:3,
    showInLegend: true,
    name: ‘Weight(kg)’,
    color: “#0095C8″,
    dataPoints: [{ x : new Date(1415016180000) , y : 120.0 },{ x : new Date(1420093800000) , y : 142.0 },{ x : new Date(1420790940000) , y : 300.0 },{ x : new Date(1420877280000) , y : 100.0 },{ x : new Date(1421815440000) , y : 120.0 },{ x : new Date(1421818740000) , y : 142.0 }]

    }

    ]
    });
    chart_1.render();
    }

    #8070

    Anjali
    Participant

    ankitcanvas,

    Please assign the time-stamp value to label instead of x in dataPoints. For formatting you can use libraries like moment.js. Here, is an example.

    __
    Anjali

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

You must be logged in to reply to this topic.