JS files for these components aren't included into the lib package and should be taken from https://github.com/webix-hub/components
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.
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 baloons.
Related sample: D3 Bubble Chart
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:
//path from which extra libraries are autoloaded
webix.codebase = "./";
webix.ui({
view:"d3-chart",
url:"...",
ready:function(){...};
});
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
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 init the view:
//path from which extra libraries are autoloaded
webix.codebase = "./";
webix.ui({
view:"justgage-chart",
value:25,
title:"Positive",
height:300,
min: 0,
max: 100
});
Raphael JS lib offers a number of viasualization 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.
Firstly, you should include Raphael 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:
//path from which extra libraries are autoloaded
webix.codebase = "./";
webix.ui({
view:"raphael-chart",
url:"...",
ready:function(){...};
});
Sigma is JS library that aids in drawing graphs using the HTML canvas element. It offers several graph types.
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 init the view:
//path from which extra libraries are autoloaded
webix.codebase = "./";
webix.ui({
view:"sigma-chart",
url:"./data/les_miserables.gexf"
});
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.
Back to top