Charts

XY Chart : Unresolved Tickets by Priority
Unresolved Tickets by Priority
  • 8
    Urgent
  • 15
    High
  • 35
    Medium
  • 21
    Low
Documentation
Available Parameters
Parameter Type Description
baseId Unique Text
required 		Set Unique Base ID for Chart.
title Text
required 		Set title of Chart.
height Number Set height for chart in pixels.
legend Array of Legend Set list of legend for chart.
Example:
[
    {
        "name"         : "Urgent",
        "color"        : "#93B1F4",

        "value"        : 8,
    },
    {
        "name"         : "High",
        "color"        : "#1F58D4",

        "value"        : 15,
    },
    {
        "name"         : "Medium",
        "color"        : "#001F63",

        "value"        : 35,
    },
    {
        "name"         : "Low",
        "color"        : "#F9BD29",

        "value"        : 21,
    },
]
actions Array of Action Item Set list of actions for chart.
Example:
[
    {
        "text"    : "Action 1",
        "link"    : "javascript:void()"
    }
]
data Array of Data Object
required 		Set list of Data item.
Example:
[
    {
        "date"      : "2024/01/12",

        "low"       : 9,
        "medium"    : 10,
        "high"      : 14,
        "urgent"    : 11,
    }
]
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:
{
    "xAxis"    : {
        "dataKey"         : "date",
    },
    "series" : [
        {
            "dataKey"     : "view",
            "name"         : "View",
        }
    ]
}
Starter Kit Codes
Starter Kit Code 
 {# include charts/xy  #}
 {% include "../../charts/xy.twig", with {
    	"baseId"	: "example-chart-unresolved-tickets",

	"title"	: "Unresolved Tickets by Priority",

	"height"	: 319,

	"legend"	: [
		{
			"name"		: "Urgent",
			"color"		: "#93B1F4",

			"value"		: 8,
		},
		{
			"name"		: "High",
			"color"		: "#1F58D4",

			"value"		: 15,
		},
		{
			"name"		: "Medium",
			"color"		: "#001F63",

			"value"		: 35,
		},
		{
			"name"		: "Low",
			"color"		: "#F9BD29",

			"value"		: 21,
		},
	],

	"actions"	: [
		{
			"text"	: "Action 1",
			"link"	: "javascript:void()"
		},
		{
			"text"	: "Action 2",
			"link"	: "javascript:void()"
		},
		{
			"text"	: "Action 3",
			"link"	: "javascript:void()"
		},
	],

	"data"	: [
		{
			"date"	: "2024/01/12",

			"low"	: 9,
			"medium"	: 10,
			"high"	: 14,
			"urgent"	: 11,
		},
		{
			"date"	: "2024/01/13",

			"low"	: 7,
			"medium"	: 8,
			"high"	: 10,
			"urgent"	: 10,
		},
		{
			"date"	: "2024/01/14",

			"low"	: 5,
			"medium"	: 7,
			"high"	: 4,
			"urgent"	: 6,
		},
		{
			"date"	: "2024/01/15",

			"low"	: 7,
			"medium"	: 8,
			"high"	: 11,
			"urgent"	: 7,
		},
		{
			"date"	: "2024/01/16",

			"low"	: 4,
			"medium"	: 3,
			"high"	: 7,
			"urgent"	: 3,
		},
		{
			"date"	: "2024/01/17",

			"low"	: 8,
			"medium"	: 8,
			"high"	: 11,
			"urgent"	: 5,
		},
		{
			"date"	: "2024/01/18",

			"low"	: 6,
			"medium"	: 6,
			"high"	: 7,
			"urgent"	: 8,
		}
	],

	"options"	: {
		"grid"	: {
			"left"		: 0,
			"right"		: 0,
		},

		"xAxis"	: {
			"type"		: "time",
			"boundaryGap"	: ["4%", "4%"],

			"dataKey"		: "date",

			"axisLabel"	: {
				"formatter" : "{MMM} {dd}"
			}
		},

		"yAxis"	: {
			"interval"	: 10,

			"min"	: 0,
		},

		"series" : [
			{
				"dataKey"		: "low",

				"type"		: "bar",
				"stack"		: "total",

				"name"		: "Low",
				"itemStyle"	: {
					"borderRadius"	: 0,
					"color"		: "#F9BD29"
				},
				"barMaxWidth"	: 16,
			},
			{
				"dataKey"		: "medium",

				"type"		: "bar",
				"stack"		: "total",

				"name"		: "Medium",
				"itemStyle"	: {
					"borderRadius"	: 0,
					"color"		: "#001F63"
				},
				"barMaxWidth"	: 16,
			},
			{
				"dataKey"		: "high",

				"type"		: "bar",
				"stack"		: "total",

				"name"		: "High",
				"itemStyle"	: {
					"borderRadius"	: 0,
					"color"		: "#1F58D4"
				},
				"barMaxWidth"	: 16,
			},
			{
				"dataKey"		: "urgent",

				"type"		: "bar",
				"stack"		: "total",

				"name"		: "Urgent",
				"itemStyle"	: {
					"borderRadius"	: 0,
					"color"		: "#93B1F4"
				},
				"barMaxWidth"	: 16,
			},
		],
	}
 } %}