Google Chart api - Диаграммы и графики в <img> и <div> с помощью атрибута src.

Диаграммы и графики в img с помощью get запроса в src.

Например:

https://chart.googleapis.com/chart?cht=p&chd=t:80,50,30&&chl=80|50|30&
chdl=Archive|vikingS|.com&chld=Archive|vikingS|.com&chs=500x200

cht = Тип графика (v)

chd = Данные графика (t:80,50)

chl = 80|50 наименование делений

chld = Название на графике (Archive | vikingS)

chdl = Название данных в сноске (Archive | vikingS)

chs = Размер графика (250x100)

chco = цвет

chds = Текстовый формат с автоматическим масштабированием. График будет масштабирован таким образом, что наибольшее значение в верхней части графика, а наименьший будет в нижней части. (a)

• Если значение выше 100 оно сокращается до 100
• Подчеркивание считается как нулевое значение
• Путь начинается с "https://chart.googleapis.com/chart?" после чего идут параметры которые разделяются знаком &

Типы графиков (cht)

v

Для того чтобы скрыть оси нужно добавить :nda

p

p3

pc

gom

lc

ls

lxy

chd=t:<Линия1 значение по x>|<Линия1 значение по y>|
<Линия2 значение по x>|<Линия2 значение по y>

map

chld - обозначение страны (RU)

r
rs

s

Графики с помощью Java Script в блоке div.

 
 <script type='text/javascript' src='https://www.google.com/jsapi'></script>
 <script type='text/javascript'>
 google.load('visualization', '1', {packages:['gauge']});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data = google.visualization.arrayToDataTable([
 ['Label', 'Value'],
 ['Memory', 80],
 ['CPU', 55],
 ['Network', 68]
 ]);

 var options = {
 width: 400, height: 120,
 redFrom: 90, redTo: 100,
 yellowFrom:75, yellowTo: 90,
 minorTicks: 5
 };

 var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
 chart.draw(data, options);
 }
 </script>
 <p>
 <div id='chart_div'></div>
 </p>