Кастомизация
13
Авг
7

Графики с помощью 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
      
  • Сохраните карточку – график готов.



В данной статье описан базовый функционал всего одной диаграммы. Но плагин обладает гораздо большими возможностями 🙂 Поэтому обязательно посетите его страницу 🙂

Комментарии (7)
  • Николай 13.08.2010

    А почему только на 6 делений отрабатывает, я в своем примере вместо food и тд поставил месяцы итого стало 12, добавил в поле ntext еще 6 получилось 12, но график отрабатывает только до 6, а остальные 6 пустые?(((

  • slivka_83 13.08.2010

    В коде есть такие строчки:

            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]);
            }
    

    они динамически из ntext поля подтягивает данные парсит их и на их основе формирует HTML-таблицу 🙂 как видите код «зашит» только на 6 столбцов 🙂 соответственно расширте его на Ваши 12 🙂

  • Николай 13.08.2010

    Спасибо!

  • Глеб 13.08.2010

    Скажите, а возможно ли с помощью Jquery cоздание графиков подобных этим:
    http://www.bifin.ru/informers
    http://www.conus.kiev.ua/stock.html

  • slivka_83 13.08.2010

    Не уверен 🙂 те примеры что Вы примели построены с помощью 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

  • claks 13.08.2010

    Что-то я ни одного мощного инструмента плагина для рисования графика не нашел 🙁

  • slivka_83 13.08.2010

    Вопрос не совсем ясен? что значит рисовать график? 🙂 графики строятся на основе чисел 🙂 зачем их рисовать 🙂

*

code