Build empty chart and then set it's data

3
votes

I have started to implement a column chart at Highcharts.(http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/ column chart part of it)

I set series as like that:

...
series : []
...

And I return sth like that from server:

[ {
  "name" : "4346",
  "data" : [ 3010840179 ],
  "type" : "column"
}, {
  "name" : "20232",
  "data" : [ 2135308977 ],
  "type" : "column"
} ]

When I copy that value and set series at first it renders graphic. However I don't what will return from server(how many elements etc.) and I try that:

chart.series = data; //chart is my chart variable's name, data is the returning JSON String from server.

However nothing happens at chart, I know it is not a valid usage. What should I do to set series variable of chart at once?

PS 1: I try to set data at my callback function at $.getJSON()

PS 2: chart.series[n].setData(); is not for me. I have both data and names of every elements from server. I want to set whole series variable of chart at once.

EDIT 1: http://jsfiddle.net/HD6CY/ this is what I want to achieve.

EDIT 3: I want to create a chart with series : [] and after I get data from server(it takes long time) I want to set it to my chart's seres variable. I don't want to block my chart to be created if waits to get data, I want to build empty and after that I will set it. I will show a loading text at screen so there will be something instead of a null page even it doesn't have anything to show at beginning.

2
javascriptjqueryajaxhighcharts
Look the following demo: jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/… it works. – Ricardo Alvaro Lohmann
You are getting data name by name(i.e., mfst, aapl, goog). However I have all data? – kamaci
If you have all data with the exact expected structure you should pass it directly to seriesOptions(used on my example) without process it again. – Ricardo Alvaro Lohmann

2 Answers

3
votes

Check about addSeries.

After build an empty chart, do the following.

var  variable =   [{
    type: 'column',
    name: 'Jane',
    data: [3, 2, 1, 3, 4]
}, {
    type: 'column',
    name: 'John',
    data: [2, 3, 5, 7, 6]
}, {
    type: 'column',
    name: 'Joe',
    data: [4, 3, 3, 9, 0]
}]; 
for(var i in variable) {
    chart.addSeries(variable[i], false); // don't redraw
}
chart.redraw(); // redraw only after add all series

DEMO

Reference

1
votes

have you tried creating your chart on success of your ajax call ? :

  ...
  success: function(data) { 
       var chart;  
       chart = new Highcharts.Chart({
             ...
             series: data
             ....
       });
  ...