Scroll Top

AmChart Integration with EXTJS

AmChartWithExtJS

 Introduction

This article is a brief overview on how we can integrate JavaScript charting frameworks with EXTJS.

There are various open source JavaScript charting frameworks available. In this article we will cover how to integrate AmChart with EXTJS, AmCharts is an JavaScript charting library which provides different data visualisation.

Let us try to implement AmChart in EXTJS.

Pre-Requisites

  • AmCharts amcharts library.
  • Sencha Ext-JS development environment(Sencha cmd , ExtJS SDK etc).
  • Sample ExtJS application.
  • Working knowledge of Sencha ExtJS.

Getting Started

Following are the quick steps:

Step 1 : Create EXT JS Application.

Create an ExtJS app, To create ExtJS app follow the link given below.

Creating new ExtJS app

Step 2 : Download AmChart Library.

Download the AmChart library from the following url and extract the contents of the archive to a directory of your choice.

https://www.amcharts.com/download/  

Step 3 : Adding AmChart library files in our application. 

Create a folder name like “lib” in our application

amlib

Copy “amcharts” directory from downloaded zip file into your “lib” folder and open the amcharts folder to see the list of files.

The amcharts folder contains the following files.

amfiles

Open the app.json file to include the require amcharts library files path into the file.

appjson

After including the path it looks like this.

json

Step 4 : Defining Chart Store Class.

Define new class in your application and extend the class with “Ext.data.Store”.

Follow the following code –

Step 5 : Defining Chart Class.

Define a new class in your application and extend it with “Ext.container.Container”, while giving the alias name as piechart.

Follow the following code –

Step 6 : Using Chart as xtype.

To use the PieChart in your application, create a panel and add PieChart in panel items.

Follow the following code –

Save and run your application in browser, following is the output how it looks like –

output

You may try it on Sencha Fiddle

Summary

In this article we learnt “how to integrate AmChart with EXTJS and use as xtype” by adding the AmChart library. Hope you found this helpful. 

References

Related Posts

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.