Blog

Integration with Third-Party Charts

It’s common knowledge that chart is a convenient tool for arranging and manipulating information. Charts can present large amounts of data in a simple schematic way. Keeping up with the times, Webix Library offers a possibility to integrate with popular charts of such Javascript libraries as D3, Raphael, Sigma and JustGage. At the same time, Webix has a collection of its own charts.

Building Chart View

You don’t need to write a lot of code in order to add third-party charts into a Webix application since it’s done with the help of dedicated Webix components.

However, these components aren’t included into the default lib package, so you have to download a JS file for the needed component from Webix open repository of helpers.

This special javascript file will connect your app to the necessary chart and autoload all the corresponding chart files.

The next step is to include the code file you’ve downloaded into the head section of your document. So for embedding a D3 Chart the following line should be used:

<script type="text/javascript" src="./d3.js"></script>

Then you can initialize the chart using the code below:

//path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    view:"d3-chart",
    url:"...",
    ready:function(){...};
});
charts

Constructors for Raphael, Sigma and D3 charts are almost identical. Generally, they include the following properties:

  • view – defines the name of the chart view – d3-chart, justgage-chart, raphael-chart, sigma-chart;
  • url – specifies data source for the chart (data file or script);
  • ready – function that is executed when the component is fully loaded. It contains the needed chart’s source code available on the dedicated site.

Thus we get a nice d3-chart on the page. Check its live demo.

Sigma Chart Specificity

To configure the Sigma Chart you need two of the above-mentioned properties, view and url:

//path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
view:"sigma-chart",
url:"./data/les_miserables.gexf"
});

The integrated chart supports 2 plugins for the Sigma Chart (“fisheye” and “forceAtlas2”) that are described in tutorials on their site. By default, it uses a “fisheye” one. GEXF data format is also supported.

02

View the live demo of Sigma Chart.

You can also write your own plugin and include it into the sigma-chart Webix component. For more information, see the documentation.

JustGage Chart Specificity

As for the Justgage Gauge chart, its configuration is simpler and can be defined directly in Webix component:

//path from which extra libraries are autoloaded
webix.codebase = "./";

//constructor function
webix.ui({
view:"justgage-chart",
value:25,
title:"Positive",
height:300,
min: 0,
max: 100
});

where the properties define the following:

  • value – initial chart value;
  • title – name of the chart;
  • height – height of the chart gauge;
  • min – min chart value;
  • max – max chart value
03_b

Check the live demo.

Summing up

As far as you can see, Webix way of integration with third-party charts is rather nice and simple. You need just to choose the chart you like most, add a couple of code lines and it will appear on the page. To learn more on the topic, refer to the documentation article.

Written by
The following two tabs change content below.
Olga Kustova

Olga Kustova

Front-end web developer fond of high-quality code and effective design. Is eager to share all the tips and tricks regarding Webix usage with wide audience.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on del.icio.us Vote on Reddit