highcharts

open-flash-chart.swf 대신 사용한 js library. 간단하게 미려한 결과를 보여준다.

결과

a.json

{ "series": [
  { "name": "old",
    "data": [1,3,2,5] },
  {	"name": "new",
    "data": [5.1,3.7,3.4,4.4]}],
 "title": { "text": "Sales" },	
 "xAxis": {"categories": ["Apple", "Banaas", "Oranges", "Simul"]}
}

html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></Script>
<div id="container" style="height: 500px"></div>

<script>
$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}],
        yAxis: {
            title: {
                text: 'num',
            }
        },
    };
    
    var url =  "http://localhost:4000/a.json";
    $.getJSON(url,  function(data) {
        options.series = data.series;
        options.xAxis = data.xAxis;
        options.title = data.title;
        var chart = new Highcharts.Chart(options);
    });
});
</script>

Written on October 26, 2014

Tagged: