Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2016, 18:36
Интересующийся
Отправить личное сообщение для maks777 Посмотреть профиль Найти все сообщения от maks777
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.06.2016, 21:07
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

https://developers.google.com/chart/...ts-on-one-page
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2016, 21:11
Аватар для pureJS
Аспирант
Отправить личное сообщение для pureJS Посмотреть профиль Найти все сообщения от pureJS
 
Регистрация: 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 в 23:28. Причина: Добавлен HTML run. Добавлено также всё для наслаждения и лицезрения сего примера.
Ответить с цитированием
  #4 (permalink)  
Старый 10.06.2016, 21:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,793

pureJS,
может
[HTML run] тут код [/HTML]
Ответить с цитированием
  #5 (permalink)  
Старый 10.06.2016, 22:06
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

pureJS,
вместо
chart1.draw(data, options1);
chart2.draw(data, options2);

вы хотели написать:
chart1.draw(data1, options1);
chart2.draw(data2, options2);
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2016, 22:14
Аватар для pureJS
Аспирант
Отправить личное сообщение для pureJS Посмотреть профиль Найти все сообщения от pureJS
 
Регистрация: 04.06.2016
Сообщений: 70

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

EmperioAf,
ах, ну да! Я просто не проверял :-) Копировал на скорую руку. Поскольку всё довольно просто. Благо дарю! Поправил.
Ответить с цитированием
  #7 (permalink)  
Старый 10.06.2016, 22:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,793

Сообщение от pureJS
Наслаждайся! ;-)
а код рабочий?
Ответить с цитированием
  #8 (permalink)  
Старый 10.06.2016, 22:38
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от рони
а код рабочий?
код рабочий конечно. Но только после исправления парочки орфографических ошибок
Ответить с цитированием
  #9 (permalink)  
Старый 10.06.2016, 22:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,793


<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 (permalink)  
Старый 10.06.2016, 23:31
Аватар для pureJS
Аспирант
Отправить личное сообщение для pureJS Посмотреть профиль Найти все сообщения от pureJS
 
Регистрация: 04.06.2016
Сообщений: 70

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX несколько элементов на странице... myocean AJAX и COMET 2 12.11.2012 11:27
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 14:24
Копировать значение input с одной странице на другую lamer Элементы интерфейса 0 06.03.2012 03:03
Как сделать 2 галереи JQuery на одной странице? orendzi jQuery 8 16.07.2011 15:22
Несколько созданных элементов располагаются в одной строке. Как этого избежать? Hold Events/DOM/Window 1 21.01.2011 23:52