how to draw charts with json file data in highcharts

Question

my json.data file is in the same directory as my index.html file. data.json file looks like this:

  {
 data:
    [
          [1369540800000,20]
    ]
}

when I do:

alert(JSON.stringify(jsonData, null, 4));

I get this back, so I get the values. Still dont know what is wrong.

{
   "data":[
    [
      1369540800000,
          10
        ],
        [
          1369541700000,
          20
    ]
      ]
}

my html file including java script to build the charts is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>HIGHTCHARTS</title>

                <style>

                        body
                        {
                                font: 10px arial;
                        }

                </style>

             <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
             <script src="http://code.highcharts.com/highcharts.js"></script>

                <script type="text/javascript">

                $(function () {
                            var chart;
                            $.getJSON('data.json', function(jsonData) {
                                chartOptions.series = jsonData;
                                chart = new Highcharts.Chart(chartOptions);
                            });

                            var chartOptions = {
                                chart: {
                                    renderTo: 'container'
                                },
                                xAxis: {
                                    type: 'datetime'
                                },

                                series: []
                            };
                        });
                </script>


        </head>

        <body>
               <div id="container" style="width:100%; height:400px;"></div>
        </body>

</html>

I see the chart title but I dont see any charts or data points. What am I missing here?

jlbriggs · Accepted Answer · 2013-06-07 14:22:24Z

2

Your data is not in the right format. Familiarize yourself with how to format data for Highcharts.

These may help:

Notably:

1) your dates must be either a javascript time stamp (epoch time, in milliseconds), or a date.Utc declaration

2) your structure needs to be like:

[[date, value],[date,value],[date,value]]

edited Jun 7, 2013 at 14:22

answered Jun 7, 2013 at 14:01

jlbriggs

17.8k4 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1471980 Over a year ago

@jbringgs, I did exactly that, I still dont see any data points on the chart. [[1369540800,14.84],[1369540800,14.84]]

Paweł Fus Over a year ago

Multiply timestamps by 1000 - in Javascript timestamp should be in milliseconds.

user1471980 Over a year ago

@PawełFus, I multiplied ith by 1000, I still dont see any data points on the chart. my data.json file looks like this: [[1369540800000,10],[1369541700000,20],[1369542600000,50],[1369543500000,45],[1369544400000,45],[1369545300000,100]]

jlbriggs Over a year ago

You need to make sure you are adding the data at the right level of the series object. Your final product needs to be "series:[{ data: [[date,value],[date,value]] }]"

user1471980 Over a year ago

@jlbriggs, I just updated my json data in the post. It still not working. I just need to get this right.

|

user1471980 · Accepted Answer · 2013-06-07 16:07:30Z

0

this is what I had to do to make it work:

<script src="js/highcharts.js"></script>


     <script type="text/javascript">

        $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'area'
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                series: [{}]
                };

            $.getJSON('dude.json', function(data) {
                options.series[0].data = data;
                var chart = new Highcharts.Chart(options);
            });

        });
     </script>

answered Jun 7, 2013 at 16:07

user1471980

10.7k49 gold badges149 silver badges249 bronze badges

Collectives™ on Stack Overflow

how to draw charts with json file data in highcharts

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related