Создайте диаграмму, используя Javascript

Question

Я создал код для генерации диаграммы с использованием javascript, и он отлично работает, как вы можете видеть в сжатом коде, который жестко закодирован, проблема заключается в том, как заставить этот код работать с данными ajax, а не с жестко заданными данными?

Код:

window.onload = function() { 
     var chart = new CanvasJS.Chart("chartContainer", 
      { 
       title: { 
        text: "Average monthly rainfull for 30 years" 
       }, 
       animationEnabled: true, 
       axisY: { 
        title: "Precipitation inches", 
        includeZero: false 
       }, 
       axisX: { 
        title: "Months", 
        interval: 1 
       }, 
       toolTip: { 
        shared: true, 
        content: function (e) { 
         var body = new String; 
         var head; 
         for (var i = 0; i < e.entries.length; i++) { 
          var str = "<span style = 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: strong" + e.entries[i].dataPoint.y+ "</strong>''<br/>"; 

          body = body.concat(str); 
         } 
         head = "<span style = color:DodgerBlue;'><strong>" + (e.entries[0].dataPoint.label) + "</strong></span><br/>"; 
         return (head.concat(body)); 
        } 
       }, 
       legend: { 
        horizontalAlign: "center", 
       }, 
       data: [ 
        { 
         type: "spline", 
         showInLegend: true, 
         name: "Boston", 
         dataPoints: [ 

          { label: "Jan", y: 3.1 }, 
          { label: "Feb", y: 3.32 }, 
          { label: "Mar", y: 3.2 }, 
          { label: "Apr", y: 3.4 }, 
          { label: "May", y: 3.5 }, 
          { label: "Jun", y: 3.6 }, 
          { label: "Jul", y: 3.7}, 
          { label: "Aug", y: 3.8 }, 
          { label: "Sep", y: 3.9 }, 
          { label: "Oct", y: 3.10 }, 
          { label: "Nov", y: 3.11}, 
          { label: "Dec", y: 3.12} 


         ] 
        }, 
       { 
       type: "spline", 
       showInLegend: true, 
       name: "Yemen", 
       dataPoints: [ 

        { label: "Jan", y: 4.1 }, 
        { label: "Feb", y: 5.32 }, 
        { label: "Mar", y: 2.2 }, 
        { label: "Apr", y: 4.4 }, 
        { label: "May", y: 1.5 }, 
        { label: "Jun", y: 4.6 }, 
        { label: "Jul", y: 9.7}, 
        { label: "Aug", y: 4.8 }, 
        { label: "Sep", y: 3.9 }, 
        { label: "Oct", y: 2.10 }, 
        { label: "Nov", y: 5.11}, 
        { label: "Dec", y: 3.12} 
       ] 
      } 
       ], 
       legend: { 
        cursor: "pointer", 
        itemClick: function (e) { 
         if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { 
          e.dataSeries.visible = false; 
         } else { 
          e.dataSeries.visible = true; 
         } 
         chart.render(); 
        } 
       } 
      }); 
     chart.render(); 
    } 

Аякса:

$(document).ready(function() { 

     var url_list = "api/usergroup/getdata"; 
     $.getJSON(url_list) 
     .done(function (data) { 

     }); 
    }); 

данных выглядит следующим образом:

[{"id":1,"state_code":"JHR","state_name":"Jor","category_code":"DAM","station_code":"BEKOK-P","station_name" 
:"Bekok Dam Penstock","item_id":1,"desc":"Test Expenses","qty":2,"price":19.00,"total":38.00,"date":"2016-01-05T17 
:26:10","remark":"1. just for test purpose."}] 

Answer 1

http://www.highcharts.com/

Это JavaScript API для создания диаграммы