Javascript-форум - Как создать несколько графиков Column Charts на одной странице?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как создать несколько графиков Column Charts на одной странице? (https://javascript.ru/forum/misc/63479-kak-sozdat-neskolko-grafikov-column-charts-na-odnojj-stranice.html)

Как создать несколько графиков 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>

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,
может

[HTML run] тут код [/HTML]

pureJS,
вместо

chart1.draw(data, options1);
chart2.draw(data, options2);

вы хотели написать:

chart1.draw(data1, options1);
chart2.draw(data2, options2);

рони,
Благо дарю! Поправил. Наслаждайся! ;-)

EmperioAf,
ах, ну да! Я просто не проверял :-) Копировал на скорую руку. Поскольку всё довольно просто. Благо дарю! Поправил.

Цитата:

Сообщение от pureJS

Наслаждайся! ;-)

а код рабочий?

Цитата:

Сообщение от рони

а код рабочий?

код рабочий конечно. Но только после исправления парочки орфографических ошибок :)

:cray: :lol:

<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>

рони, ох уж эти мне любители лицезреть всё.... Написал ответ правильный, так нет же... Сначала подсовывают "HTML run", а потом ещё и код им рабочий подавай. Хитрый ты, однако! Теперь всё даже ещё и работает! ;-) И ничуть не смешно! :-)