highcharts get data by JSON?

jquery json highcharts

18,649

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);
       }
    );
}

18,649

Author by

user1611237

Updated on August 01, 2022

Comments

user1611237 over 1 year

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.

zb' about 11 years

OP's code is same, not well formated, problem is that he run new Highcharts.Chart({}); too early
user1611237 about 11 years

Yes, it is same code. How to make it run new Highcharts.Chart({}) a bit late? if i write it outside of $.getJSON, the options variable will not be defined. Any idea?
user1611237 about 11 years

ok. thanks eicto, i found the problem, it is not because of the var. i add eval at series: [{ data: eval(data1.result[0].dayactivity), name: "name" }]. Now it works!
Dennis Rongo about 11 years

options is defined within the callback function so it should work if you run chart like I have it above.
Radek over 10 years

if I wasnt married, I'd kiss you and ask you to marry me ! I was looking for solution why data do not appear on my chart, EVAL was the answer. Thank you thank you thank you :)
Roopendra over 9 years

@user1611237 : Thanks at least you mention solution in comment. It solves my problem as well. I think you should add this as a answer :)