CanvasJs in Salesforce Lightning

CanvasJS Charts, one of the JavaScript charting libraries.

30 different types of Charts and renders are supported by CanvasJS across devices like iPhone, iPad, Android, Mac & PCs. This give us the facility to create an attractive and rich dashboard that work across devices without compromising on things like maintainability or functionality of any web application. Graphs include several good looking themes and are very fast– resulting in lightweight, beautiful and responsive dashboards.

It is Very simple and intuitive API, comes with Beautiful and Elegant looking themes.

The various interactive features supported by canvasJs are:-

  • Tooltips
  • Zooming
  • Panning
  • Animation
  • Events
  • Drilldown
  • Exporting

One of the best things of this library is that, without any performance lag, it can easily render thousands of data-points.

CanvasJS is Standalone which means that it does not depend on any other library and this is one of the reason that why it is a fanatic Support from developers.

Types:

Area Chart

 

Doughnut Chart

 

Bar Chart

 

Line Chart

 

Bubble Chart

 

Pie Chart

 

Column Chart

 

Spline Chart

 

Spline Area Chart

 

Step Line Chart

 

Scatter (Point) Chart

 

Step Area Chart

 

Stacked Area Chart

 

Stacked Column 100% Chart

 

 Stacked Area 100% Chart

 

Stacked Column Chart

 

Stacked Bar Chart

 

 Stacked Bar 100% Chart

 

Range Bar Chart

 

Range Column Chart

 

Range Area Chart

 

OHLC (Stock) Chart

 

Range Spline Area Chart

 

Box and Whisker Chart

 

Candlestick Chart

 

Pyramid Chart

 

Error Chart

 

Funnel Chart

 

Waterfall chart

 

 

 

Let’s take an example of basic Column Chart. Here are some steps to create any basic chart :-

 

  1. Make a component and create a variable for a new Chart object by sending the ID of div element where the chart is to be rendered (In lightning component) we can also pass the DOM element in the place of ID and add lightning required script in it.
  2. After doing the above step pass all the Chart related “options” to the constructor as the second parameter.

Chart “options” basically consists of 4 important items

 

  • title object with its text property set, just like heading.
  • dataPoints – which is an array or collection of all data items that is to be rendered
  • dataSeries – dataPoints is the child of dataSeries, that also defines type of chart and other series wide options
  • data – array element which is collection of one or more dataSeries objects.

3.Now the last and the main step is to render the chart by calling chart.render() method.

Sample Code

Component

<aura:component>

<ltng:require scripts=”{!$Resource.CanvasJS}” afterScriptsLoaded=”{!c.generateChart}”/>

<div id=”chartContainer1″ style=”height: 400px; width: auto; margin-left: 0px; margin-top: 0px;”></div>

</aura:component>

Controller

generateChart: function (component, event, helper) {

var chart = new CanvasJS.Chart(“chartContainer1”, {

animationEnabled: true,

title:{ text: “CanvasJs in Salesforce Lightning”

},

data: [      {

type: “column”, //here we can change the type to bar, area, line, pie etc

dataPoints: [

{ x: 10, y: 71 },

{ x: 20, y: 55},

] } ]

});

chart.render();

}  }

canvasjs

Here in dataPoints, axisX is the horizontal Axis and axisY is the vertical Axis.one important thing to focus is that if we want to pass a string value in the chart axis we have to use “label” instead of “x”.

This way we can implement different types of CanvasJs chart in lightning component and we can make it dynamic as well to make the chart live

 

Posted in Canvajs in Salesforce Lightning, Canvasjs, canvasjs chart, Salesforce Lightning, What is Canvasjs.

Leave a Reply

Your email address will not be published. Required fields are marked *

*