Charts

XY Chart : Site Statistics
Site Statistics
  • View
  • Visitor
  • Likes
  • Comments
Documentation
Available Parameters
Parameter Type Description
baseId Unique Text
required 		Set Unique Base ID for Chart.
title Text
required 		Set title of Chart.
legend Boolean
Default : false 		Set true value for legend parameter to display chart legend base on series.
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/06/02",

        "view"       : 65,
        "visitor"    : 78,
    }
]
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-site-statistics",

	"title"	: "Site Statistics",

	"legend"	: true,

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

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

			"view"	: 565,
			"visitor"	: 530,
			"likes"	: 460,
			"comments"	: 380,
		},
		{
			"date"	: "2024/01/13",

			"view"	: 1130,
			"visitor"	: 890,
			"likes"	: 430,
			"comments"	: 350,
		},
		{
			"date"	: "2024/01/14",

			"view"	: 705,
			"visitor"	: 720,
			"likes"	: 530,
			"comments"	: 230,
		},
		{
			"date"	: "2024/01/15",

			"view"	: 425,
			"visitor"	: 478,
			"likes"	: 200,
			"comments"	: 82,
		},
		{
			"date"	: "2024/01/16",

			"view"	: 1025,
			"visitor"	: 1178,
			"likes"	: 880,
			"comments"	: 760,
		},
		{
			"date"	: "2024/01/17",

			"view"	: 735,
			"visitor"	: 478,
			"likes"	: 270,
			"comments"	: 100,
		},
		{
			"date"	: "2024/01/18",

			"view"	: 765,
			"visitor"	: 758,
			"likes"	: 610,
			"comments"	: 520,
		}
	],

	"options"	: {
		"xAxis"	: {
			"type"		: "time",

			"dataKey"		: "date",

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

		"yAxis"	: {
			"interval"	: 250,

			"min"	: 0,
			"max"	: 1250
		},

		"series" : [
			{
				"dataKey"		: "view",

				"type"		: "bar",

				"name"		: "View",
				"itemStyle"	: {
					"color": "#93B1F4"
				},
			},
			{
				"dataKey"		: "visitor",

				"type"		: "bar",

				"name"		: "Visitor",
				"itemStyle"	: {
					"color": "#1F58D4"
				},
			},
			{
				"dataKey"		: "likes",

				"type"		: "bar",

				"name"		: "Likes",
				"itemStyle"	: {
					"color": "#001F63"
				},
			},
			{
				"dataKey"		: "comments",

				"type"		: "bar",

				"name"		: "Comments",
				"itemStyle"	: {
					"color": "#F9BD29"
				},
			},
		],
	}
 } %}