Home forums Using CanvasJS JSON and the Line Chart

This topic contains 1 reply, has 2 voices, and was last updated by  Sunil Urs 3 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 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

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

You must be logged in to reply to this topic.