jquery.google.charts.js

// Google Chartsを簡単にjQueryで扱える様に(Ajaxでjsonを返すだけでグラフをかける様に)
// 必須: https://www.gstatic.com/charts/loader.js
// オプション詳細: https://developers.google.com/chart/interactive/docs/
// 例: 棒グラフ
// var json = {
//   "chart_type": "ColumnChart",
//   "packages": ["corechart"],
//   "data_list": [
//     ['Year', 'Sales', 'Expenses', 'Profit'],
//     ['2014', 1000, 400, 200],
//     ['2015', 1170, 460, 250],
//     ['2016', 660, 1120, 300],
//     ['2017', 1030, 540, 350]
//   ],
//   "options": {
//     "chart": {
//       "title": 'Company Performance',
//       "subtitle": 'Sales, Expenses, and Profit: 2014-2017',
//     }
//   }
// };
// $("#bat_chart").drawGoogleChart(json);

(function($){
  $.fn.drawGoogleChart = function(json){
    var $this = $(this);
    // FIXME: 既にloadされている場合はloadしないように
    try {
      google.charts.load('current', {'packages':json.packages, 'language': 'ja'});
    }
    catch(e){
      console.warn(e);
    }
    google.charts.setOnLoadCallback(callbackFunction);
    function callbackFunction() {
      if(json.chart_type == "Bar"){
        // TODO: Barは必要? BarChartならばvisualizationに存在
        var chart = new google.charts.Bar($($this["selector"])[0]);
      }
      else{
        var chart = new google.visualization[json.chart_type]($($this["selector"])[0]);
      }
      chart.draw(google.visualization.arrayToDataTable(json.data_list), json.options);
    }
  }
})(jQuery);