Graph widget
- 1 Description
- 2 Code
- 3 Atributes
Description
The graph widget is a display widget that shows data in a graph format. It uses a basic implementation of the Chart.js. Currently it only supports the Bar, Pie and Line graphs. To see this in action go to the demo app Helium Dev - Demo on preprod under raw widget > graph
Â
Â
Code
The data that gets passed through to the graph is in a JSON format and looks like this:
.vxml
<raw type="GraphWidget" action="graphAction" cols-xs="12" cols-md="3">
<content function="columnGraphContent" />
</raw>
.mez
// Content binding for the Column Chart example
json columnGraphContent() {
json result=/%
{
"type": "Bar", // "Pie", "Line"
"chartColor": "blue", // "green", "red", "orange"
"chartData": {
"labels": [
"Label1",
"Label2",
"Label3"
],
"datasets": [
{
"label": "Ascending",
"data": [10.0, 20.0, 30.0]
//, "backgroundColor": ["#00BCD4"] // Have a list of colors for Pie graphs
//, "borderColor": ["#00BCD4"] // used in the line graphs
},
{
"label": "Descending",
"data": [40.0, 20.0, 2]
//, "backgroundColor": ["#B2EBF2"] // Have a list of colors for Pie graphs
//, "borderColor": ["#00BCD4"] // used in the line graphs
}
]
},
"options": {
"plugins": {
"legend": {
"display": true, // false
"position": "top"
},
"title": {
"display": true, // false
"text": "Bar Chart Widget"
}
}
}
}
%/;
return result;
}
DSL_VIEWS graphAction(json retArg){
string alertMessage = retArg;
Mez:alert("alert.alert_message");
return null;
}
Atributes
Under the base chart settings you can set the
type to be either "Bar", "Pie", "Line"
chartColor to be "blue", "green", "red", "orange"
Under the chartData you can set the
label of the set
dataSets
data of the set
label of the set
backgroundColor, this will override the chartColor chosen in the base chart
borderColor, this is used in the line graphs and will override the chartColor chosen in the base graph
Under options you can set the
Legend position,
Legend display
Title display
Title text
Â
Â