Google Chart – UI5 Custom controls(ready to use library)
Why Google Charts in a UI5 application/ dashboard ?
I have been working on a real time sales dashboard which runs on XSOData . So , I built a custom UI5 dashboard using VIZ charts , micro charts , tables etc and deployed in FLP. We are in 1.38 UI5 library version and which definitely has its limitations . I personally don’t like viz charts based dashboard , as it undistinguished compared to other third party chart libraries( criticize in the comment box please ) .
Anyways , I thought of trying some third party chart libraries which may look better , and I ended up trying Google Charts.
Below is a Google Chart Gauge example in a table row .
Like viz charts , Google Charts also give us a verity of standard graphs like Line , Column , Bar , Combo etc . So I have created a set of custom controls for each of these charts , and containers for them to fit in the dashboard. I call each of these charts as Card and the container to hold Card(s) a CardRow . A CardRow can contain multiple Cards . And a CardHolder control can hold multiple CardRows . I did all these to enable nesting . See how it works .
- Card : A base control which shall be extended to specific chart controls ( eg : Card is extended to LineChart , ColumnChart etc )
- CardRow : Has an aggregation “items” which accepts either Cards or CardHolder .
- CardHolder : A card Holder has a toolbar and has an aggregation “rows” which accept CardRows.
One CardHolder having one row and Row has 2 cards.
<c:CardHolder title="Card Holder" showTitle="true"> <c:rows> <c:CardRow> <c:items> <c:BarChartCard id="bc1" showSettings="true" title="Sales Variance" visible="true" refreshInterval="0" chartLoaded="loadChart" hAxis="Revenue" vAxis="Month" width="40%" height="220px"> </c:BarChartCard> <c:LineChartCard id="bc2" showSettings="false" title="Sales Variance" visible="true" refreshInterval="0" chartLoaded="loadChart" hAxis="Revenue" vAxis="Month" width="59%" height="220px"> </c:LineChartCard> </c:items> </c:CardRow> </c:rows> </c:CardHolder>
Tow rows with one item each
Nested Cards & Rows
Below is how the cards are arranged ( zoom to see )
Features of Cards , CardRows & CardHolder
Once the card is rendered , it raise an event “chartLoaded” . We need to register an event handler , where we can populate the necessary data.
Also , the control has a refreshInterval property. We can set ( say 30 seconds ) so that the “chartLoaded” event shall be triggered in every 30 seconds – this is useful if you want to reload the chart in an equal interval . I use this event to show Current Sales , as it refreshes the tile in every 60 seconds. We can individually set refresh intervals for each tile.
Settings button on the right top corner allows the user to full screen the chart. We can turn this off as well.
The Cards are clickable. If you turn on enableClick property , you can click on the tile and it handles the click .
When you place any item on a CardRow , it is arranged horizontally( like columns in the row) . You can also register a “rowUpdateInterval” event ( say 30 sec ) so that in every 30 seconds, “rowUpdated” event will be triggered . I use this feature to toggle visibility of Cards added to the row.
You can show or hide the title bar.
Below are the types of controls I created so far
I had a requirement to develop a live dashboard which shows daily sales KPIs and reports graphically ( to be projected on a television soon ) . It shows the live data ( Sales volume, revenue , open & closed deliveries , shipments , performance etc ) . I used multiple charts and tables from Google Chart to develop the dashboard. It automatically refreshes the data , where ever applicable . (I cannot post a screenshot here due to obvious reasons )
Whats next ?
These controls currently have the below issues . Once they are fixed, i will upload the whole source code in Git and share it here. Please follow this blog if you are interested.
- Cards added in the row are not responsive. I expect them to re arrange automatically as the screen size changes
- More features like disabling refresh event dynamically , print feature etc
Special thanks : Google.