Feb 22, 2021
Data presentation is important for effectively communicating information and making it credible. One attractive way to present data on your web page is to use charts. In this post we are going to learn how to use Kendo UI to generate a bar chart from a data set.
Requirements.
The jQuery and Kendo UI libraries need to be included on our website:
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js">
Implementation.
In the HTML we need an element where the chart will be created:
<div id="chart"></div>
Using JavaScript we need to define:
a data set
the chart options
the initialization of the chart
The data set to generate our chart is the following:
var ChartData =
{
Year: "2019",
Net: [-19, -4.42, 1.08, 3.89, 7.75, 8.75, 10.2],
Benchmark: [-20.15, -4.73, 0.85, 3.15, 6.30, 7.15, 8.7]
};
The basic options that we are going to use to create the chart in this example are:
var ChartOptions = {
title: {
text: ""
},
legend: {
position: "bottom",
visible: true,
},
chartArea: {
background: '#ffffff''
height: 500,
},
seriesDefaults: {
type: "column",
},
series: [
{
name: "Total Fund",
data: ChartData.Net,
color: "#05347A",
zIndex: 2,
}, {
name: "Benchmark",
data: ChartData.Benchmark,
color: "#FF9D52",
zIndex: 1,
}],
valueAxis: {
labels: {
format: "{0}%",
},
majorUnit: 5,
axisCrossingValue: [0, -60]
},
categoryAxis: [
{
},
{
categories: ["1 Year", "3 Year", "5 Year", "10 Year", "20 Year", "25 Year", "30 Year"],
}
],
};
In this object we have defined; legend position, background color, chart height, chart type, series names, series color, category names.
For more information about the chart options see the Kendo UI documentation.
Kendo initialization:
$(document).ready(function(){
$("#chart").kendoChart(ChartOptions);
});
Conclusion.
This tutorial is a brief introduction to the basic use of Kendo UI to generate charts. It also provides an example of the most used configuration options. These options can be applied to other types of charts, not just bar charts.
You can demo the code here.
Related Insights
-
Oshyn
-
Esteban Bustamante
Transition Sites to AEM Using Bulk Importer
Migrate Assets into AEMaaCS
-
Prasanth Nittala
Netlify and Vercel Alternatives
Using Native AWS Services For Headless Website Hosting in XM Cloud
-
Leonardo Bravo
The State of CI/CD Report 2024
DevOps Expertise Blossoms with Experience
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.