markup-javascript.com

Графики средствами JavaScript

Хочу познакомить Вас с прекрасной библиотекой для построения графиков. Я долго искал подходящую библиотеку, но всякий раз они меня не устраивали, то при построениях графика использовался флешь, то очень сложная система API для генерации и самый частый минус – плохая поддержка кроссбраузерности.

Но вот, наконецто, я нашел самую простую и кроссбраузерную библиотеку, которая генерирует графики только средствами JavaScript – это JS Charts.

JS Charts потдержует три разных варианта графиков:

• Гистограмма
• Линейный график
• Круговая диограмма

Пример графиков

JS Charts – это бесплатная JavaScript библиотека, для работы которой не нужны никакие дополнительные модули или фреймверки.

Еще немного о преимуществах JS Charts

• ненужно писать какой либо код, только набор параметров
• простое интегрирование
• поддержка кастомизации, вид графиков формируете вы сами
• хорошая кроссбраузерность (Firefox 1.5 +, Internet Explorer 6+, Safari 2 +, Opera 9 +, iPhone 1+, и некоторые другие)
• генерация графика из массива JavaScript или XML файла
• 100% JavaScript

Но все же есть один минус – плагин не поддерживает кириллические символы при генерации <canvas> тега, поэтому в своих примерах я буду использовать подписи которые размещены в фоновой картинке.

Для отображения графика вам необходимо

1. Подключить библиотеку.
   <script src="jscharts.js" type="text/javascript"></script>
2. Вставить контейнер для генерации, для этого используется тег DIV, указать ID. В этот контейнер будет генерироваться график.
   <div id="chartcontainer">
       Контейнер для графика
   </div>
3. Указать набор параметров, и вставить код после контейнера.

   Пример с масивом

   <script type="text/javascript">
       // данные по графику
       var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
       // создание обьекта определенного типа графика с сылкой на наш контейнер
       var myChart = new JSChart('chartcontainer', 'line');
       // применение данных к графику
       myChart.setDataArray(myData);
       // генерация графика
       myChart.draw();
   </script>

   Пример с XML файлом

   <script type="text/javascript">
       // создание обьекта определенного типа графика с сылкой на наш контейнер
       var myChart = new JSChart('chartcontainer', 'line');
       // выборка данных из XML файла
       myChart.setDataXML('data.xml');
       // генерация графика
       myChart.draw();
   </script>

   XML файл должен иметь определенный вид

   <?xml version="1.0"?>
   <JSChart>
       <dataset type="line">
           <data unit="10" value="20"/>
           <data unit="15" value="10"/>
           <data unit="20" value="30"/>
           <data unit="25" value="10"/>
           <data unit="30" value="5"/>
       </dataset>
   </JSChart>

Более детальную документацию по API можно посмотреть сдесь

Рассмотрим несколько примеров

Линейный график

Посмотреть пример в новом окне

Гистограмма

Посмотреть пример в новом окне

Круговая диограмма

Посмотреть пример в новом окне

Скачать плагин

Tags: JavaScript, JS Plugins