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 https://www.chartjs.org/. 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