Кастомизация
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

Категории

Облако тегов

Accelerators ASPX C# Console Application CRM2011 CRM2013 CRM2015 CRM2016 CRM E-Mail Router CRM Server customizations.xml Dynamics 365 FetchXML IFrame ISV.Config JavaScript jQuery Lookup Metadata oData (REST) Outlook Performance Picklist Plug-ins PowerShell Reporting Services Silverlight SiteMap SOAP SQL SQL Server 2005 SQL Server 2008 SRS Data Connector view Visual Studio Windows Server 2003 XRMToolBox Бизнес-процессы Веб-ресурсы Диаграммы Импорт & Экспорт Лента Панели мониторинга Расширенный поиск Решения

Последние комментарии