Графики с помощью jQuery
Accessible Charts – очень интересный плагин для jQuery преобразующий HTML-таблицу в график. А раз плагин интересный – прикурутим его к CRM 🙂 Реализация вообщем проста и очень похожа на другие проекты jQuery, которые были тут рассмотрены. Итак приступим:
- Поместите содержимое архива chart.zip в папку ISV сайта CRM. Основной файл index.htm содержит такой код:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Charting</title> <link href="css/basic.css" type="text/css" rel="stylesheet" /> <link href="css/visualize.css" type="text/css" rel="stylesheet" /> <link href="css/visualize-dark.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="_shared/EnhanceJS/enhance.js"></script> <script type="text/javascript" src="_shared/jquery.min.js"></script> <script type="text/javascript" src="js/excanvas.js"></script> <script type="text/javascript" src="js/visualize.jQuery.js"></script> <style type="text/css"> BODY { padding: 0px; margin: 0px; } </style> </head> <body> <table id="chart" style="display:none"> <!-- Задаем заголовок графика и заголовки оси X --> <caption>Продажи за 2009 год</caption> <thead> <tr> <td></td> <th scope="col">food</th> <th scope="col">auto</th> <th scope="col">household</th> <th scope="col">furniture</th> <th scope="col">kitchen</th> <th scope="col">bath</th> </tr> </thead> <tbody> </tbody> </table> <script type="text/javascript"> // Функция динамически добавляющая строки в таблицу tBody = document.getElementById("chart").getElementsByTagName('tbody')[0]; function addNewRow(td1, td2, td3, td4, td5, td6, td7) { var newTH1 = document.createElement('th'); newTH1.innerHTML = td1; newTH1.scope = "row"; var newTD2 = document.createElement('td'); newTD2.innerHTML = td2; var newTD3 = document.createElement('td'); newTD3.innerHTML = td3; var newTD4 = document.createElement('td'); newTD4.innerHTML = td4; var newTD5 = document.createElement('td'); newTD5.innerHTML = td5; var newTD6 = document.createElement('td'); newTD6.innerHTML = td6; var newTD7 = document.createElement('td'); newTD7.innerHTML = td7; var newTR = document.createElement('tr'); newTR.appendChild(newTH1); newTR.appendChild(newTD2); newTR.appendChild(newTD3); newTR.appendChild(newTD4); newTR.appendChild(newTD5); newTR.appendChild(newTD6); newTR.appendChild(newTD7); tBody.appendChild(newTR); }; // Вытаскиваем с формы CRM значение поля new_chart, парсим его и формируем из его данных строки и ячейки таблицы var arr = window.parent.document.crmForm.all.new_chart.DataValue.split(/\n/g); for (var i=0 ; i < arr.length ; i++) { line = arr[i].split(';'); addNewRow(line[0],line[1],line[2],line[3],line[4],line[5],line[6]); } // Строим диаграмму $(function(){ $('table').visualize({ type: 'line', width: (document.documentElement.clientWidth - 82), height: (document.documentElement.clientHeight - 162) }); }); // Обновляем страницу при изменении размеров окноа (нужно для того, чтобы диаграмма полностью заполняла доступное пространство) window.onresize = function() { window.location.reload(); } </script> </body> </html>
Описание:
- В начале подключаются базовые файлы плагина;
- Далее определяется макет HTML-таблицы, содержащией общий заголовок и заголовки столбцов (которые эквиваленты заголовкам оси X на диаграмме);
- JS-код состоит из трех блоков:
- Вытаскивания с формы CRM данных поля new_chart (которые хранятся в формате CSV), разбор их и создании на основе их строк таблицы;
- Затем мы преобразуем таблицу в график (линейный);
- Ну, и напоследок определяем функцию, которая будет перезагружать страницу при изменении размеров окна (это нужно для того, чтобы диаграмма всегда занимала всю область).
- Создайте в объекте, который Вам нужен, новое поле с типом ntext, именем new_chart и максимальным количеством символов 4000;
- Разместите это поле на форме, а также добавьте на форму iFrame с такими параметрами:
- Имя: chart;
- URL: /isv/chart/index.html;
- Снимите галку ограничивающую использование скриптов;
- Количество полос установите по Вашему желанию (у меня задано 15);
- Уберите полосы прокрутки и границу.
- Опубликуте объект и поместите в поле new_chart любой его записи такой текст:
Mary;190;160;40;120;30;70 Tom;3;40;30;45;35;49 Brad;10;180;10;85;25;79 Kate;40;80;90;25;15;119
- Сохраните карточку – график готов.
В данной статье описан базовый функционал всего одной диаграммы. Но плагин обладает гораздо большими возможностями 🙂 Поэтому обязательно посетите его страницу 🙂
А почему только на 6 делений отрабатывает, я в своем примере вместо food и тд поставил месяцы итого стало 12, добавил в поле ntext еще 6 получилось 12, но график отрабатывает только до 6, а остальные 6 пустые?(((
В коде есть такие строчки:
они динамически из ntext поля подтягивает данные парсит их и на их основе формирует HTML-таблицу 🙂 как видите код «зашит» только на 6 столбцов 🙂 соответственно расширте его на Ваши 12 🙂
Спасибо!
Скажите, а возможно ли с помощью Jquery cоздание графиков подобных этим:
http://www.bifin.ru/informers
http://www.conus.kiev.ua/stock.html
Не уверен 🙂 те примеры что Вы примели построены с помощью http://www.amcharts.com/ а это довольно мощный инструмент 🙂 Но в целом все ограничивается применяемыми плагинами для jQuery 🙂 http://www.google.ru/#sclient=psy&hl=ru&newwindow=1&q=jquery+chart&aq=f&aqi=g5&aql=&oq=&pbx=1&fp=57c5dec9fa34e907
Что-то я ни одного мощного инструмента плагина для рисования графика не нашел 🙁
Вопрос не совсем ясен? что значит рисовать график? 🙂 графики строятся на основе чисел 🙂 зачем их рисовать 🙂