Charts

XY Chart : Avg. Audience Age
Avg. Audience Age
  • Men
  • Woman
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:
[
    {
        "ageRange" : "13-17",

        "men"      : 70,
        "woman"    : 75,
    }
]
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:
{
    "yAxis"    : {
        "type"       : "category",
        "dataKey"    : "ageRange",

        "inverse"    : true,
    },

    "xAxis"    : {
        "type"       : "value",
    },

    "series" : [
        {
            "dataKey"     : "men",

            "type"        : "bar",

            "name"        : "Men",
            "itemStyle"   : {
                "color": "#1F58D4"
            },
        }
    ]
}
Starter Kit Codes
Starter Kit Code 
 {# include charts/xy  #}
 {% include "../../charts/xy.twig", with {
    	"baseId"	: "example-chart-audience-age",

	"title"	: "Avg. Audience Age",

	"legend"	: true,

	"height"	: 280,

	"dropdown"	: {
		"text"	: "February 2023",
		"options"	: [
			"Filter 1",
			"Filter 2",
		],
	},

	"data"	: [
		{
			"ageRange"	: "13-17",

			"men"	: 70,
			"woman"	: 75,
		},
		{
			"ageRange"	: "18-24",

			"men"	: 70,
			"woman"	: 75,
		},
		{
			"ageRange"	: "25-35",

			"men"	: 70,
			"woman"	: 75,
		},
		{
			"ageRange"	: "36-44",

			"men"	: 70,
			"woman"	: 75,
		},
		{
			"ageRange"	: "45-55",

			"men"	: 70,
			"woman"	: 75,
		},
		{
			"ageRange"	: "55+",

			"men"	: 70,
			"woman"	: 75,
		},
	],

	"options"	: {
		"yAxis"	: {
			"type"	: "category",

			"dataKey"	: "ageRange",

			"inverse"	: true,
		},

		"xAxis"	: {
			"type"	: "value",

			"interval"	: 20,

			"min"	: 20,
			"max"	: 100
		},

		"series" : [
			{
				"dataKey"	: "men",

				"type"	: "bar",

				"name"	: "Men",
				"itemStyle"	: {
					"color": "#1F58D4"
				},
			},
			{
				"dataKey"	: "woman",

				"type"	: "bar",

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