Graph widget

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

 

Screenshot 2024-11-01 at 06.05.50.png

 

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

 

Â