Graphs
The graph element represents data or mathematical relationships between variables, typically using lines, bars, points, or other shapes. Graphs visualize patterns or comparisons in data by plotting points or bars on a coordinate system.
Graphs can be added in two styles:
Vertical Bar
Vertical Stacked bar
Trend
JSON Template for Graphs
{
"type": "graph",
"style": {
"preview": $<vertical_bar | vertical_stacked_bar | horizontal_bar | horizontal_stacked | trend>
},
"data": [
{
"category": $<category_name>,
"value": [
{ "label": $<item_name>, "value": $<item_value>}
]
}
]
}Attributes
Attribute name | Data type & limit | Default value | Description |
type* | String | graph | Specifies the type of visualization to be generated |
style | Object | style options | Specifies the type of visualization to be generated |
data* | Array (5) | data options | Array that contains the data points to be plotted on the graph |
Style Options
Attribute Name | Data Type & Limit | Description |
preview | Map |
|
x_axis | Map Allowed Values: title | Represents the horizontal axis of the graph. |
y_axis | Map Allowed Values: title | Represents the vertical axis of the graph |
Format :
"styles":{"preview":"vertical_stacked_bar", "x_axis":{"title":"players"}, "y_axis":{"title":"score"}}Data options
Attribute Name | Data Type & Limit | Description |
category | JSON Array | Defines the name of the category for which data is being represented (e.g., "Products", "Months").
|
value | JSON Array | An array that contains objects representing specific items within the category. Each object holds:
|
Format
[
{
"category": "category_name",
"value": [
{ "label": "item_name", "value": "item_value" }
]
}
]Sample Deluge Script - Widget
Imagine a scenario where you want to monitor app usage over time and analyze this data in detail daily. By utilizing the graph features of Cliq Widget, you can seamlessly track and visualize app usage patterns.
if(!target.isEmpty())
{
id = target.get("id");
}
else
{
id = "graphTab";
}
sections = list();
text = "The following data is intended to monitor and analyze the daily usage patterns of extensions in Cliq, providing insights into how frequently each extension is being utilized over time.";
textElement = {"type":"text","text":text};
dividerElement = {"type":"divider"};
graphData = {{"category":"Asana","values":{{"label":"Jan","value":9},{"label":"Feb","value":6},{"label":"Mar","value":3},{"label":"Apr","value":12},{"label":"May","value":15},{"label":"Jun","value":18},{"label":"Jul","value":24},{"label":"Aug","value":27}}},{"category":"BitBucket","values":{{"label":"Jan","value":12},{"label":"Feb","value":18},{"label":"Mar","value":14},{"label":"Apr","value":6},{"label":"May","value":8},{"label":"Jun","value":4},{"label":"Jul","value":2},{"label":"Aug","value":10}}},{"category":"Zendesk","values":{{"label":"Jan","value":4},{"label":"Feb","value":3},{"label":"Mar","value":7},{"label":"Apr","value":3},{"label":"May","value":4},{"label":"Jun","value":2},{"label":"Jul","value":6},{"label":"Aug","value":5}}}};
elements = list();
elements.add(textElement);
elements.add(dividerElement);
sections.add({"id":"text","elements":elements});
elements1 = list();
elements1.add({"type":"title","text":"Verticial Stacked Bar"});
elements1.add({"type":"graph","styles":{"preview":"vertical_stacked_bar"},"data":graphData});
elements1.add(dividerElement);
sections.add({"id":1,"elements":elements1});
elements2 = list();
elements2.add({"type":"title","text":"Trend"});
elements2.add({"type":"graph","styles":{"preview":"trend"},"data":graphData});
elements2.add(dividerElement);
sections.add({"id":2,"elements":elements2});
elements3 = list();
elements3.add({"type":"title","text":"Graph with Slider"});
elements3.add({"type":"graph","styles":{"preview":"vertical_bar"},"data":{{"category":"Asana","values":{{"label":"Jan 20","value":9},{"label":"Feb 20","value":8},{"label":"Mar 20","value":5},{"label":"Apr 20","value":2},{"label":"May 20","value":2},{"label":"Jun 20","value":2},{"label":"Jul 20","value":2},{"label":"Aug 20","value":2},{"label":"Sep 20","value":9},{"label":"Oct 20","value":8},{"label":"Nov 20","value":5},{"label":"Dec 20","value":2},{"label":"Jan 21","value":2},{"label":"Feb 21","value":2},{"label":"Mar 21","value":2},{"label":"Apr 21","value":2},{"label":"May 21","value":9},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":2},{"label":"Oct 21","value":2},{"label":"Nov 21","value":2},{"label":"Dec 21","value":2}}},{"category":"Projects","values":{{"label":"Jan 20","value":6},{"label":"Feb 20","value":11},{"label":"Mar 20","value":2},{"label":"Apr 20","value":5},{"label":"May 20","value":2},{"label":"Jun 20","value":6},{"label":"Jul 20","value":3},{"label":"Aug 20","value":5},{"label":"Sep 20","value":6},{"label":"Oct 20","value":11},{"label":"Nov 20","value":5},{"label":"Dec 20","value":3},{"label":"Jan 21","value":5},{"label":"Feb 21","value":7},{"label":"Mar 21","value":4},{"label":"Apr 21","value":6},{"label":"May 21","value":9},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":4},{"label":"Oct 21","value":6},{"label":"Nov 21","value":2},{"label":"Dec 21","value":3}}}}});
sections.add({"id":3,"elements":elements3});
return {"type":"applet","tabs":{{"label":"In-depth Analysis","id":"graphTab"}},"active_tab":id,"sections":sections};