开发者

Ajax pattern to update javascript chart data?

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 patter开发者_如何学Cn 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.


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜