Перейти до вмісту

Допоможіть з веб-сторінкою


Повідомлень в темі: 21

#21 І Цвях

    опозиція

  • Користувачі
  • PipPipPipPipPipPipPipPipPipPip
  • 1876 повідомлень
  • Стать:Чоловік
  • Місто:Мати міст руських

Відправлено 19.04.2011 – 18:26

Зображення

Не можу розібратися в джавыскріпт-коді. Приклад працює чудово, але мені потрібно замість шести графіків - один. Прибираю рядки
label: "Данные 2" ...
label: "Данные 5"

у var all_data = [...] і весь скрипт перестає працювати.

Взагалі моя ціль - побудувати графік по семи даним, які приймуться із форм. Може хто підкаже як?

В прикладі використовується jQuery та скрипт Float. архів з робочим html-прикладом

» Натисніть, щоб показати спойлер - натисніть ще раз, щоб приховати... «
[HIDE]
  
   <head></head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	  <title>result</title>
	  
	  <script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
	  <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
	  <script language="javascript" type="text/javascript" src="flot/jquery.flot.stack.js"></script>
	  <script language="javascript" type="text/javascript" src="flot/jquery.flot.selection.js"></script>
   
  
	  <p><noscript><strong style="color: red;">Для отображения данных необходимо включить JavaScript!</strong></noscript></p>
	  <div id="placeholder" style="width:600px;height:300px;float:left;"></div>
	  <div style="float:left;">
		<div id="legend"></div></div>
  
  
		<p style="text-align: center;"><a href="#" onclick="switch_show(); return false;">Сменить вид</a></p>
  
  
	  
  
  
	  <div style="clear: both;"></div>
  
  
	  <div id="overview" style="margin-top:20px;width:600px;height:50px"></div>
  
  
  
  
  
  <script language="javascript" type="text/javascript"><br/>
  
  // выделенная область<br/>
  
  var selection = ["2008/12/01", "2010/12/01"];<br/>
  
  // все данные<br/>
  
  // цвета задавать обязательно, иначе они будут все время меняться при удалении/добавлении рядов<br/>
  
  var all_data = [<br/>
  
	{ label: "Данные 1", color: 0, data: [["2006/01/01", 39], ["2006/02/01", 35], ["2006/03/01", 27], ["2006/04/01", 17], ["2006/05/01", 8], ["2006/06/01", 2], ["2006/07/01", 0], ["2006/08/01", 2], ["2006/09/01", 9], ["2006/10/01", 19], ["2006/11/01", 28], ["2006/12/01", 36], ["2007/01/01", 39], ["2007/02/01", 38], ["2007/03/01", 32], ["2007/04/01", 23], ["2007/05/01", 13], ["2007/06/01", 5], ["2007/07/01", 0], ["2007/08/01", 0], ["2007/09/01", 5], ["2007/10/01", 13], ["2007/11/01", 23], ["2007/12/01", 32], ["2008/01/01", 38], ["2008/02/01", 39], ["2008/03/01", 36], ["2008/04/01", 28], ["2008/05/01", 19], ["2008/06/01", 9], ["2008/07/01", 2], ["2008/08/01", 0], ["2008/09/01", 2], ["2008/10/01", 8], ["2008/11/01", 17], ["2008/12/01", 27], ["2009/01/01", 35], ["2009/02/01", 39], ["2009/03/01", 38], ["2009/04/01", 33], ["2009/05/01", 24], ["2009/06/01", 14], ["2009/07/01", 6], ["2009/08/01", 1], ["2009/09/01", 0], ["2009/10/01", 4], ["2009/11/01", 12], ["2009/12/01", 22], ["2010/01/01", 31], ["2010/02/01", 37], ["2010/03/01", 39], ["2010/04/01", 37], ["2010/05/01", 30], ["2010/06/01", 20], ["2010/07/01", 10], ["2010/08/01", 3], ["2010/09/01", 0], ["2010/10/01", 1], ["2010/11/01", 7], ["2010/12/01", 16]]},<br/>
  
	{ label: "Данные 2", color: 1, data: [["2006/01/01", 16], ["2006/02/01", 7], ["2006/03/01", 1], ["2006/04/01", 0], ["2006/05/01", 3], ["2006/06/01", 11], ["2006/07/01", 20], ["2006/08/01", 30], ["2006/09/01", 37], ["2006/10/01", 39], ["2006/11/01", 37], ["2006/12/01", 31], ["2007/01/01", 22], ["2007/02/01", 12], ["2007/03/01", 4], ["2007/04/01", 0], ["2007/05/01", 1], ["2007/06/01", 6], ["2007/07/01", 15], ["2007/08/01", 25], ["2007/09/01", 33], ["2007/10/01", 39], ["2007/11/01", 39], ["2007/12/01", 35], ["2008/01/01", 27], ["2008/02/01", 17], ["2008/03/01", 8], ["2008/04/01", 2], ["2008/05/01", 0], ["2008/06/01", 2], ["2008/07/01", 9], ["2008/08/01", 19], ["2008/09/01", 29], ["2008/10/01", 36], ["2008/11/01", 39], ["2008/12/01", 38], ["2009/01/01", 32], ["2009/02/01", 23], ["2009/03/01", 13], ["2009/04/01", 5], ["2009/05/01", 0], ["2009/06/01", 0], ["2009/07/01", 5], ["2009/08/01", 13], ["2009/09/01", 23], ["2009/10/01", 32], ["2009/11/01", 38], ["2009/12/01", 39], ["2010/01/01", 36], ["2010/02/01", 28], ["2010/03/01", 19], ["2010/04/01", 9], ["2010/05/01", 2], ["2010/06/01", 0], ["2010/07/01", 2], ["2010/08/01", 8], ["2010/09/01", 18], ["2010/10/01", 27], ["2010/11/01", 35], ["2010/12/01", 39]]},<br/>
  
	{ label: "Данные 3", color: 2, data: [["2006/01/01", 3], ["2006/02/01", 0], ["2006/03/01", 1], ["2006/04/01", 7], ["2006/05/01", 16], ["2006/06/01", 26], ["2006/07/01", 34], ["2006/08/01", 39], ["2006/09/01", 39], ["2006/10/01", 34], ["2006/11/01", 25], ["2006/12/01", 16], ["2007/01/01", 7], ["2007/02/01", 1], ["2007/03/01", 0], ["2007/04/01", 3], ["2007/05/01", 11], ["2007/06/01", 21], ["2007/07/01", 30], ["2007/08/01", 37], ["2007/09/01", 39], ["2007/10/01", 37], ["2007/11/01", 31], ["2007/12/01", 21], ["2008/01/01", 11], ["2008/02/01", 4], ["2008/03/01", 0], ["2008/04/01", 1], ["2008/05/01", 6], ["2008/06/01", 15], ["2008/07/01", 25], ["2008/08/01", 33], ["2008/09/01", 39], ["2008/10/01", 39], ["2008/11/01", 35], ["2008/12/01", 27], ["2009/01/01", 17], ["2009/02/01", 8], ["2009/03/01", 1], ["2009/04/01", 0], ["2009/05/01", 3], ["2009/06/01", 10], ["2009/07/01", 19], ["2009/08/01", 29], ["2009/09/01", 36], ["2009/10/01", 39], ["2009/11/01", 38], ["2009/12/01", 32], ["2010/01/01", 22], ["2010/02/01", 13], ["2010/03/01", 4], ["2010/04/01", 0], ["2010/05/01", 0], ["2010/06/01", 5], ["2010/07/01", 14], ["2010/08/01", 24], ["2010/09/01", 33], ["2010/10/01", 38], ["2010/11/01", 39], ["2010/12/01", 36]]},<br/>
  
	{ label: "Данные 4", color: 3, data: [["2006/01/01", 38], ["2006/02/01", 39], ["2006/03/01", 35], ["2006/04/01", 27], ["2006/05/01", 18], ["2006/06/01", 8], ["2006/07/01", 2], ["2006/08/01", 0], ["2006/09/01", 2], ["2006/10/01", 9], ["2006/11/01", 19], ["2006/12/01", 28], ["2007/01/01", 36], ["2007/02/01", 39], ["2007/03/01", 38], ["2007/04/01", 32], ["2007/05/01", 23], ["2007/06/01", 13], ["2007/07/01", 5], ["2007/08/01", 0], ["2007/09/01", 0], ["2007/10/01", 5], ["2007/11/01", 13], ["2007/12/01", 23], ["2008/01/01", 32], ["2008/02/01", 38], ["2008/03/01", 39], ["2008/04/01", 36], ["2008/05/01", 29], ["2008/06/01", 19], ["2008/07/01", 9], ["2008/08/01", 2], ["2008/09/01", 0], ["2008/10/01", 2], ["2008/11/01", 8], ["2008/12/01", 17], ["2009/01/01", 27], ["2009/02/01", 35], ["2009/03/01", 39], ["2009/04/01", 38], ["2009/05/01", 33], ["2009/06/01", 24], ["2009/07/01", 15], ["2009/08/01", 6], ["2009/09/01", 1], ["2009/10/01", 0], ["2009/11/01", 4], ["2009/12/01", 12], ["2010/01/01", 22], ["2010/02/01", 31], ["2010/03/01", 37], ["2010/04/01", 39], ["2010/05/01", 37], ["2010/06/01", 30], ["2010/07/01", 20], ["2010/08/01", 11], ["2010/09/01", 3], ["2010/10/01", 0], ["2010/11/01", 1], ["2010/12/01", 7]]},<br/>
  
	{ label: "Данные 5", color: 4, data: [["2006/01/01", 30], ["2006/02/01", 21], ["2006/03/01", 11], ["2006/04/01", 3], ["2006/05/01", 0], ["2006/06/01", 1], ["2006/07/01", 6], ["2006/08/01", 15], ["2006/09/01", 25], ["2006/10/01", 34], ["2006/11/01", 39], ["2006/12/01", 39], ["2007/01/01", 35], ["2007/02/01", 26], ["2007/03/01", 17], ["2007/04/01", 7], ["2007/05/01", 1], ["2007/06/01", 0], ["2007/07/01", 3], ["2007/08/01", 10], ["2007/09/01", 20], ["2007/10/01", 29], ["2007/11/01", 36], ["2007/12/01", 39], ["2008/01/01", 38], ["2008/02/01", 31], ["2008/03/01", 22], ["2008/04/01", 12], ["2008/05/01", 4], ["2008/06/01", 0], ["2008/07/01", 0], ["2008/08/01", 5], ["2008/09/01", 14], ["2008/10/01", 24], ["2008/11/01", 33], ["2008/12/01", 38], ["2009/01/01", 39], ["2009/02/01", 35], ["2009/03/01", 28], ["2009/04/01", 18], ["2009/05/01", 9], ["2009/06/01", 2], ["2009/07/01", 0], ["2009/08/01", 2], ["2009/09/01", 9], ["2009/10/01", 18], ["2009/11/01", 28], ["2009/12/01", 36], ["2010/01/01", 39], ["2010/02/01", 38], ["2010/03/01", 32], ["2010/04/01", 24], ["2010/05/01", 14], ["2010/06/01", 5], ["2010/07/01", 0], ["2010/08/01", 0], ["2010/09/01", 5], ["2010/10/01", 13], ["2010/11/01", 23], ["2010/12/01", 32]]} // IE не понимает запятых на конце :(<br/>
  
  ];<br/>
  
  <br/>
  
  // какие данные скрываем - заполняем позже<br/>
  
  var hide = [];<br/>
  
  // преобразуем даты в формат, понятный Flot'у<br/>
  
  for(var j = 0; j < all_data.length; ++j) {<br/>
  
	hide.push(false); // не скрываем j-ый ряд. пока что.<br/>
  
	for(var i = 0; i < all_data[j].data.length; ++i)<br/>
  
	  all_data[j].data[i][0] = Date.parse(all_data[j].data[i][0]);<br/>
  
  }<br/>
  
  for(var i = 0; i < selection.length; ++i)<br/>
  
	selection[i] = Date.parse(selection[i]);<br/>
  
  <br/>
  
  var overview; // "обзор" всех данных внизу страницы<br/>
  
  var plot; // график крупным планом<br/>
  
  var show_bars = false; // показывать столбики или линии<br/>
  
  var plot_conf = {<br/>
  
	series: {<br/>
  
	  stack: null,<br/>
  
	  lines: { <br/>
  
		show: true,<br/>
  
		lineWidth: 2 <br/>
  
	  }<br/>
  
	},<br/>
  
	xaxis: {<br/>
  
	  mode: "time",<br/>
  
	  timeformat: "%y/%m/%d",<br/>
  
	  min: selection[0],<br/>
  
	  max: selection[1]<br/>
  
	},<br/>
  
	legend: {<br/>
  
	  container: $("#legend")<br/>
  
	}<br/>
  
  };<br/>
  
  <br/>
  
  var overview_conf = {<br/>
  
	series: {<br/>
  
	  lines: { <br/>
  
		show: true,<br/>
  
		lineWidth: 1<br/>
  
	  },<br/>
  
	  shadowSize: 0<br/>
  
	},<br/>
  
	xaxis: {<br/>
  
	  ticks: []<br/>
  
	},<br/>
  
	yaxis: {<br/>
  
	  ticks: []<br/>
  
	},<br/>
  
	selection: {<br/>
  
	  mode: "x"<br/>
  
	}, <br/>
  
	legend: {<br/>
  
	  show: false<br/>
  
	}<br/>
  
  };<br/>
  
   <br/>
  
  // меняем вид - столбики или линии<br/>
  
  function switch_show() {<br/>
  
	show_bars = !show_bars; // изменяем тип диаграм<br/>
  
  <br/>
  
	var new_conf = {<br/>
  
	  series: {<br/>
  
		stack: show_bars ? true : null,<br/>
  
		lines: { show: !show_bars },<br/>
  
		bars: { show: show_bars }<br/>
  
	  }<br/>
  
	};<br/>
  
  <br/>
  
	// обновляем конфиг<br/>
  
	$.extend(true, plot_conf, new_conf);<br/>
  
	$.extend(true, overview_conf, new_conf);<br/>
  
  <br/>
  
	// перерисовываем<br/>
  
	redraw();<br/>
  
  }<br/>
  
  <br/>
  
  // перерисовываем все и вся :)<br/>
  
  function redraw() {<br/>
  
	var data = [];<br/>
  
	for(var j = 0; j < all_data.length; ++j)<br/>
  
	  if(!hide[j])<br/>
  
		data.push(all_data[j]);<br/>
  
  <br/>
  
	plot = $.plot($("#placeholder"), data, plot_conf);<br/>
  
	overview = $.plot($("#overview"), data, overview_conf);<br/>
  
  <br/>
  
	// легенду рисуем только один раз<br/>
  
	plot_conf.legend.show = false;<br/>
  
  <br/>
  
	// последний аргумент - чтобы избежать рекурсии<br/>
  
	overview.setSelection({ x1: selection[0], x2: selection[1] }, true);<br/>
  
  }<br/>
  
  <br/>
  
  // вычисляем ширину колонки в соответствии с новой областью выделения<br/>
  
  function calc_bar_width() {<br/>
  
	// поскольку по оси OX откладывается время,<br/>
  
	// ширина столбцов в гистограмме вычисляется в 1/1000-ых секунды<br/>
  
	// при масштабировании эту величину следует пересчитать<br/>
  
	var r = plot_conf.xaxis;<br/>
  
	// вычисляем, сколько столбцов попало в интервал<br/>
  
	var bars_count = 0;<br/>
  
	for(var i = 0; i < all_data[0].data.length; ++i)<br/>
  
	  if(all_data[0].data[i][0] >= r.min &&<br/>
  
		 all_data[0].data[i][0] <= r.max)<br/>
  
		 bars_count++;<br/>
  
  <br/>
  
	// изменяем ширину столбцов<br/>
  
	var new_conf = {<br/>
  
	  series: {<br/>
  
		bars: { // умножаем на два, чтобы оставалось место между столбцами<br/>
  
		  barWidth: (r.max - r.min)/((bars_count + 1 /* на ноль не делим */) * 2) <br/>
  
		}<br/>
  
	  }<br/>
  
	};<br/>
  
	$.extend(true, plot_conf, new_conf);<br/>
  
  }<br/>
  
  <br/>
  
  // вычисляем ширину столбцов в гистограмме<br/>
  
  calc_bar_width();<br/>
  
  // рисуем графики в первый раз<br/>
  
  redraw();<br/>
  
  <br/>
  
  // событие - новое выделение на overview	<br/>
  
  $("#overview").bind("plotselected", function (event, ranges) {<br/>
  
	var r = ranges.xaxis;<br/>
  
	// сохраняем координаты выделенной области<br/>
  
	selection = [r.from, r.to];<br/>
  
  <br/>
  
	// перемещаем обзор в новую область<br/>
  
	var new_conf = {<br/>
  
	  xaxis: {<br/>
  
		min: r.from,<br/>
  
		max: r.to<br/>
  
	  }<br/>
  
	};<br/>
  
	$.extend(true, plot_conf, new_conf);<br/>
  
   <br/>
  
	calc_bar_width();<br/>
  
	redraw();<br/>
  
  });<br/>
  
  <br/>
  
  // рисуем чекбоксы в легенде<br/>
  
  var legend = document.getElementById('legend'); // еще IE не умеет заменять innerHTML в table<br/>
  
  var legend_tbl = legend.getElementsByTagName('table')[0];<br/>
  
  var legend_html = '<table style="font-size: smaller; color: rgb(84, 84, 84);"><tbody>';<br/>
  
  for(var i = 0; i < legend_tbl.rows.length; i++) {<br/>
  
	legend_html += '<tr>' +<br/>
  
	  '<td><input type="checkbox" onclick="hide['+ i +']=!hide['+ i +'];redraw();" checked="1"></td>'<br/>
  
	  + legend_tbl.rows[i].innerHTML<br/>
  
	  + '</tr>';<br/>
  
  }<br/>
  
  legend_html += "</tbody></table>";<br/>
  
  legend.innerHTML = legend_html;<br/>
  
  </script>

Повідомлення відредагував І Цвях: 19.04.2011 – 18:29

  • 0

#22 І Цвях

    опозиція

  • Користувачі
  • PipPipPipPipPipPipPipPipPipPip
  • 1876 повідомлень
  • Стать:Чоловік
  • Місто:Мати міст руських

Відправлено 19.04.2011 – 19:30

Забули верхній пост, читаємо нижній. Варіант 2.
http://code.google.com/intl/ru/apis/chart/...t_requests.html
Як вставити замість value='t:40,20,50,20,100' дані від клієнта?
Мені потрібно не статичні цифри, а дані, які відправить клієнт.

<form action='https://chart.googleapis.com/chart' method='POST'>
<input type="hidden" name="cht" value="lc" />
<input type="hidden" name="chtt" value="This is | my chart" />
<input type='hidden' name='chs' value='300x200' />
<input type="hidden" name="chxt" value="x" />
<input type='hidden' name='chd' value='t:моє_значення_1,20,50,20,100'/>
<input type="submit" />
</form>

<script>моє_значення_1=document.getElementByTagName("ім*я_форми_1").value;</script>

Але ця хулєра не паше.
  • 0



Кількість користувачів, що читають цю тему: 1

0 користувачів, 1 гостей, 0 анонімних