Overview – Working with Data in Chart

This Section explains how to add data to the chart. All the data that you want to be plotted should be added to an array called “data” which is a property of Chart Options. Each element in the array is an object called dataSeries which is a logical grouping of related data elements. Individual data elements/points are referred to as dataPoint. Throughout the documentation we use the term dataSeries and series(for brevity) interchangeably.


dataSeries

Each element in the data array is a dataSeries object. dataSeries is a logical grouping of related dataPoint and as whole they render a chart. dataSeries is where you define what type of chart you want to render for a given set of data elements. Each dataSeries can render a different Chart Type. In dataSeries user can define all the dataSeries level Properties like type, name, legendText ,dataPoints etc. dataSeries also lets you define properties that get applied to all the dataPoint elements that it contains – which can be in turn be overridden by individual dataPoint.

Below syntax displays the format of dataSeries object in data Array. 

var  chart =  new  CanvasJS.Chart("container",
{
  .
  .
  .
  data:[ 
  {// dataSeries 1
   type: "column",
   dataPoints:[ //array of dataPoint
    {x:1, y:5}, //dataPoint
    {x:2, y:6}, //dataPoint
    {x:3, y:7} //dataPoint
   ]
  },

  {// dataSeries 2 
   type: "line",
   dataPoints:[
    {x:1, y:8}, //dataPoint
    {x:2, y:9}, //dataPoint
    {x:3, y:4} //dataPoint
   ]
  },
.

],
.
. 
});
chart.render();

dataPoints

Each value that has to be plotted on the chart is referred to as a dataPoint. You add each dataPoint to an array called dataPoints which is a member of dataSeries. Most commonly used dataPoint properties that you should remember are x, y ,and label.
Here is how you add dataPoints to a dataSeries. 

dataPoints : [ 
   { x: 10, y: 15, label: "apple"  }, //dataPoint
   { x: 20, y: 8,  label: "mango"  }, 
   { x: 30, y: 10, label: "orange" }, 
   { x: 40, y: 12, label: "banana" } 
],
Note
  • Properties like toolTipContent, color, etc can be set at both dataSeries and dataPoint level. In those cases, the value set at dataPoint overrides the one provided at the dataSeries level.

Adding dataPoints

Each dataPoint should consists of a y value. A series can be plotted with only y values as dataPoints. If no x value is provided, they are automatically set sequentially starting from zero.

Try Editing The Code

x values in dataPoints

dataPoints can be positioned on axisX by setting x value in dataPoint. x value can be numeric value, or a dateTime value.

Try Editing The Code

Labels in dataPoints

Labels are values that appear on axisX. If not provided, it takes x value for label. We can also add custom labels on axisX.

Try Editing The Code

Index Labels in dataPoints

Index Label values are positioned above or below the actual dataPoint. See how they can be customized.

Try Editing The Code

Finishing it up

We can now apply the above concepts and customize title to come up with our first complete Chart.

Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

37 Comments

  1. Vahilow Dimitrayev says:

    Hello,
    I am working with small numbers like ;

    { label: “17:46:12”, y: 2.0375 },
    { label: “17:48:12”, y: 2.0375 },
    ]
    }],axisY :{
    minimum: 2.0315,
    maximum: 2.0573 ,

    In Y axis, graph showing only 2.031. How can we scale small numbers?
    Regards,
    Vahilow Dimitrayev

  3. Joe says:

    What is the syntax if I want to use a variable from an external data source instead of a hard-coded number in the datapoints?

    • Sunil Urs says:

      Joe,

      In that case you need to generate required dataPoints array and/or dataSeries and assign the same. Here is a very simple example.

  7. m aamir akhter says:

    Thanks for providing such a grate Tool. I want to display data from database and i am using ASP.net, so how is it possible? Is it possible to generate a text file for data and link it as a data source?

  8. fa says:

    I want to connect excel sheet of data how to do this i will try but not success please help me how to how to connect my excel value. i am waiting for solution.

  10. Kyle says:

    Is there a way to make y value refer to a var? like { label: “apple”, y: data}
    where “data” comes from outside value?

  11. manjinder says:

    Hi,

    I want to add values from database my sql, I am using PHP , and want to update graph without hiting refresh as I change value in the database.

    var dps = [
    {label: “boiler1”, y: “”},

    This is not working.

    Please help me out

    Thanks

  14. Fran says:

    Is there any way I can trigger some function at the time a specific point is rendered on the chart? Thanks.

    • Sunil Urs says:

      Fran,

      We don’t have any event like that. But given that all dataPoints in chart are rendered at once soon after calling chart.render() & you have full control over all the dataPoints being added to the chart, you should be able to implement this externally because you’ll know when that dataPoint is being added..

      • Fran says:

        Sunil,

        I tried this but the beeps are all irregular when they shouldn’t really be. I am working on an ECG signal generator so I need a beep when the peak of a heartbeat is plotted and even with a 1ms update interval, the beeping still is irregular and does not resemble a heart rate monitor in any way…
        https://jsfiddle.net/haqe6o0u/

        Any other solutions?

  16. vinay says:

    How to add links to each datapoint
    something like this

    { label: “17:46:12”, y: 2.0375 , url: “www.google.com”},
    { label: “17:48:12”, y: 2.0375 “url: “www.javascript.com”},

  17. Nikita says:

    Hi,
    I am working with REST API and i got the data in the browser.Now i want to use these data to construct chart in the html page.But I got this error : Uncaught TypeError: Cannot read property ‘getTime’ of undefined.

    Can you please me ?

    Here is my code to construct chart :

    $(document).ready(function()
    {
    $(“#button”).click(function()
    {

    $.ajax({
    type: “GET”,
    url: “http://localhost:8080/Nikitashared/rest/HostService/Hosts”,

    dataType: “json”,
    success: function(json)
    {
    for(var i = 0; i < json.length; i++)
    {

    var obj = json[i];

    var Name = obj.hostvo.name;
    var Used_Capacity = obj.hostcapacity.used_capacity;
    var Total_Capacity = obj.hostcapacity.total_capacity;

    var chart = new CanvasJS.Chart("chartcontainer")
    {

    chart.options.title =
    {
    text: "UnderUtilized Hosts"
    };

    // dataSeries – Total Capacity
    var series1 =
    {
    type: "column",
    name: "Total Capacity",
    showInLegend: true
    };

    //dataSeries – Used Capacity
    var series2 =
    {
    type: "column",
    name: "Used Capacity",
    showInLegend: true
    };

    chart.options.data = [];
    chart.options.data.push(series1);
    chart.options.data.push(series2);

    series1.dataPoints =[Name, parseInt(Total_Capacity)];

    series2.dataPoints =[Name,parseInt(Used_Capacity)];
    }
    chart.render();
    }

    }

    });
    });
    });

    • Vishwas R says:

      Nikita,

      It would help us to understand the issue if you can create a fiddle. And can you kindly provide the json format, so that we can look into it and help you out.

      • shanmuga says:

        Hi…I am facing the same issue which what u faced like getting “Uncaught TypeError: Cannot read property ‘getTime’ of undefined.” in ajax call…can u pls help me out

        • Sanjoy says:

          This might happen due to stringify of dateTime data types, you can check it by consoling it’s type.

          It’s hard to get the issue without looking into code. Can you create a jsfiddle with your sample JSON so that we can look into it.

If you have any questions, please feel free to ask in our forums. Ask Question