Responsive Rollbase Dashboards with Kendo UI Charts

October 14, 2016 Data & AI

The no-code power of Rollbase means that with just a little coding, you can create a beautiful low-code responsive dashboard with Kendo UI charts.

In this previous blog, we saw how we can build a responsive UI that works well across devices and without any coding—this is the no-code aspect of the Rollbase platform.

In this post we will explore the low-code aspect of the platform and see how we can create a multi-device responsive dashboard containing Kendo UI charts. 

Building a Low-code Responsive Dashboard

We will illustrate creating the dashboard with an application containing a list of messages and with three kinds of message severity (Info, Warning and Error); the dashboard will show bar charts of “Message Count By Severity” with the following requirements:

  • On desktop use the available space and render two charts side by side, unless the browser is resized to a small window size, in which case it should work like on tablets
  • On tablet, show two charts side by side in landscape mode and one chart followed by another chart in portrait mode
  • On smartphone, always show one chart followed by another chart

Here are visual representations on tablet for both landscape and portrait:

The outline of the work is:

  1. Create a section with two columns; this gives us, without any programming, the desired responsive behavior (see this blog post for more information)
  2. Create a Kendo UI data source with chart data
  3. Bind the div element in each column to a Kendo UI chart using the data source we just created
  4. Specify the chart height for various devices using CSS media query rules

Creating a Data Source

We use a client side API to execute a select query on the list of messages and iterate through the results set to create an array. Here is the actual code showing how we can populate the array data source

1.rbf_selectQuery('select Severity#value, count(Severity) from Message group by Severity#value', 100, function initialize(values) {
2.for (var i=0; i < values.length; i++) {
3.   var severity = {};
4.   severity.name = values[i][0];
5.   severity.count = values[i][1];
6.   cachedChartData.push(severity);
7.}
8.});

Defining and Binding to Kendo UI Chart

We use the usual Kendo UI mechanism to define and bind to an HTML element. The code is provided for reference here:

01.var chartDiv = $('#MessageCountBySeverityChartId');
02.var chartDiv2 = $('#MessageCountBySeverityChartId2');
03.
04.chartKendoConfig = chartDiv.kendoChart({
05.    title: { text: 'Message Count By Severity'},
06.    legend: { position: 'bottom'    },
07.    theme: rb.newui.page.PageContext.getPageTheme(),
08.    dataSource: { data: chartData   },
09.    series: [
10.        {
11.            field: 'count', //severity count field in chart data..
12.            name: 'Severity'
13.        }
14.    ],
15.    categoryAxis: {
16.        field: 'name', //severity name field in chart data
17.        majorGridLines: {visible: false}
18.    },
19.    valueAxis: [
20.        {
21.            name: 'MessageCount',
22.            title: {text: '# of Messages'},
23.            line: { visible: false  }
24.        }
25.    ],
26.    tooltip: {
27.        visible: true,
28.        format: '{0}'
29.    }
30.})

The technique we showed here can easily be extended to a three or four column responsive section to create a more complex dashboard.

Chart Height for Various Devices Using CSS Media Query 

As the height of the chart is defined by the container in which the chart renders we can simply apply a CSS class to the container and have the height vary based on media queries. Here is an example:

01.<style>
02.@media only screen and (max-width: 415px) { /* S4, S5, iPhone*, vertical mode */
03.    .myCustomCharts {
04.        height: 400px;
05.        padding-top: 1.2em;
06.    }
07.}
08.@media only screen and (min-width: 416px) and (max-width: 768px) { /* small tablet or tablet portrait mode */
09.    .myCustomCharts {
10.        height: 310px;  /* we need more height as in this dimension there is one chart per row */
11.        padding-top: 1.2em;
12.    }
13.}
14.@media only screen and (min-width: 993px) and (max-width: 1024px) { /* small tablet or tablet landscape mode */
15.    .myCustomCharts {
16.        height: 250px;
17.        padding-top: 1.2em;
18.    }
19.}
20.@media only screen and (min-width: 1025px) and (max-width: 1200px) {
21.    .myCustomCharts {
22.        height: 350px;
23.    }
24.}
25.@media only screen and (min-width: 1201px) {
26.    .myCustomCharts {
27.        height: 400px;
28.    }
29.}
30.</style>

 

Rollbase and Kendo UI: Powerful Low-code Productivity

We saw how the no-code responsive capabilities of Rollbase fulfill our responsive requirements. The remaining requirements are addressed with some simple JavaScript and CSS programming to render Kendo UI charts with a variable height.

The combination of no-code and low-code capabilities in the platform provides great productivity while maintaining flexibility for the application programmer.

To explore how this can work for you, feel free to start your free trial of Rollbase today.

Charts Kendo UI low code no code Rollbase

Thierry Ciot

Thierry Ciot is a Software Architect on the Corticon Business Rule Management System. Ciot has gained broad experience in the development of products ranging from development tools to production monitoring systems. He is now focusing on bringing Business Rule Management to Javascript and in particular to the serverless world where Corticon will shine. He holds two patents in the memory management space.