amcharts использование данных json из контроллера

297

15 марта 2017, 16:52

Добрый вечер. Пытаюсь прикрутить график amcharts на страницу. У меня есть java контроллер, который выдает данные в json формате:

[
  {"created":"Mar 13, 2016 8:11:47 PM","budget":200.0},
  {"created":"Mar 13, 2015 8:12:08 PM","budget":123.0},
  {"created":"Mar 1, 2017 2:53:27 PM","updated":"Mar 5, 2017 12:05:03 AM","budget":10.0},
  {"created":"Mar 13, 2015 8:12:26 PM","budget":123333.0}
]

по адресу /dealDataJson.

Использую скрипт amchart для построения графика:

<!-- Chart code --> 
  <script> 
 
    var chart = AmCharts.makeChart("chartdiv", { 
      "type": "serial", 
      "theme": "light", 
      "marginTop":0, 
      "marginRight": 80, 
      "categoryField": "Date", 
      "dataLoader":{ "url": "/dealDataJson", 
            }, 
      "valueAxes": [{ 
        "axisAlpha": 0, 
        "position": "left" 
      }], 
      "graphs": [{ 
        "id":"g1", 
        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>", 
        "bullet": "round", 
        "bulletSize": 8, 
        "lineColor": "#d1655d", 
        "lineThickness": 2, 
        "negativeLineColor": "#637bb6", 
        "type": "smoothedLine", 
        "valueField": "budget" 
      }], 
      "chartScrollbar": { 
        "graph":"g1", 
        "gridAlpha":0, 
        "color":"#888888", 
        "scrollbarHeight":55, 
        "backgroundAlpha":0, 
        "selectedBackgroundAlpha":0.1, 
        "selectedBackgroundColor":"#888888", 
        "graphFillAlpha":0, 
        "autoGridCount":true, 
        "selectedGraphFillAlpha":0, 
        "graphLineAlpha":0.2, 
        "graphLineColor":"#c2c2c2", 
        "selectedGraphLineColor":"#888888", 
        "selectedGraphLineAlpha":1 
 
      }, 
      "chartCursor": { 
        "categoryBalloonDateFormat": "YYYY", 
        "cursorAlpha": 0, 
        "valueLineEnabled":true, 
        "valueLineBalloonEnabled":true, 
        "valueLineAlpha":0.5, 
        "fullWidth":true 
      }, 
      "dataDateFormat": "M d, yyyy kk.mm.ss a", 
      "categoryField": "created", 
      "categoryAxis": { 
        "minPeriod": "MM", 
        "parseDates": true, 
        "minorGridAlpha": 0.1, 
        "minorGridEnabled": true 
      }, 
      "export": { 
        "enabled": true 
      } 
    }); 
 
    chart.addListener("rendered", zoomChart); 
    if(chart.zoomChart){ 
      chart.zoomChart(); 
    } 
 
 
  </script>