Intermediate

Chart Integration

How to Include

JS files for these components aren't included in the lib package and should be taken:

<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>

Except for built-in charts, Webix offers a possibility to integrate with third-party charts of the following libraries:

Note that third-party scripts are included to documentation samples in another way, but you should follow the linking pattern described below.

Setting Path to the Component

You can set path to sources of the necessary chart on CDN. Actually, there are three ways to do that:

  • via the cdn property in the view configuration. This way allows setting path to the particular version of the necessary library or to the local CDN;
  • not setting any paths at all. In this case either the official CDN of the component or the global cdnjs (if the source of the component is available there) will be used;
  • by directly including all the source files of the component on a page. In this case you should set the cdn property to false to avoid possible collisions with the component version included by default.

D3 Charts

D3 charts helps manipulate documents based on data and offers powerful visualization tools and a data-driven approach to DOM manipulation.

One of its implementations, Bubble chart, displays data in the area of circles that pack hundreds of values into a small space. It looks like a bundle of multicolored balloons.

Related sample:  D3 Bubble Chart

Component Initialization

Firstly, you should include D3 JS file from the package into your document in addition to Webix files:

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

And then init the view:

webix.ui({
    view:"d3-chart", 
    url:"...", 
    ready:function(){...}; 
});
  • 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 code of the needed chart (available on their site).

JustGage Gauges

JustGage JS is a handy JavaScript plugin for generating and animating nice gauges. It is based on Raphaël library for vector drawing.

Related sample:  JustGage Chart

Component Initialization

Firstly, you should include JustGage JS file from the package into your document in addition to Webix files:

<script type="text/javascript" src="./justgage.js"></script>
<!-- Raphael JS will be autoloaded -->

And then initialize the view:

webix.ui({
    view:"justgage-chart",
    value:25,
    title:"Positive",
    height:300,
    min: 0,
    max: 100
});
  • Full list of a JustGage gauge object properties can be found on their site.

Raphaël Charts

Raphaël JS library offers a number of visualization tools that help working with with vector graphics on the web.

For instance, its dot chart encodes data in the area of circles placed on the coordinate system.

Related sample:  Raphael Chart

Component Initialization

Firstly, you should include Raphaël JS file from the package into your document in addition to Webix files:

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

And then init the view:

webix.ui({
    view:"raphael-chart", 
    url:"...",
    ready:function(){...};
});
  • url - specifies data source for the chart (data file or script);
  • ready - function that is triggered when the component is fully loaded. It contains the chart's source code available on the Raphaël library site.

Sigma Charts

Sigma is JS library that aids in drawing graphs using the HTML canvas element. It offers several graph types.

Related sample:  Sigma Chart

Component Initialization

Firstly, you should include Sigma JS files from the package into your document in addition to Webix files:

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

And then initialize the view:

webix.ui({
    view:"sigma-chart", 
    url:"./data/les_miserables.gexf"
});
  • URL property specifies a path to a data file or script that will generate data.

The look-and-feel of a Sigma chart is defined by a currently used plugin. By default, Webix-integrated Sigma chart uses FishEye plugin described in a tutorial on Sigma JS site. At the same time, you can easily change the plugin within the component source code in a private _after_render() function:

_render_once:function(){
    webix.require([
        "sigma/sigma.js", //sigma lib file 
        "sigma/plugins/sigma.parseGexf.js", //GEXF extension
        "sigma/plugins/sigma.fisheye.js" //plugin
   ],function(first_init){ ...}); //chart initializing
}

In our Github package you'll also find forceAtlas2 Sigma plugin as well as you can write your own one and place it to the plugin folder and include into the sigma-chart Webix component in the way described above.

In addition, the support for GEXF data is provided by default.

FusionCharts

FusionCharts is a JavaScript library that provides a wide range of charting solutions for web and mobile applications.

Related Sample: FusionChart

Component Initialization

Firstly, you should include Sigma JS files from the package into your document in addition to Webix files:

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

And then initialize the view:

webix.ui({
    view:"fusion-chart", 
    config: {
     // chart config
    }
});
  • config - specifies the chart configuration. The available configuration parameters can be found on the FusionCharts site.
Back to top