Charts
XY Chart : Tickets
Created Tickets
268
125%
vs previous period (104)
Closed Tickets
268
125%
vs previous period (104)
Documentation
Available Parameters
| Parameter | Type | Description |
|---|---|---|
baseId
|
Unique Text
required |
Set Unique Base ID for Chart. |
title
|
Text
required |
Set title of Chart. |
data
|
Array of Data Object
required |
Set list of Data item. Example: [
|
options
|
Options Object
required |
Set Options for chart. required attributes : xAxis.dataKey, series[ { item.dataKey } ]more about options see https://echarts.apache.org/en/option.html Example: {
|
dropdown
|
Dropdown Object | Set dropdown filter for chart. required attributes : text, optionsExample: {
|
summary
|
Summary Object | Display summary for chart. required attributes : value, trend, descriptionExample: {
|
Starter Kit Codes
Starter Kit Code
{# include charts/xy #}
{% include "../../charts/xy.twig", with {
"baseId" : "example-chart-tickets-1",
"title" : "Created Tickets",
"dropdown" : {
"text" : "Last 30 days (Jan 6 - Feb 4)",
"options" : [
"Filter 1",
"Filter 2",
],
},
"summary" : {
"value" : "268",
"trend" : "<span class=\"trend-up\">125%</span>",
"description" : "vs previous period (104)"
},
"data" : [
{
"date" : "2023/1/6",
"previous" : 600,
"current" : 350,
},
{
"date" : "2023/1/7",
"previous" : 500,
"current" : 755,
},
{
"date" : "2023/1/8",
"previous" : 750,
"current" : 500,
},
{
"date" : "2023/1/9",
"previous" : 730,
"current" : 350,
},
{
"date" : "2023/1/10",
"previous" : 740,
"current" : 520,
},
{
"date" : "2023/1/11",
"previous" : 700,
"current" : 700,
},
{
"date" : "2023/1/12",
"previous" : 750,
"current" : 800,
},
{
"date" : "2023/1/13",
"previous" : 780,
"current" : 600,
},
{
"date" : "2023/1/14",
"previous" : 530,
"current" : 280,
},
{
"date" : "2023/1/15",
"previous" : 740,
"current" : 300,
},
{
"date" : "2023/1/16",
"previous" : 530,
"current" : 600,
},
{
"date" : "2023/1/17",
"previous" : 650,
"current" : 350,
},
{
"date" : "2023/1/18",
"previous" : 780,
"current" : 630,
},
{
"date" : "2023/1/19",
"previous" : 700,
"current" : 500,
},
{
"date" : "2023/1/20",
"previous" : 600,
"current" : 300,
},
{
"date" : "2023/1/21",
"previous" : 650,
"current" : 550,
},
{
"date" : "2023/1/22",
"previous" : 780,
"current" : 720,
},
{
"date" : "2023/1/23",
"previous" : 580,
"current" : 500,
},
{
"date" : "2023/1/24",
"previous" : 760,
"current" : 380,
},
{
"date" : "2023/1/25",
"previous" : 530,
"current" : 350,
},
{
"date" : "2023/1/26",
"previous" : 560,
"current" : 480,
},
{
"date" : "2023/1/27",
"previous" : 500,
"current" : 530,
},
{
"date" : "2023/1/28",
"previous" : 750,
"current" : 480,
},
{
"date" : "2023/1/29",
"previous" : 700,
"current" : 500,
},
{
"date" : "2023/1/30",
"previous" : 745,
"current" : 450,
},
{
"date" : "2023/1/31",
"previous" : 600,
"current" : 500,
},
{
"date" : "2023/2/1",
"previous" : 520,
"current" : 760,
},
{
"date" : "2023/2/2",
"previous" : 550,
"current" : 650,
},
{
"date" : "2023/2/3",
"previous" : 600,
"current" : 400,
},
{
"date" : "2023/2/4",
"previous" : 620,
"current" : 420,
},
{
"date" : "2023/2/5",
"previous" : 770,
"current" : 570,
},
],
"options" : {
"xAxis" : {
"dataKey" : "date",
"axisLabel" : {
"interval": 3,
},
},
"yAxis" : {
"interval" : 250,
"min" : 0,
"max" : 1000,
},
"series" : [
{
"dataKey" : "previous",
"name" : "Previous period",
"itemStyle" : {
"color": "rgba(14, 20, 43, .16)"
},
"lineStyle" : {
"width" : 0
},
"areaStyle" : {
"color": "rgba(14, 20, 43, 0.16)",
"opacity": 1,
},
},
{
"dataKey" : "current",
"name" : "Current period",
"itemStyle" : {
"color": "rgba(31, 88, 212, 1)"
},
"lineStyle" : {
"color": "rgba(31, 88, 212, 1)",
"width": 2,
},
"areaStyle" : {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [{
"offset": 0, "color": "rgba(31, 88, 212, 0.64)"
}, {
"offset": 1, "color": "rgba(255, 255, 255, 0.64)"
}]
},
"opacity": 1,
},
},
],
}
} %}
Starter Kit Code
{# include charts/xy #}
{% include "../../charts/xy.twig", with {
"baseId" : "example-chart-tickets-2",
"title" : "Closed Tickets",
"dropdown" : {
"text" : "Last 30 days (Jan 6 - Feb 4)",
"options" : [
"Filter 1",
"Filter 2",
],
},
"summary" : {
"value" : "268",
"trend" : "<span class=\"trend-up\">125%</span>",
"description" : "vs previous period (104)"
},
"data" : [
{
"date" : "2023/1/6",
"previous" : 600,
"current" : 350,
},
{
"date" : "2023/1/14",
"previous" : 530,
"current" : 280,
},
{
"date" : "2023/1/18",
"previous" : 780,
"current" : 630,
},
{
"date" : "2023/1/22",
"previous" : 780,
"current" : 720,
},
{
"date" : "2023/1/26",
"previous" : 560,
"current" : 480,
},
{
"date" : "2023/1/30",
"previous" : 745,
"current" : 450,
},
{
"date" : "2023/2/3",
"previous" : 600,
"current" : 400,
},
],
"options" : {
"xAxis" : {
"dataKey" : "date",
},
"yAxis" : {
"interval" : 250,
"min" : 0,
"max" : 1000,
},
"series" : [
{
"dataKey" : "previous",
"type" : "bar",
"name" : "Previous period",
"itemStyle" : {
"color": "#93B1F4"
},
},
{
"dataKey" : "current",
"type" : "bar",
"name" : "Current period",
"itemStyle" : {
"color": "#1F58D4"
},
},
],
}
} %}