Charts

Pie Chart : Course Status
Course Status
See Details
  • Completed Courses
    30%
    26 Courses
  • Dropped Courses
    25%
    3 Courses
  • Refund Claimed
    20%
    7 Courses
  • On-going Courses
    17%
    12 Courses
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"     : "Completed Courses",
        "value"    : "26 Courses",
        "color"    : "#1F58D4",

        "trend"    : "<span class=\"trend-up\">30%</span>",
    }
]
action Link Action Object Set action link for chart.
Example:
{
    "text"    : "See Details",
    "link"    : "javascript:void()",
}
data Array of Data Object
required 		Set list of Data item.
Example:
[
    {
        "name"     : "Completed Courses",
        "value"    : 26,
        "itemStyle"    : {
            "color"    : "#1F58D4"
        },
    }
]
options Options Object Set Options for chart.
More about options see https://echarts.apache.org/en/option.html
Starter Kit Codes
Starter Kit Code 
 {# include charts/pie  #}
 {% include "../../charts/pie.twig", with {
    	"baseId"	: "example-chart-course-status",

	"title"	: "Course Status",

	"height"	: 214,

	"legend"	: [
		{
			"name"	: "Completed Courses",
			"value"	: "26 Courses",
			"color"	: "#1F58D4",

			"trend"	: "<span class=\"trend-up\">30%</span>",
		},
		{
			"name"	: "Dropped Courses",
			"value"	: "3 Courses",
			"color"	: "#001F63",

			"trend"	: "<span class=\"trend-up\">25%</span>",
		},
		{
			"name"	: "Refund Claimed",
			"value"	: "7 Courses",
			"color"	: "#93B1F4",

			"trend"	: "<span class=\"trend-down\">20%</span>",
		},
		{
			"name"	: "On-going Courses",
			"value"	: "12 Courses",
			"color"	: "#F9BD29",

			"trend"	: "<span class=\"trend-up\">17%</span>",
		},
	],
	"legendStyle"	: "chart-legend-style-table",

	"action"	: {
		"text"	: "See Details",
		"link"	: "javascript:void()",
	},

	"data"	: [
		{
			"name"	: "Completed Courses",
			"value"	: 26,
			"itemStyle"	: {
				"color"	: "#1F58D4"
			},
		},
		{
			"name"	: "Dropped Courses",
			"value"	: 3,
			"itemStyle"	: {
				"color"	: "#001F63"
			},
		},
		{
			"name"	: "Refund Claimed",
			"value"	: 7,
			"itemStyle"	: {
				"color"	: "#93B1F4"
			},
		},
		{
			"name"	: "On-going Courses",
			"value"	: 12,
			"itemStyle"	: {
				"color"	: "#F9BD29"
			},
		},
	],

	"options"	: {
	}
 } %}