Polymer is a JavaScript library that assists in the development of custom components for a web page or web application. Web components are primitives at the lowest level. Because Polymer is built with web components, these components assist you in defining your own HTML elements. They also give you more flexibility by allowing you to define custom components. The defined custom components are also used in web pages in the same way that any other HTML component is, by using custom tags.
In this post, you’ll learn about Polymer JS’s key features, how to create stunning Live Charts with Fusioncharts in Polymer Applications, and how to troubleshoot.
Table of Contents
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:
Some key features of Polymer JS include:
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.
Shadow DOM provides a local, encapsulated DOM tree for your element. The Polymer can automatically create and populate a shadow tree for your element from a DOM template.
The <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.
Before you integrate FusionCharts with a Polymer JS application, you need to have a basic understanding of HTML, CSS, JavaScript, and Document Object Model (DOM).
Before getting into the steps to render the FusionCharts Polymer JS application, let’s first set the environment in our local machine. Some of the basic requirements include:
npm install -g bowerTestPolymerbower initThis will create a bower.json file in the project working directory.
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
TestPolymer directory using the command stated below:We are all set with the environment and ready to render FusionCharts in the Polymer JS application.
Create an index.html file in the TestPolymer directory. Once done follow the steps mentioned below :
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"></script>
<link rel="import" href="element/polymer-fusioncharts.html">
<h3 align="center">This is our main Polymer Application integrating FusionCharts</h3> <polymer-fusioncharts></polymer-fusioncharts>
Once we are done with the four steps mentioned above, our index.html file is ready with its code implementation.
We are all set with our index.html file. Also, we 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:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<script src="/bower_components/fusioncharts/fusioncharts.js"></script> <script src="/bower_components/fusioncharts/fusioncharts.charts.js"></script> <script src="/bower_components/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
// Your new element extends the Polymer.Element base class
class ChartElement extends Polymer.Element {
static get is() { return 'polymer-fusioncharts'; }
constructor() {
super();
this.textContent = "Rendering the chart using the Polymer custom element(containing the chart)";
this.style = "align: center";
var iDiv = document.createElement('div');
iDiv.id = 'chart-container';
document.getElementsByTagName('body')[0].appendChild(iDiv);
FusionCharts.ready(function () {
var conversionChart = new FusionCharts({
type: 'bubble',
renderAt: 'chart-container',
width: '100%',
height: '550',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Popular Text Editors - 2016",
"captionFontSize": "20",
"captionPadding": "20",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "10",
"xAxisName": "Customer Satisfaction",
"yAxisName": "Market Presence Rating{br}(Out of 10)",
"xAxisNameFontSize": "12",
"yAxisNameFontSize": "12",
"numDivlines": "9",
"bubbleScale": "1",
"showValues": "1",
"divLineColor": "#72D7B2",
"plotFillHoverColor": "#98e6e6",
"plotTooltext": "$name{br}Overall Rating - $zvalue",
//Drawing quadrants on chart
"drawQuadrant" : "1",
"quadrantLineAlpha" : "50",
"quadrantLineThickness" : "1"
},
"categories": [
{
"category": [
{
"label": "0",
"x": "0"
},
{
"label": "25 %",
"x": "25",
"showverticalline": "1"
},
{
"label": "50 %",
"x": "50",
"showverticalline": "1"
},
{
"label": "75 %",
"x": "75",
"showverticalline": "1"
},
{
"label": "100 %",
"x": "100",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"color":"#00aee4",
"data": [
{
"x": "78",
"y": "7.4",
"z": "8",
"name": "Dreamweaver",
"color": "#d35f61"
},
{
"x": "92",
"y": "5.1",
"z": "9.2",
"name": "Sublime Text",
"color": "#86bb5d"
},
{
"x": "60",
"y": "5",
"z": "6",
"name": "Brackets",
"color": "#ffbb99"
},
{
"x": "59",
"y": "3.1",
"z": "5",
"name": "TextPad",
"color": "#ce99ff"
},
{
"x": "9",
"y": "1.8",
"z": "3",
"name": "Elvis",
"color": "#7d9bcf"
},
{
"x": "83",
"y": "4",
"z": "7.4",
"name": "Atom",
"color": "#e19951"
},
{
"x": "93",
"y": "3.6",
"z": "8.3",
"name": "Notepad++",
"color": "#8a8f8f"
},
{
"x": "29",
"y": "3.8",
"z": "5",
"name": "G Edit",
"color": "#d4cb11"
},
{
"x": "45",
"y": "2.5",
"z": "8",
"name": "Edit+",
"color": "#c8c8c8"
},
{
"x": "47",
"y": "3.8",
"z": "4",
"name": "VIM Edit",
"color": "#b27666"
}
]
}
],
"vTrendLines": [
{
"line": [
{
"startValue": "50",
"endValue": "75",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
},
{
"startValue": "75",
"endValue": "100",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "21"
},
{
"startValue": "25",
"endValue": "50",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}
]
}
]
}
}).render();
});
}
}
//Now, register your new custom element so the browser can use it
customElements.define(ChartElement.is, ChartElement);
</script>
An optional <template> tag can also be added to the custom element if you want to provide any additional content to the file.
<template>
<style>
</style>
<h4 align="center">Rendering the chart using the Polymer custom element(containing the chart)</h4>
</template>
With this, the polymer-fusioncharts.html custom element is ready to be used in index.html. Therefore, you can import and add <polymer-fusioncharts></polymer-fusioncharts> which we have already discussed while creating the index.html file.
The project is ready but to run the application. However, you have to start the Polymer server using the following command in the terminal:
polymer serve
The above command will start the server. To get the output on the screen, hit the URL displayed in the Cmder.
Check out the final output after hitting the URL (https://127.0.0.1:8081):
If you find any difficulty in rendering the chart or you see any error in your code, click here. You will be able to download the complete source code of the sample project we created for this tutorial.
If you can’t see the chart, check that:
You can build complex web applications easily with Angular. But it’s a challenge to present…
JavaScript charts help transform raw data into clear, interactive visualizations that users can easily understand.…
Modern web applications depend on data visualization to transform complex information into clear, actionable insights.…
Data is a big part of modern software. Companies use charts to track sales, monitor…
Every day, businesses get more data than ever before. Looking at endless rows and columns…
Building interactive React charts from scratch can quickly become complicated. It becomes even more challenging…
