[JS] HighChart with AJAX JSON

最近有個東西要用到圖表，於是開始尋找好用的，條件是要可以方便的吃進json，吐出多條線來，試用了很多家方案，最後決定使用sobi推薦的HighChart，雖然它曾經被我一度打槍....因為說明太少搞不定AJAX取資料怎麼餵進去 -_-



反正最後研究了好一陣子之後，我終於搞定這該死的吐資料給HighChart這件事，所以來分享一下....(其實以前也用過特殊餵資料方法的jqGrid，有空再來分享)

JavaScript Here

        $(document).ready(function () {
            // first , setting highchart
            var chart = new Highcharts.Chart({
                chart: { renderTo: 'container', type: 'spline' },
                title: { text: 'Bahamut Game Popular' },
                subtitle: { text: 'source from www.gamer.com.tw' },
                xAxis: { type: 'datetime' },
                yAxis: { title: { text: 'Popular Index'} }
            });

            // second , get json source
            $.getJSON('YOUR SOURCE',
                function(data) {
                    //get series one by one
                    for (var j = 0; j < data.length; j++) {
                        var seriesData = [];
                        var chartData = data[j].Data;
                        var chartName = data[j].Name;
                        for (var i = 0; i < chartData.length; i++) {
                            var x = new Date(chartData[i].Date).getTime();
                            var y = chartData[i].Value;
                            seriesData.push([x, y]);
                        }
                        chart.addSeries({
                            name: chartName,
                            data: seriesData
                        });
                    }
                });
        });

JSON source here

[{"Name":"WOW 魔獸世界","Data":[{"Date":"2012-09-10T00:00:00","Value":313119},{"Date":"2012-09-11T00:00:00","Value":278670},{"Date":"2012-09-12T00:00:00","Value":267830},{"Date":"2012-09-13T00:00:00","Value":265324},{"Date":"2012-09-14T00:00:00","Value":304971},{"Date":"2012-09-15T00:00:00","Value":395454},{"Date":"2012-09-16T00:00:00","Value":294094},{"Date":"2012-09-17T00:00:00","Value":255150},{"Date":"2012-09-20T00:00:00","Value":292348},{"Date":"2012-09-21T00:00:00","Value":360397},{"Date":"2012-09-22T00:00:00","Value":362847},{"Date":"2012-09-23T00:00:00","Value":352776}]},{"Name":"激戰 2(Guild Wars 2 )","Data":[{"Date":"2012-09-10T00:00:00","Value":449105},{"Date":"2012-09-11T00:00:00","Value":449910},{"Date":"2012-09-12T00:00:00","Value":473434},{"Date":"2012-09-13T00:00:00","Value":448887},{"Date":"2012-09-14T00:00:00","Value":403590},{"Date":"2012-09-15T00:00:00","Value":403879},{"Date":"2012-09-16T00:00:00","Value":388620},{"Date":"2012-09-17T00:00:00","Value":391610},{"Date":"2012-09-20T00:00:00","Value":438102},{"Date":"2012-09-21T00:00:00","Value":366053},{"Date":"2012-09-22T00:00:00","Value":336391},{"Date":"2012-09-23T00:00:00","Value":363547}]},{"Name":"火炬之光 系列","Data":[{"Date":"2012-09-21T00:00:00","Value":61470},{"Date":"2012-09-22T00:00:00","Value":188160},{"Date":"2012-09-23T00:00:00","Value":207340}]}]

程式就是這樣，相當簡短，簡單來說就是先設好HighChart的各種設定，再把資料一個個塞進去。

由於在blogger上面demo有點限制，所以如果你看原始檔的話，會發現我下面的這個範例是把資料直接寫死，搬回自己環境再改一下就可以了。