How To Create Stunning Charts In Polymer Applications

charts in Polymer JS Application

Polymer is a JavaScript library which helps in building custom components for a web page or a web application. Web components are low-level primitives that lets you define your own HTML elements and as Polymer is build using web components, it provides the additional power by allowing to define custom components. The defined custom components are also used in web pages like any other HTML component using custom tags.

Key Features of Polymer JS:

Polymer focuses on allowing you to create rich, powerful, reusable web components by defining custom elements. These could be used in web applications built using frameworks like Angular or Ember.

Custom elements can be created using the dom-module element provided by Polymer. Custom element definition comprises of CSS style, HTML template of the element’s local DOM, element properties, lifecycle callbacks and JavaScript methods.

Some of the key features of Polymer JS are:

    Constructor: Registering an element associates a class with a custom element name. The class has a constructor that instantiates the associated custom element. Alternatively, document.createElement() can also be used to create and instantiate the element.

    Populated with internal DOM inside each instance: Shadow DOM provides a local, encapsulated DOM tree for your element. Polymer can automatically create and populate a shadow tree for your element from a DOM template.

    Styled with internal defaults or externally: <style></style> tags can be used as usual in the shadow Dom template of the custom elements.

FusionCharts, being a JavaScript based charting solution can be rendered in Polymer applications. We will define a custom element and register it to a class. The local DOM template of the custom element is holding the FusionCharts chart instance. The custom element will be used in another web page or DOM to render the chart. This custom element is reusable for multiple instances.

Prerequisites:

Before we proceed with seeing how you can integrate FusionCharts with a Polymer JS application, you need to have a basic understanding of HTML, CSS, JavaScript, and Document Object Model (DOM)

Set the Environment:
Before getting into the steps to render FusionCharts Polymer JS application, let’s first set the environment in our local machine. Some of the basic requirements for that are :

Step 1

  • Install NodeJS (if not installed)
  • Install Bower using NPM command as shown below:
    npm install -g bower

Step 2

  • Create a project directory named TestPolymer
  • Step into the project directory created.
  • Now, in TestPolymer working directory, go ahead and initialize bower using the command as shown below:
    bower init

This will create a bower.json file in the project working directory.

Step 3

Install Polymer using Bower in the project working directory. Execute the command as shown below:
bower install --save Polymer/polymer

This will install the Polymer JS in the bower_components folder within the TestPolymer project directory.

Once you are done with the installation of Polymer JS, cross-check whether it has been perfectly installed:
polymer help

Step 4

  • Install FusionCharts bower component in TestPolymer directory using the command stated below:
    `bower install fusioncharts
  • This will create a bower_components folder in TestPolymer project folder where you can insert all the FusionCharts downloaded files.

We are all set with the environment and ready to render FusionCharts in Polymer JS application.

Polymer custom-element within a Polymer JS application

Step 1

Create an index.html file in TestPolymer directory. Once done follow the steps mentioned below :

  • Add webcomponents-loader.js from the webcomponentsjs folder in the bower_components. The .js file is added as it is a client-side loader and it dynamically loads the minimum polyfill bundle using feature detection. Refer to the script tag added below:
  • Add the following link to index.html. This refers to polymer.html file which is needed to develop Polymer application.
  • Along with the above file, add the Polymer custom-element (which we will create in Step 2 mentioned below) under <body> of index.html.
  • Now, add the code given below under <body> of index.html file.

Once we are done with the four steps mentioned above, our index.html file is ready with its code implementation.

Step 2
We are all set with our index.html file and have already mentioned the source code and the page content using the polymer-fusioncharts custom element. Now, let’s create the custom element we added previously:

  • Create a new folder in the TestPolymer project directory and name the folder as element.
  • Under element folder, create a new file named polymer-fusioncharts.html.
  • Add polymer-element.html from polymer folder of bower_components in polymer-fusioncharts.html file as shown below:
  • To render charts, add FusionCharts library files. Since, the created custom-element will have the whole chart content in it, the JS files must be included here using the script tag as shown below:
  • Once you are done with the inclusion of library files, keep the code that will define a custom element class which extends the Polymer.Element. This is where the chart will be defined using the code mentioned below: Once you are done with the inclusion of library files, keep the code that will define a custom element class which extends the Polymer.Element. This is where the chart will be defined using the code mentioned below:

     

An optional <template> tag can also be added to the custom-element if you want to provide any additional content to the file.

With this the polymer-fusioncharts.html custom element is ready to be used in index.html by importing and adding <polymer-fusioncharts></polymer-fusioncharts> which we have already discussed while creating index.html file.

Step 3

The project is ready but to run the application you have to start the Polymer server using the following command in terminal:
polymer serve

The above command will start the server. To get the output in the screen, hit the URL displayed in the Cmder.

Check out the final output after hitting the url (http://127.0.0.1:8081):

If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we created for this tutorial.

Troubleshooting:

If you are unable to see the chart, check that:

  • The chart ID is unique for all charts rendered on the same page or it will result in a JavaScript error.
  • The fusioncharts.js and other related library files are properly included (especially if the chart does not show up at all).
  • The path to files is correct and the files reside there.
  • The chart alias names are mentioned correctly.

Leave a Comment