Построение графиков с помощью ChartJS

Компонент позволяет использовать на сайте красивые графики библиотеки ChartJS.
Примеры можно посмотреть на официальном сайте:
http://chartjs.devexpress.com/Demos/VizGallery/#index

После установки компонент можно использовать тремя способами:

1. В том месте страницы, где должен находиться обычный график, нужно вставить вызов:

            <?php
                      IncludeCom('dev/chartjs_simple', array
                                                       (
                                                           "list"      => $cartList,
                                                           "color"     => "#E9A802", 
                                                           "selectionColor"  => "#FFC822", 
                                                           "showCountLabels" => true, 
                                                           "labelsConnWidth" => 1, 
                                                           "title"     => "Заголовок 2",
                                                           "isRotated" => true
                                                       )
                                );
            ?>

В итоге выйдет график, наподобие следующего:

Передаваемые параметры:

list - список данных в виде:

                    $cartList = array();
                    $cartList[] = array("name"  => "Вариант 1", "count" => 10);
                    $cartList[] = array("name"  => "Вариант 2", "count" => 20);
                    // ...

color - цвет столбцов графика;
selectionColor - цвет которым выделяется столбец графика при выделении;
showCountLabels - указывать рядом со столбцом число;
labelsConnWidth - показывать линии соединяющие число и столбец. Работает если указан параметр showCountLabels. Принимает значение либо true либо целое положительное число (толщину линии в пикселях);
title - заголовок, отображающийся над графиком;
isRotated - вертикальная или горизонтальная ориентация графика;

Обязательным является только параметр list.

2. В том месте страницы, где должен находиться обычный график, нужно вставить вызов:

            <?php
                      IncludeCom('dev/chartjs_simple_pie', array
                                                           (
                                                               "list"      => $cartList,
                                                               "palette"   => "Soft Pastel",
                                                               "showCountLabels" => true, 
                                                               "labelsConnWidth" => 1, 
                                                               "title"     => "Заголовок 1"
                                                           )
                                );
            ?>

В итоге выйдет график, наподобие следующего:

Передаваемые параметры:

list - список данных в виде:

                    $cartList = array();
                    $cartList[] = array("name"  => "Вариант 1", "count" => 10);
                    $cartList[] = array("name"  => "Вариант 2", "count" => 20);
                    // ...

palette - название цветовой палитры. Возможные значения указаны в официально документации:
http://chartjs.devexpress.com/Documentation/ApiReference/dxPieChart/Configuration?version=13_2#palette
showCountLabels - указывать рядом со столбцом число;
labelsConnWidth - показывать линии соединяющие число и столбец. Работает если указан параметр showCountLabels. Принимает значение либо true либо целое положительное число (толщину линии в пикселях);
title - заголовок, отображающийся над графиком;

Обязательным является только параметр list.

3. Указать заголовочники библиотеки и проинициализировать график вручную в соответствии с документацией библиотеки:

    <?php IncludeCom('dev/chartjs_head')?>
    <script type="text/javascript">
    
        $(document).ready(function()
        {
            $('#chartContainer').dxCircularGauge(
            {
                scale: 
                {
                    startValue: 50,
                    endValue: 150,
                    majorTick: 
                    {
                        tickInterval: 10
                    }
                },
                rangeContainer: 
                {
                    palette: 'pastel',
                    ranges: 
                    [
                        { startValue: 50, endValue: 90 },
                        { startValue: 90, endValue: 130 },
                        { startValue: 130, endValue: 150 },
                    ]
                },
                title: 
                {
                    text: 'Temperature of the Liquid in the Boiler',
                    font: { size: 28 }
                },
                value: 105
            });
        });
    </script>

Скачать Github