Using Telerik kendo ui charts in salesforce

Salesforces provides a wide range of reporting and charting capabilities out-of-the-box like Salesforce1 / Lightning Reports and Dashboards for business users and Visaulforce Charts for developers that provide useful tooling in a wide of business cases. For the situations where you find salesforce just can provide what you need  OOB you can fall back on an alternative chart library such as google charts, highcharts, jscharts etc.... to extend salesforces already probabilities. In this case i'm going to show how to use 'Telerik Kendo UI' to extend your charting needs to build a multi axis double line / double bar chart like the following.

Why Telerik Kendo UI?

There are plenty of good and free charting libraries out there so why do i like Telerik Kendo UI charts. Heres a few reason why Kendo UI might be a good idea for your charting project:

• Out-of-the-box themes and a theme builder.
• Localization and Globalization support.
• In-depth documentation on getting started and APIs.
• Detailed demos.
• Pretty much any chart type you can dream of as well as the ability to mix and match them different types into the one chart.
• Screen size adaptive.
• Great browser support even for OLD browser as old as IE7
• Great product support, Telerik actually response (and fast) to issues

Getting Setup

Firstly we need to get Kendo UI from Telerik. You can download the a trail version from http://www.telerik.com/kendo-ui.

With Kendo UI  downloaded package  the following files into a zip file called KendoUi:

• js/jquery.min.js
• js/kendo.all.min.js
• style/kendo.common.min.css
• style/kendo.default.min.css

Upload the zipfile to the static resources calling the resource KendoUi.

The Code

In this example we are going to use a remote action to get our data and to return a JSON response to the client to process the chart. Create a new class named MultiAxis_Controller, this class class will be used as our controller for a page or component. Create an empty constructor and a remote action that returns the data results you want to chow in your chart.

For example

Create a new page or component  that sets MultiAxis_Controller as the controller.  For the porpose of this example I've created a component and will set a required projectId attribute to the component to we can forward this value onto our remote action call later on..

Now we need to include the 2 kendo ui js files and style sheets to the component that we previously uploaded to the static resources.

Add a div to component with an id of 'chart'. This div will be where kendo ui will build it charting output. 


Do define the charts attributes such as its series and axes add the following javascript to the bottom of the component

A quick glance we can see that we will are adding a chart to the the div tag called 'chart' and setting that we have 4 data series. for example we have set the two of the series are defined as columns by setting the series type to 'column' we have also defined the two column series to be bound against the axis called 'MTD'.

Notice we have not yet defined the data variables for our 4 series and category axis (ie CostMonthToDateData,CostYearToDateData, CostITDData, NMNSRITDDate and categoryData). We now need to define our data variables and fill them with the data that will be retrieved from a  remote call to to remote action that recreated earlier on. 


This java script simply defines 5 data arrays, calls the remote action MultiAxis_Controller.ProjectSnapshot in our controller then loops through the results and populates each of the arrays. After we have all the data we require create the chart with $(document).ready(createChart);