Графики и чарты на сайте с помощью Google

Если вы работаете с массивами данных и необходимо красиво оформить страницу статистики например по продажам то на помощь нам приходит всемогущий Google с своим API для создания разнообразных чартов.

Можно конечно скопировать скрипт визуализации к себе на сервер, но зачем если можно обращаться к google за ним и экономить свои ресурсы.

Посмотреть возможности можно на сайте https://developers.google.com/chart/interactive/docs/gallery

Пример:

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {'packages':['line', 'imagepiechart', 'barchart','imageBarChart','linechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Tutorials Pesentage');
data.addRows(3);

data.setValue(0, 0, 'Болгария');
data.setValue(0, 1, 9);
data.setValue(1, 0, 'Вьетнам');
data.setValue(1, 1, 148);
data.setValue(2, 0, 'Греция');
data.setValue(2, 1, 388);
  
  var chart = new google.visualization.PieChart(document.getElementById('1'));
  chart.draw(data, {width: 400, height: 400, is3D: true, title: 'pax vs counry'});
  
}
  
  </script>
  <div id="1"></div>

В коде document.getElementById('1') в скобках указываем идентификатор куда будет выводится наш график.

Демо: