Creating Charts with JSON and Highcharts

Asked

Viewed 1,516 times

4

I’m trying to use a simple example provided by Highcharts to create a chart, but I’m not succeeding.

HTML

<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Highcharts Example</title>

      <script src="http://code.highcharts.com/highcharts.js"></script>
      <script src="http://code.highcharts.com/modules/exporting.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      <script type="text/javascript">

        $(document).ready(function() {

        var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
        };

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

    });
</script>
</head>
<body>

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

</body>
</html>

data json.

[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]

My question is: why is the chart not created? If I wanted to change the format to [{"a","b"}] how I should change the data passage to the chart?

html highcharts

  • The object options is very complex, where is it? otherwise it will error in the console if you try to use options.series[0].data = data;. Take a look here and complete your question: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

  • I did not quite understand the second question, could I clarify?

1 answer

0

I tested your HTML and what seemed to be the problem that didn’t create the chart is that the Highcharts library seems to have a jQuery dependency, and jQuery is only being declared after Highcharts. Try switching to the following order: 

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>

Browser other questions tagged html highcharts

You are not signed in. Login or sign up in order to post.