Home forums Using CanvasJS JSON and the Line Chart

Tagged: , , ,

This topic contains 3 replies, has 4 voices, and was last updated by  Indranil Deo 2 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #4779

    jwhazel
    Participant

    I’m trying to dynamically import all of the chart data from a server side JSON file using jQuery. Here is my properly formatted JSON file (I’ve checked it with a validator):

    {
       "axisY":{
          "title":"By Percentage"
       },
       "colorSet":"greenshades",
       "backgroundColor":"#2c2d2d",
       "data":[
          {
             "type":"line",
             "dataPoints":[
                {
                   "x":"new Date(2013, 04, 1)",
                   "y":3.31,
                   "markerColor":"#588F27"
                },
                {
                   "x":"new Date(2013, 04, 7)",
                   "y":4.55,
                   "markerColor":"#588F27"
                },
                {
                   "x":"new Date(2013, 04, 14)",
                   "y":6.88,
                   "markerColor":"red"
                },
                {
                   "x":"new Date(2013, 04, 21)",
                   "y":3.42,
                   "markerColor":"#588F27"
                },
                {
                   "x":"new Date(2013, 04, 29)",
                   "y":5.15,
                   "markerColor":"red"
                },
                {
                   "x":"new Date(2013, 05, 5)",
                   "y":3.34,
                   "markerColor":"#588F27"
                }
             ]
          }
       ]
    }

    Notice how the x coordinate new Date(yyddmm) has to be encapsulated in quotes to be valid. But it seems canvasjs’s parser doesn’t pick up on it. That is the above JSON will render the chart properly but without any data points plotted. Not encapsulating it will cause $getJSON to fail silently and no chart is drawn. Do you have any recommendation on a way around this?

    #4782

    Sunil Urs
    Keymaster

    Hi,

    JSON doesn’t have a standard way to specify date objects.

    Best way is to send timestamp values instead. CanvasJS accepts timestamp values when xValueType property is set to “dataTime” as shown here.

    You can also use any of the custom formats and parse them on the client side before assigning it to the chart.


    Sunil Urs

    #15960

    njhelloworld
    Member

    I am really new to canvasjs I need to create a running line chart based on data from database. What I did is something like this, error comes like Uncaught ReferenceError: $ is not defined at window.onload (livechart.php:7). Always shows.. Please help me with this..Thank you so much for any reply

    window.onload = function () {
            $.getJSON("www.website.com/livedata.php", function(result){
            var dps = []; // dataPoints
            var chart = new CanvasJS.Chart("chartContainer",{
                zoomEnabled:true,
                panEnabled:true,
                animationEnabled:true,
                title :{
                    text: "Analysis for Soil Ph",
                    fontSize: 20
                },          
                data: [{
                    type: "line",
                    dataPoints: dps 
                }]
            });
            var xVal = 0;
            var yVal = 100; 
            var updateInterval = 100;
            var dataLength = 500; // number of dataPoints visible at any point
           var updateChart = function (count) {
                count = count || 1;     
                for (var j = 0; j < count; j++) {   
                    yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                    dps.push({
                        x: xVal,
                        y: yVal
                    });
                    xVal++;
                };
                if (dps.length > dataLength)
                {
                    dps.shift();                
                }
                
                chart.render();     
    
            };
            updateChart(dataLength); 
            setInterval(function(){updateChart()}, updateInterval); 
    
    });
        }
    #15963

    Indranil Deo
    Member

    @njhelloworld,

    Kindly make sure that jQuery is included in the code.

    ____________
    Indranil Deo,
    Team CanvasJS

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

You must be logged in to reply to this topic.