Devstratum JQP Graph: визуализация графиков

Software
JavaScript
jQuery
Plugin
[ 27.11.2019 ]
Update: [ 07.10.2020 ]

jQuery плагин для построения простых блочных графиков с выводом в HTML вёрстку с CSS. Многомерные данные, адаптивный дизайн.

Devstratum JQP Graph
  • Version: 1.1
  • License: MIT License
  • Author: Sergey Osipov
Download GitHub

Задача

При тестировании оборудования, для сравнения результатов, требовалось строить графики. Вариант использования редакторов таблиц не устраивал. Хотелось иметь полный контроль по расчёту и выводу данных со своим оформлением и интеграцией в html вёрстку с стилями css на любой странице в сети. Так и родился инструмент Devstratum JQP Graph.

Devstratum JQP Graph

Использование

Для начала понадобится подключить библиотеку jQuery (если её нет) в html документ, либо локально, либо через CDN:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

Далее  для работы скрипта подключаем два файла c css таблицей стилей и javascript кодом. В дистрибутиве есть как исходники, так и минифицированные файлы. В проекте нужно указать свои пути к ним:

<link href="/css/jquery.dvstr_jqp_graph.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery.dvstr_jqp_graph.js" type="text/javascript"></script>

Параметры

title

  • Type: string
  • Default: none
  • Название графика

description

  • Type: string
  • Default: none
  • Подпись графика

unit

  • Type: string
  • Default: none
  • Единица измерения

better

  • Type: string
  • Default: none
  • Какие значения лучше, большие или меньшие

type

  • Type: string
  • Default: number
  • Тип данных number или time

separate

  • Type: boolean
  • Default: false
  • Разделение строк графика

grid_wmax

  • Type: int
  • Default: 0
  • Максимальный диапазон единиц сетки графика

grid_part

  • Type: int
  • Default: 5
  • Количество частей сетки графика

points

  • Type: object
  • Default: none
  • Объект пунктов разных измерений графика с параметрами названий и цвета

graphs

  • Type: object
  • Default: none
  • Объект строк графика с параметрами названий, цвета и значений

Примеры

Попробуем создать простой график. Всё дело в подготовленной структуре данных. Скрипту надо указать элемент контейнера куда выводить график. В данном примере это блочный элемент с идентификатором graph_01.

<div class="graph-container" id="graph_01"></div>
<script>
    jQuery(document).ready(function($) {
        $('#graph_01').dvstr_graph({
            title: 'V-Ray Benchmark 1.0.1',
            unit: 'Seconds',
            better: 'Lower is better',
            graphs: [
                {
                    label: 'Phenom II X6 1055T',
                    value: [
                        336
                    ]
                },
                {
                    label: 'Xeon E5450',
                    value: [
                        470
                    ]
                },
                {
                    label: 'Core i5-3470',
                    value: [
                        337
                    ]
                }
            ]
        });
    });
</script>

Получили вывод. Сетка значений рассчитывается автоматически. Блоки графика по умолчанию раскрашены в серый цвет. Это можно исправить указав параметры цвета для каждого значения. В следующем примере добавим цвет к блокам и укажем раздельный вывод. Для удобства, значения цвета были прописаны в свои переменные. Можно использовать произвольный набор со своими параметрами.

<div class="graph-container" id="graph_02"></div>
<script>
    jQuery(document).ready(function($) {
        var color_blue = '#4c8ffc';
        var color_green = '#4f9100';

        $('#graph_02').dvstr_graph({
            title: 'Cinebench R15.038',
            unit: 'Score',
            better: 'Higher is better',
            separate: true,
            points: [
                {
                    title: 'Single Core',
                    color: color_blue
                },
                {
                    title: 'Multi-Thread',
                    color: color_green
                }
            ],
            graphs: [
                {
                    label: 'Phenom II X6 1055T',
                    color: [
                        color_blue,
                        color_green
                    ],
                    value: [
                        84,
                        427
                    ]
                },
                {
                    label: 'Xeon E5450',
                    color: [
                        color_blue,
                        color_green
                    ],
                    value: [
                        86,
                        328
                    ]
                },
                {
                    label: 'Core i5-3470',
                    color: [
                        color_blue,
                        color_green
                    ],
                    value: [
                        132,
                        481
                    ]
                }
            ]
        });
    });
</script>

В следующем примере используется параметр типа данных type с значением time (по умолчанию этот параметр с значением number). Опция time позволяет задавать значения графиков value в формате времени Часы : Минуты : Секунды, которые автоматически пересчитываются в секунды. Время дополнительно выводится рядом с единицами секунд на графике.

<div class="graph-container" id="graph_time"></div>
<script>
    jQuery(document).ready(function($) {
        var color_blue = '#4c8ffc';
        var color_red = '#cc0000';

        $('#graph_time').dvstr_graph({
            title: 'Blender 2.79b',
            unit: 'Seconds',
            better: 'Lower is better',
            type: 'time',
            points: [
                {
                    title: 'Samples 150',
                    color: color_blue
                },
                {
                    title: 'Samples 600',
                    color: color_red
                }
            ],
            graphs: [
                {
                    label: 'Phenom II X6 1055T',
                    color: [
                        color_blue,
                        color_red
                    ],
                    value: [
                        '02:19',
                        '09:09'
                    ]
                },
                {
                    label: 'Xeon E5450',
                    color: [
                        color_blue,
                        color_red
                    ],
                    value: [
                        '03:07',
                        '12:22'
                    ]
                },
                {
                    label: 'Core i5-3470',
                    color: [
                        color_blue,
                        color_red
                    ],
                    value: [
                        '01:28',
                        '05:48'
                    ]
                }
            ]
        });
    });
</script>

В последнем примере имеется уже три блока в одной строке у пункта. В данном случае параметр separate (разделять) не указывается, блоки выводятся слитно в одной строке. Здесь есть дополнительные настройки сетки, где мы указываем максимальный диапазон единиц для графика и насколько частей делить сетку. Ещё использован параметр подписи описания.

<div class="graph-container" id="graph_03"></div>
<script>
    jQuery(document).ready(function($) {
        var color_blue = '#4c8ffc';
        var color_green = '#4f9100';
        var color_orange = '#e76100';

        $('#graph_03').dvstr_graph({
            title: '3DMark 2.7.6',
            description: 'Fire Strike 1920 x 1080 (Radeon RX 470 4GB)',
            unit: 'Score',
            better: 'Higher is better',
            grid_wmax: 10000,
            grid_part: 10,
            points: [
                {
                    title: 'Combined',
                    color: color_blue
                },
                {
                    title: 'CPU',
                    color: color_green
                },
                {
                    title: 'Overall',
                    color: color_orange
                }
            ],
            graphs: [
                {
                    label: 'Phenom II X6 1055T',
                    color: [
                        color_blue,
                        color_green,
                        color_orange
                    ],
                    value: [
                        3069,
                        5999,
                        8252,
                    ]
                },
                {
                    label: 'Xeon E5450',
                    color: [
                        color_blue,
                        color_green,
                        color_orange
                    ],
                    value: [
                        2863,
                        5120,
                        7927,
                    ]
                },
                {
                    label: 'Core i5-3470',
                    color: [
                        color_blue,
                        color_green,
                        color_orange
                    ],
                    value: [
                        4047,
                        6489,
                        9143,
                    ]
                }
            ]
        });
    });
</script>