Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Vaadin Charts for the Web Component world

By  
Jens Jansson
Jens Jansson
·
On Mar 10, 2016 12:48:00 PM
·

We’re currently building the next version of Vaadin Charts which will include a web component API in addition to the Java API. Vaadin Charts is the first chart library in the world with a comprehensive web component API. Now you can easily add charts to your web pages in a clean and familiar way. With the help of custom elements, it is as easy as writing basic HTML.

You can try it out already today with the beta releases. This is how to get started in as little as a few minutes.

Getting started

You can download Vaadin Charts 3 directly if you like, but the easiest way to get started is to use Bower. Create a new folder and install vaadin-charts within it.

$ bower install --save vaadin-charts

This will download vaadin-charts and all of its dependencies.

Creating the page

Next we need to create a page where we want to show our chart. Create a new index.html file in the same directory where you used Bower and add Vaadin Charts to it.

<!DOCTYPE html>
<html>
<head>
  <title>Charts are awesome</title>
  <link rel="import" href="bower_components/vaadin-charts/vaadin-line-chart.html">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
</head>
<body>
  <vaadin-line-chart></vaadin-line-chart>
</body>
</html>

Let’s go through the code. First we import a chart type to our project. Every chart type is a web component in itself, so you can replace vaadin-line-chart with any other chart type as well. We also import webcomponents.js which is a polyfill to make web components work in browsers which do not support them yet natively. Today that’s all browsers except Google Chrome. (To read more on Web Components see http://webcomponents.org). Lastly we add the custom element

to our page.

You can now serve the content and check it out in your browser. There are again multiple ways to do it but one of easiest is using a tool called serve and point your browser to http://localhost:3000. At this point you will get a license popup if you don't have a license installed yet.

$ serve
serving /Users/Peppe/Dev/Charts on port 3000

Configuring the chart

The chart loads up in the browser but it looks a bit empty as we haven’t configured anything to it yet. Let’s add some data.

<vaadin-line-chart>
  <title>People rocking</title>
  <data-series name="Persons">
    <data>20,25,30,40,50,65,85</data>
  </data-series>
  <y-axis>
    <title>Persons</title>
  </y-axis>
  <x-axis>
    <title>Year</title>
    <categories>2008,2009,2010,2011,2012,2013,2014</categories>
  </x-axis>
</vaadin-line-chart>

We define a title to the graph which will be shown at the top. Then we add a set of data with

defining the name of the series as well as the values. Lastly we configure the names for both x and y axis and define what the separate data points represent on the y axis.

By reloading the browser we now see a fully functional chart!

All the charts also share the same API so you can easily change one chart type to another. Just change the import and the main element type:

...
<link rel="import" href="bower_components/vaadin-charts/vaadin-column-chart.html">
...
<vaadin-column-chart>
...
</vaadin-column-chart> (3)
...

From here on it is up to you to decide what to do. You can add a second set of data by adding another <data-series>. You can hook the chart up to an external data source by using the <iron-ajax> web component. You can configure the names, styles and colors. Check out more examples of Vaadin Charts 3 for Web Components at http://demo.vaadin.com/vaadin-charts and the API at http://demo.vaadin.com/vaadin-charts-api. Documentation and broader tutorials are found in Vaadin Docs. Check also our examples on how to integrate Vaadin Charts with Angular, React, jQuery and Polymer.

<!DOCTYPE html>
<html>
<head>
  <title>Charts are awesome</title>
  <link rel="import" href="bower_components/vaadin-charts/vaadin-column-chart.html">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
</head>
<body>
  <vaadin-column-chart>
    <title>People rocking</title>
    <data-series name="Persons">
      <data>20,25,30,40,50,65,85</data>
    </data-series>
    <y-axis>
      <title>Persons</title>
    </y-axis>
    <x-axis>
      <title>Year</title>
      <categories>2008,2009,2010,2011,2012,2013,2014</categories>
    </x-axis>
  </vaadin-column-chart>
</body>
</html>

Learn more now

Jens Jansson
Jens Jansson
Product Manager at Vaadin. Vaadin developer and expert. Gamer and coder. https://www.linkedin.com/in/jjansson/ - https://twitter.com/Peppe_ - https://github.com/Peppe
Other posts by Jens Jansson