Charts

The chart element is a graphical representation of data that makes complex data more understandable and easier to compare at a glance by visualizing trends, relationships, or proportions.

Charts can be added in three styles:

Pie Chart
Doughnut Chart
Semi Doughnut Chart

Types of Charts in Cliq

JSON template for a chart element

{
	"type": "percentage_chart",
	"style": {
		"preview": $<pie | doughnut | semi_doughnut>
	},
	"data": [
		{ "label": $<item_name>, "value": $<item_value> }
	]
}

Attributes

Attribute name	Data type & limit	Default value	Description
type*	String	percentage_chart	Specifies the type of chart that will be rendered.
style	Object	style options	Specifies the visual style or appearance of the chart.
data*	Array (50)	data options	Specifies the visual style or appearance of the chart.

Style Options

Attribute Name

Data Type & Limit

Description

preview

Map

Allowed Values:
pie | doughnut | semi_doughnut

pie: Renders a standard pie chart with data shown as wedges representing each segment.
doughnut: Similar to a pie chart but with a central hole, giving a ring-like appearance.
semi_doughnut: Renders a half-circle version of a doughnut chart, often used to emphasize certain data.

Data options

Attribute Name

Data Type & Limit

Description

label

String
Maximum Length : 20

Specifies the name of the data category (what each segment represents).

value

Float

Float value represents the size of the segment.

Format :

data = [ { "label": "item_name", "value": "item_value" } ]

Sample Deluge Script - Widget

Consider a use case depicting the marketing expenditures for the previous or current year to track and monitor. We can analyse and chat within the widget using Cliq Widget's charts.

if(!target.isEmpty())
{
 id = target.get("id");
}
else
{
 id = "chartTab";
}
sections = list();
text = "The following charts provide a detailed analysis of this year's marketing expenditures. They illustrate trends and patterns and highlight resources allocated across different marketing channels and initiatives.";
textElement = {"type":"text","text":text};
dividerElement = {"type":"divider"};
Marketing_ExpenseData = {{"label":"Magazine","value":10},{"label":"Online Advertising","value":35},{"label":"Conventions","value":5},{"label":"Catalogs & Brochures","value":18},{"label":"SEO Vendors","value":9},{"label":"Social Media Posts","value":15}};
SocialMedia_ExpenseData = {{"label":"Blogging","value":10},{"label":"Social Networks","value":40},{"label":"Online Videos","value":20},{"label":"Crowdsourcing","value":8},{"label":"Podcasting","value":6},{"label":"Brand Monitoring","value":20},{"label":"Outreach Programs","value":8},{"label":"Digital Advertising","value":30}};
elements = list();
elements.add(textElement);
elements.add(dividerElement);
sections.add({"id":1,"elements":elements});
elements2 = list();
elements2.add({"type":"title","text":"Marketing Budget - 2024"});
elements2.add({"type":"percentage_chart","styles":{"preview":"pie"},"data":Marketing_ExpenseData});
elements2.add(dividerElement);
sections.add({"id":2,"elements":elements2});
elements3 = list();
elements3.add({"type":"title","text":"Social Media Marketing Distribution"});
elements3.add({"type":"percentage_chart","styles":{"preview":"doughnut"},"data":SocialMedia_ExpenseData});
elements3.add(dividerElement);
sections.add({"id":3,"elements":elements3});
return {"type":"applet","tabs":{{"label":"Marketing","id":"chartTab"}},"active_tab":id,"sections":sections};

Charts in Cliq Widget - Web