09.06.2016, 17:36
|
|
Интересующийся
|
|
Регистрация: 09.06.2016
Сообщений: 29
|
|
|
Как создать несколько графиков Column Charts на одной странице?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Predmet', 'Zaregestrirovalos', 'Zagruzheno v bazu ', 'Provereno blankov A', 'Provereno blankov B']],
['Franch', 2191, 1484, 1484, 709],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnc hart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 700px; height: 300px;">
</div>
</body>
</html> |
|
10.06.2016, 20:07
|
 |
Профессор
|
|
Регистрация: 15.01.2015
Сообщений: 622
|
|
|
|
|
10.06.2016, 20:11
|
 |
Аспирант
|
|
Регистрация: 04.06.2016
Сообщений: 70
|
|
maks777, всё довольно просто:
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data1 = new google.visualization.arrayToDataTable(
[
['Предмет', 'Зарегестрировалось', 'Загружено в базу', 'Проверено бланков А', 'Проверено бланков Б'],
['Franch', 2191, 1484, 1484, 709]
]);
var options1 =
{
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
bars: 'horizontal'
};
var chart1 = new google.charts.Bar(document.getElementById('columnchart_material_1'));
chart1.draw(data1, options1);
/////////////////////
var data2 = new google.visualization.arrayToDataTable(
[
['Предмет', 'Зарегестрировалось', 'Загружено в базу', 'Проверено бланков А', 'Проверено бланков Б'],
['Franch', 3391, 4484, 5584, 109]
]);
var options2 =
{
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2010-2014'
},
bars: 'horizontal'
};
var chart2 = new google.charts.Bar(document.getElementById('columnchart_material_2'));
chart2.draw(data2, options2);
}
</script>
</head><body>
<div id="columnchart_material_1" style="width: 700px; height: 300px;"></div>
<br><hr><br>
<div id="columnchart_material_2" style="width: 700px; height: 300px;"></div>
</body></html>
Обрати также внимание на то, что я убрал некоторые левые запятые и квадратные скобки.
Последний раз редактировалось pureJS, 10.06.2016 в 22:28.
Причина: Добавлен HTML run. Добавлено также всё для наслаждения и лицезрения сего примера.
|
|
10.06.2016, 20:44
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
pureJS,
может
[HTML run] тут код [/HTML]
|
|
10.06.2016, 21:06
|
|
Профессор
|
|
Регистрация: 15.01.2015
Сообщений: 622
|
|
pureJS,
вместо
chart1.draw(data, options1);
chart2.draw(data, options2);
вы хотели написать:
chart1.draw(data1, options1);
chart2.draw(data2, options2);
|
|
10.06.2016, 21:14
|
|
Аспирант
|
|
Регистрация: 04.06.2016
Сообщений: 70
|
|
|
рони,
Благо дарю! Поправил. Наслаждайся! ;-)
EmperioAf,
ах, ну да! Я просто не проверял :-) Копировал на скорую руку. Поскольку всё довольно просто. Благо дарю! Поправил.
|
|
10.06.2016, 21:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
|
Сообщение от pureJS
|
|
Наслаждайся! ;-)
|
а код рабочий? |
|
10.06.2016, 21:38
|
|
Профессор
|
|
Регистрация: 15.01.2015
Сообщений: 622
|
|
|
Сообщение от рони
|
|
а код рабочий?
|
код рабочий конечно. Но только после исправления парочки орфографических ошибок  |
|
10.06.2016, 21:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,134
|
|
 
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data1 = google.visualization.arrayToDataTable(
[
['Предмет', 'Зарегестрировалось', 'Загружено в базу', 'Проверено бланков А', 'Проверено бланков Б'],
['Franch', 2191, 1484, 1484, 709]
]);
var options1 =
{
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
}
};
var chart1 = new google.charts.Bar(document.getElementById('columnchart_material_1'));
chart1.draw(data1, options1);
/////////////////////
var data2 = google.visualization.arrayToDataTable(
[
['Предмет', 'Зарегестрировалось', 'Загружено в базу', 'Проверено бланков А', 'Проверено бланков Б'],
['Franch', 3391, 4484, 5584, 109]
]);
var options2 =
{
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2010-2014'
}
};
var chart2 = new google.charts.Bar(document.getElementById('columnchart_material_2'));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<div id="columnchart_material_1" style="width: 700px; height: 300px;"></div>
<div id="columnchart_material_2" style="width: 700px; height: 300px;"></div>
</body>
</html>
|
|
10.06.2016, 22:31
|
|
Аспирант
|
|
Регистрация: 04.06.2016
Сообщений: 70
|
|
|
рони, ох уж эти мне любители лицезреть всё.... Написал ответ правильный, так нет же... Сначала подсовывают "HTML run", а потом ещё и код им рабочий подавай. Хитрый ты, однако! Теперь всё даже ещё и работает! ;-) И ничуть не смешно! :-)
|
|
|
|
