Overview – Working with Data in Chart

Comments 37

1. 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

   • Please set interval value of axisY to 0.002 or something similar

     • I can’t seem to get this working with smaller numbers as well as bigger numbers. If I set interval value to something small all I get is this: https://i.imgur.com/di4TEdA.png .
       Additionally, the data I’d like to dynamically use can be either very small or very big. The automatic settings won’t work. They will only get you this: https://i.imgur.com/GoMgaTp.png .
       Fixing the auto-setting would be appreciated.

   • Hey Sunil,
     This is good, thanks ;)

2. Hi! I’ve got a question. If you’re working with an API and want to get the data out it with this graphs, how do I do that?

3. 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?

   • Joe,

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

4. Can data be live updated? Lets say user clicks something and the graph updates

   • Yes, here is an Example.

5. can remote data like from php can be used or not to show bar graph ?

   • pritam,

     Please refer to this thread.

6. how to bind the data from db?

   • #i’m using asp.net

7. 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?

   • aamir,

     Please refer to this example.

8. 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.

9. como puedo conectar mis datos de temepratura de mi base de datos y mostrarlos en un grafico lineal en tiempo real?

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

    • kyle,

      Yes, it is possible. Please refer to this example.

11. 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

12. How can I add units to data in tooltips?

    • Hi Dima,
      You can add units by using yValueFormatString at the data series level. Here is a jsfiddle example.

13. i want to create graph using mysql database values in java
    so is it posiible

    • Chirag,
      To render chart, data is accepted in a format. You can fetch data from database and pass it in format which chart accepts.

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

    • 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..

      • 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?

15. how to get data from html element? i tried with getElementbyID but not working, please check my fiddle

    http://jsfiddle.net/onlinesquad/6gawzc74/

    • Ghifari,

      You can use getElementById.innerHTML to access the content of div and then pass it to chart. Here is the working fiddle.

16. 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”},

    • Vinay,
      Here is an example to redirect to a page when dataPoints are clicked.

17. 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();
    }

    }

    });
    });
    });

    • 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.

      • 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

        • 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.

18. IS there anyway we can use the data in html table…

    • Ngila, yes you can use data from HTML Table. Here is an example.