Create AM Charts Using Salesforce Lightning Component

How to Create AM Chart Using Salesforce Lightning Component?

Hi Friends,

When I was learning  AM Chart creation in salesforce lighting, I was facing lots of difficulties to implement this and for every AM chart, we needed to develop separate code for each type of AM chart. I was not happy for the development of code for each type of AM chart So I got an idea that if I will create single Lightning Component with the different parameter with its AM chart type and its basic properties then we can use the same component for each type of AM chart. And the good news is I got success to develop this separate Lightning component. I would like to happy to share my knowledge with you. One more thing I would like to let you know that if you want to convert this AM Chart to PDF then you can also do the same with my code. You can create multiple AM Charts (line, area, pie, donut, bubble, gauge, column, bar, stacked column, stacked bar, Gantt) with mix chart (which has the same format of JSON data) through my single component. I am sharing my code and related files as below so that you can learn this.

Step 1:-

In this step, you need to create 3 public resource files.

  • ForJspdf
  • Amchart
  • Html2Canvas

You can download these files from above links.

Step 2:-

We need to create a lightning component named “am_Chart.cmp”.

  • am_Chart.cmp :-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/am_Chart.txt
  • am_ChartController.js:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/am_ChartController.js
  • am_chartHelper.js:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/am_ChartHelper.js
  • am_chart.css:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/am_Chart.css
  • am_chartRenderer.js:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/am_ChartRenderer.js

Step 3:-

Now you can create a page break lightning component. This component is used for breaking the page where we needed in the PDF. If you don’t want to use page break, in this case, the chart will be split into two different page. So for PDF beautification, I have implemented page break component. Below is the code for page break component.

  • PageBreak.cmp :-
    You can download and preview related code here https://www.forcetalks.com/wp-content/uploads/2018/05/PageBreak.txt

Step 4 :-

You can use this component into any of you another component as I have used it in my component named “AMChartPDFConversion.cmp”. In this component, I have implemented PDF conversion functionality. How I have used this functionality you can see in the below sample code.

  • AMChartPDFConversion.cmp :-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/AMChartPDFConversion.txt
  • AMChartPDFConversionController.js:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/AMChartPDFConversionController.js
  • AMChartPDFConversionHelper.js:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/AMChartPDFConversionHelper.js
  • AMChartPDFConversion.css:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/AMChartPDFConversion.css

Step 5:-

You can create an application to preview and test your changes after calling “AMChartPDFConversion.cmp” component.

  • am_ChartApp.app:-
    You can download and preview related code here
    https://www.forcetalks.com/wp-content/uploads/2018/05/am_ChartApp.txt

Note :-

  • Component should be in the version of 39.0
  • Browser should be the latest version for best result

 

Hope this will help you to create custom AM Chart component for multi-purpose showing the chart and download chart as PDF.

Thanks in advance!!

Responses

  1. Thanks Prafull Kumar for this post.

    I'm trying to replicate your result but I have some problems, and I resolve it in this way :

    1 .  Proto property is deprecate, so I change in AMChartPDFConversionHelper in this way:

    /* if (nodeList[0].__proto__ === HTMLImageElement.prototype
    || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
    attrName = 'src';
    }*/
    if (nodeList[0].getPrototypeOf(obj) === HTMLImageElement.prototype
    || nodeList[0].getPrototypeOf(obj) === HTMLScriptElement.prototype) {
    attrName = 'src';
    }

    ( https://stackoverflow.com/questions/29254377/jshint-the-proto-property-is-deprecated )

    2. And when I lunch generate PDF I have

    Uncaught ReferenceError: jsPDF is not defined throws at /AMChartPDFConversion.js:70:35

    So I change require with $Resource.ForJspdf at first place

    <ltng:require scripts="{!join(',', $Resource.ForJspdf, $Resource.Html2Canvas, $Resource.amchart + '/amcharts/plugins/export/libs/pdfmake/pdfmake.min.js.map')}"/>

    Thanks so much!

    F.

     

Comments are closed.

Popular Salesforce Blogs