T
Thierry Ciot
Guest
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:
Here are visual representations on tablet for both landscape and portrait:
The outline of the work is:
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[0];
severity.count = values[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.
To explore how this can work for you, feel free to start your free trial of Rollbase today.
Continue reading...
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:
- Create a section with two columns; this gives us, without any programming, the desired responsive behavior (see this blog post for more information)
- Create a Kendo UI data source with chart data
- Bind the div element in each column to a Kendo UI chart using the data source we just created
- Specify the chart height for various devices using CSS media query rules
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.
2.
3.
4.
5.
6.
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.
02.
03.
04.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
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.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
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.
Continue reading...