Over a million developers have joined DZone.

Responsive Low-Code Rollbase Dashboards With Kendo UI

With just a little coding, you can create a beautiful low-code responsive dashboard with Kendo UI charts.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 UIcharts

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:

Image title


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

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

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:

var chartDiv = $('#MessageCountBySeverityChartId');
var chartDiv2 = $('#MessageCountBySeverityChartId2');

chartKendoConfig = chartDiv.kendoChart({
    title: { text: 'Message Count By Severity'},
    legend: { position: 'bottom'    },
    theme: rb.newui.page.PageContext.getPageTheme(),
    dataSource: { data: chartData   },
    series: [
        {
            field: 'count', //severity count field in chart data..
            name: 'Severity'
        }
    ],
    categoryAxis: {
        field: 'name', //severity name field in chart data
        majorGridLines: {visible: false}
    },
    valueAxis: [
        {
            name: 'MessageCount',
            title: {text: '# of Messages'},
            line: { visible: false  }
        }
    ],
    tooltip: {
        visible: true,
        format: '{0}'
    }
})

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:

<style>
@media only screen and (max-width: 415px) { /* S4, S5, iPhone*, vertical mode */
    .myCustomCharts {
        height: 400px;
        padding-top: 1.2em;
    }
}
@media only screen and (min-width: 416px) and (max-width: 768px) { /* small tablet or tablet portrait mode */
    .myCustomCharts {
        height: 310px;  /* we need more height as in this dimension there is one chart per row */
        padding-top: 1.2em;
    }
}
@media only screen and (min-width: 993px) and (max-width:1024px) { /* small tablet or tablet landscape mode */
    .myCustomCharts {
        height: 250px;
        padding-top: 1.2em;
    }
}
@media only screen and (min-width: 1025px) and (max-width:1200px) {
    .myCustomCharts {
        height: 350px;
    }
}
@media only screen and (min-width: 1201px) {
    .myCustomCharts {
        height: 400px;
    }
}
</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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
ui ,responsive ,dashboard ,kendo

Published at DZone with permission of Thierry Ciot, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}