Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.05.2012, 19:52
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

Столбцовый график из таблицы
Доброго всем времени суток.
Задача такая: с помощью HTML/CSS + JavaScript(jQuery) нужно сделать график в виде столбиков. График должен генерироваться с помощью JavaScript на основе данных таблицы. Следует выделить минимальное и максимальное значение на графике.
Т.е. есть таблица в которой две строки данных: в одной строке 0,1,2,3...10. В другой: 3.2, 5.8,9.6,7.7, 6.2, 2.1... JavaScript или jquery должен выбрать из таблицы данные и построить столбцы в высоту со значениями из таблицы. (0,1,2,3...10) по Х и (3.2, 5.8,9.6,7.7, 6.2, 2.1) по Y
Надеюсь разъяснил более-менее понятно.
Заранее спасибо за помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2012, 19:56
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.
Ответить с цитированием
  #3 (permalink)  
Старый 11.05.2012, 20:00
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

Раед,
Ну извините, я и так сам пытаюсь, просто пока никаких мыслей голову не идет. Я не прошу готового решения, хоть варианты за что зацепиться.
Ответить с цитированием
  #4 (permalink)  
Старый 11.05.2012, 20:24
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

$(document).ready(function(){   
	 line1 = [5,7, 9, 17];
	 line2 = [25, 12, 6, 10];
	 line3 = [2, 7, 15, 29];
	 plot2 = $.jqplot('chart', [line1, line2, line3], {
	     legend:{show:true, location:'ne', xoffset:55},
	     title:'Диаграмма со столбцами',
	     seriesDefaults:{
	         renderer:$.jqplot.BarRenderer, 
	         rendererOptions:{barPadding: 8, barMargin: 20}
	     },
	     series:[
	         {label:'Жирафы'}, 
	         {label:'Слоны'}, 
	         {label:'Зебры'}
	     ],
	     axes:{
	         xaxis:{
	             renderer:$.jqplot.CategoryAxisRenderer, 
	             ticks:['Янв', 'Фев', 'Март', 'Апр']
	         }, 
	         yaxis:{min:0}
	     }
	 });
 });


результат: http://grigorieff.ru/demo/jqplot/demo4.php
мне бы что-то в этом духе, только из таблицы
Ответить с цитированием
  #5 (permalink)  
Старый 11.05.2012, 21:56
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

Все вроде хорошо получается, только если числа загнаны не в таблицу а в массив.
var line1 = [[1, 4.5], [2, 3.1], [3, 6], [4, 2.2], [5, 5.8], [6, 7.7], [7, 11.8], [8, 9.6], [9, 4.1], [10, 7.7],[11, 5.6], [12, 9.6]];

Может кто знает как перебрать ячейки таблицы и сформировать из них такой массив?
Ответить с цитированием
  #6 (permalink)  
Старый 11.05.2012, 22:12
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
window.onload = function(){
 var t1=document.getElementById('gt').rows[0].cells;
 var t2=document.getElementById('gt').rows[1].cells;
 var arr = [];
 for (var i=0;i<10;i++) {
  arr.push([t1[i].innerHTML,t2[i].innerHTML]);
 }
alert(arr.join('; '));
}
</script>
</head><body>
<table id="gt" border="3">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr>
<td>4.5</td><td>3.1</td><td>6</td><td>2.2</td><td>5.8</td><td>7.7</td><td>11.8</td><td>9.6</td><td>4.1</td><td>5.6</td>
</tr>
</TABLE>
</body></html>
Ответить с цитированием
  #7 (permalink)  
Старый 11.05.2012, 22:37
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

Раед,
Огромное спасибо за труда. Массив выводится конечно, но увы такой формат вывода не подходит. Нужно именно [value1, value2], [value3, value4]...
Но все-равно, спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 11.05.2012, 22:47
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

wizard2014,
Так внутри он и хранится в нужном формате (
Сообщение от wizard2014
var line1 = [[1, 4.5], [2, 3.1], [3, 6], [4, 2.2], [5, 5.8], [6, 7.7], [7, 11.8], [8, 9.6], [9, 4.1], [10, 7.7],[11, 5.6], [12, 9.6]];
), вывод это я для демонстрации так сделал.
Соедините свой скрипт с моим и всё получится.
Желаю удачи
Ответить с цитированием
  #9 (permalink)  
Старый 11.05.2012, 23:26
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

Раед,
Фух, что-то не выходит!
Получилось два отдельных скрипта, не могу понять как их соединить!

<script type="text/javascript">
window.onload = function(){
 var t1=document.getElementById('gt').rows[0].cells;
 var t2=document.getElementById('gt').rows[1].cells;
 var arr = [];
 
 for (var i=0;i<=11;i++) {
  arr.push([t1[i].innerHTML,t2[i].innerHTML]);
 }
  
 var line1 = arr.join('; ');
  
}

</script>


и

$(document).ready(function(){    
 
    var plot1 = $.jqplot('chart', [line1], {
    title: 'Столбцовый график',
    series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: 0,             //Наклон символов (значение 0 - под 90 градусов)
          fontSize: '14px'      //Размер шрифта
        }
    },
    axes: {
      xaxis: {        
        renderer: $.jqplot.CategoryAxisRenderer
      }
    }
  });
    
});


Но как передать в jQuery эту самую line1 переменную из выше следующего скрипта?
Уже, вот-вот, почти, но никак.
Ответить с цитированием
  #10 (permalink)  
Старый 11.05.2012, 23:55
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от wizard2014
var line1 = arr.join('; ');
Это лишнее

Так?:
$(document).ready(function(){   
 var t1=document.getElementById('gt').rows[0].cells;
 var t2=document.getElementById('gt').rows[1].cells;
 var arr = [];
  
 for (var i=0;i<=11;i++) {
  arr.push([t1[i].innerHTML,t2[i].innerHTML]);
 }
   
 var line1 = arr;
  
    var plot1 = $.jqplot('chart', [line1], {
    title: 'Столбцовый график',
    series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: 0,             //Наклон символов (значение 0 - под 90 градусов)
          fontSize: '14px'      //Размер шрифта
        }
    },
    axes: {
      xaxis: {       
        renderer: $.jqplot.CategoryAxisRenderer
      }
    }
  });
     
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 14:30
Подсветка столбцов таблицы ctocopok Элементы интерфейса 31 14.06.2011 01:42
Ширина таблицы Syltan (X)HTML/CSS 1 01.05.2010 22:33
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35