Ajax pattern to update javascript chart data?

Question

I'm using Highchart API to display charts. There are many chart type to display and the idea is let the user choose a chart from a dropdown, make an ajax request and partially update the chart. The good is i can output a custom response, with custom chart options, layout and data.

The problem here is that chart layout and data are inside the script tag in head. An empty div is then populated by the API.

Which pattern should i use to partially update the chart? Sorry for the very noob question, but i'm feeling a bit confused when dealing with something different from updating div with plain text/html as server response.

Ricardo Binns · Answer 1 · 2011-10-10T17:39:47.737

0

i was working a little with hightchart, and what i was doing to change the type of chart is calling a function that go's to a php ajax source and create the chart with a table's db result.

each chart's need a diferente table layout, i think.

and that's why i create separeted files for this.

like:

piechart.ajax.php

and a div get the return of ajax call and after that, i call the Highcharts to display the div's result's into a chart.

dont know if this will help you, but may be clear your 'mind'

edit:

html:

<div id="grafic"></div>

js:

    $.post("ajax/piechart.ajax.php", 
            { 
                cache: false,
            }, 
            function(data){ 

                $("#grafic").html(data);

                var table = document.getElementById('datatable'),
                    options = {
                        chart: {
                            renderTo: 'grafic',
                            zoomType: 'xy',
                            defaultSeriesType: 'pie'
                        }
                    };
                    Highcharts.visualize(table, options);
            }
    )

edited Oct 10 '11 at 17:39

answered Oct 10 '11 at 17:27

Ricardo Binns

3,228
6
44
71

What's the output of `piechart.ajax.php` and what do you mean for "display the div's result's into a chart"? The div is just an empty element filled by Highcharts... – gremo Oct 10 '11 at 17:32
i extract the result from a table, the source of piechart.ajax.php is a html table, and the return of ajax ( data ) i drop into a div, like $("#div").html(data); and i use the source of #div to create the chart. – Ricardo Binns Oct 10 '11 at 17:34
Ok, it seems you're fetching data from an html table, but i'm using a json object and i don't need to display the data as a table. Any idea then? – gremo Oct 10 '11 at 18:08
in that case, i suggest u take a look in the documentation, they have alot of info's there. And check this ( http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts ) see if help's you – Ricardo Binns Oct 10 '11 at 18:46

score 0 · Accepted Answer · answered Oct 11 '11 at 22:04

Answer myself: make chart a global javascript variable, initialize charts options (not necessary) send an ajax request and return a JSON object that represent the entire chart object, overriding chart global. No need to call redraw. Limitations: as you can't serialize function you can't dynamically override formatters function (e.g. for tooltips).

If you just want to update data call addSeries, setSize, setTitle (and others) methods.

All explained very well here (section 4) and here.

Ajax pattern to update javascript chart data?

2 Answers2