Charts

XY Chart : Traffic Perform
Traffic Perform
  • Organic Search
  • Direct
  • Youtube
  • Instagram
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"       : "Jan 12",

        "organic"    : 460,
        "direct"     : 250,
        "youtube"    : 610,
        "instagram"  : 480,
    }
]
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"    : {
        "type"        : "category",

        "dataKey"     : "date",
    },

    "yAxis"    : {
        "axisLabel" : {
            "prefix"    : "$"
        }
    },

    "series" : [
        {
            "dataKey"     : "organic",

            "type"        : "line",

            "name"        : "Organic Search",
            "itemStyle"   : {
                "color": "#93B1F4"
            },
        }
    ]
}
Starter Kit Codes
Starter Kit Code 
 {# include charts/xy  #}
 {% include "../../charts/xy.twig", with {
    	"baseId"	: "example-chart-traffic-perform",

	"title"	: "Traffic Perform",

	"legend"	: true,

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

	"data"	: [
		{
			"date"		: "Jan 12",

			"organic"		: 460,
			"direct"		: 250,
			"youtube"		: 610,
			"instagram"	: 480,
		},
		{
			"date"		: "Jan 13",

			"organic"		: 630,
			"direct"		: 515,
			"youtube"		: 370,
			"instagram"	: 240,
		},
		{
			"date"		: "Jan 14",

			"organic"		: 355,
			"direct"		: 230,
			"youtube"		: 120,
			"instagram"	: 360,
		},
		{
			"date"		: "Jan 15",

			"organic"		: 360,
			"direct"		: 740,
			"youtube"		: 470,
			"instagram"	: 700,
		},
		{
			"date"		: "Jan 16",

			"organic"		: 120,
			"direct"		: 140,
			"youtube"		: 930,
			"instagram"	: 500,
		},
		{
			"date"		: "Jan 17",

			"organic"		: 300,
			"direct"		: 630,
			"youtube"		: 130,
			"instagram"	: 100,
		},
		{
			"date"		: "Jan 18",

			"organic"		: 765,
			"direct"		: 660,
			"youtube"		: 655,
			"instagram"	: 600,
		}
	],

	"options"	: {
		"xAxis"	: {
			"type"		: "category",

			"dataKey"		: "date",
		},

		"yAxis"	: {
			"interval"	: 250,

			"min"	: 0,
			"max"	: 1000,

			"axisLabel" : {
				"prefix"	: "$"
			}
		},

		"series" : [
			{
				"dataKey"		: "organic",

				"type"		: "line",

				"name"		: "Organic Search",
				"itemStyle"	: {
					"color": "#93B1F4"
				},
			},
			{
				"dataKey"		: "direct",

				"type"		: "line",

				"name"		: "Direct",
				"itemStyle"	: {
					"color": "#1F58D4"
				},
			},
			{
				"dataKey"		: "youtube",

				"type"		: "line",

				"name"		: "Youtube",
				"itemStyle"	: {
					"color": "#001F63"
				},
			},
			{
				"dataKey"		: "instagram",

				"type"		: "line",

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