Home/ Questions/Q 9227443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:05:11+00:00

I want to pass data to highcharts by getJSON method: <script type=text/javascript> var chart;

  • 0

I want to pass data to highcharts by getJSON method:

<script type="text/javascript">
var chart;
    $(document).ready(function(){
$("#datepicker1").datepicker({showOn: 'button', buttonImage: 'css/base/images   /calendar.gif', buttonImageOnly: true,dateFormat: "yy-mm-dd"});
  });
function draw_chart(){`
   var url="http://localhost/handle_data.php?start=2012-12-30&end=2013-01-04";
    chart=new Highcharts.Chart({});

$.getJSON(url,function(data1){
 var options={
    chart: {
            renderTo: 'container',
    type: 'line'
        },

        xAxis:{
    type: 'datetime'

   },
        yAxis: {
            title: {
                text: 'test'
            }

        }, 
        series:[{
           data:data1.result[0].dayactivity,
           name: "name"
       }]

};
var chart = new Highcharts.Chart(options);
});
}

</script>
</head>

<body>

<div >  
<input type="text" id="datepicker1" name="date1" onchange='draw_chart()' >
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

the value of data1.result[0].dayactivity is: 

[[1356796800,0.0],[1356883200,16.1],[1356969600,0.0],[1357056000,0.0],[1357142400,15.0]],

when i put this value directly to options.series[0].data, it works, but when i pass it throuth getJSON, it does not. The chart is empty. It seems that it executes var chart = new Highcharts.Chart(options); first. How can i solve this? thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to move the creation of the Chart within the success callback of $.getJSON(); You only have to instantiate and create the Chart once and that will be within the callback function. 

    function draw_chart() {
    var url="http://localhost/handle_data.php?start=2012-12-30&end=2013-01-04";
    $.getJSON(url,
        function(data1){
            /** Declare options after success callback. */
            var options={
                chart: {
                     renderTo: 'container',
                     type: 'line'
                },
                xAxis:{
                     type: 'datetime'
                },
                yAxis: {
                     title: { text: 'test'}
                }, 
                series:[{
                    data:data1.result[0].dayactivity,
                    name: "name"
                }]
           };

           /** Create a chart instance and pass options. */
           var chart = new Highcharts.Chart(options);
       }
    );
}
    • 0