Chart Integration

JS files for these components are not included in the library package and should be taken:

• either from Githubhttps://github.com/webix-hub/components
• or included from CDN as:

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

Except for the built-incharts, Webix offers a possibility to integrate third-party charts from the following libraries:

• D3 JS Library
• JustGage Javascript Plugin
• Raphael JavaScript Library
• SigmaJS Library
• FusionCharts Library
• Highcharts Library

Note in the package samples third-party scripts are included in another way, but you should follow the linking pattern described further and shown in the snippets attached.

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

• via thecdn property in the view configuration. This way allows setting the path to the particular version of the necessary library or to the local CDN
• not setting any paths at all. In this case, either theofficial CDN of the component or theglobalcdnjs (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 thecdn property tofalse to avoid possible collisions with the component version included by default.

Each third-party chart has its API. If you want to use it to configure a chart, get the chart object with the help of thegetChart() method:

const chart= $$("gage1").getChart();

The method has the optionalwaitChart parameter. If it is set tutrue, the method returns a promise, which allows you to wait till the chart is ready and then use its properties. For example:

$$("gage1").getChart(true).then(function(chart){//  chart is the chart object});

You can find the links to the API of each chart in the sections below.

D3 charts helps to 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 circles that pack hundreds of values into a small space.

Related sample: D3 Bubble Chart

Component Initialization

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

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

Next, initialize 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.

Using D3 API

To receive access to the generalselection object of a D3 element, use thegetSelection() method:

$$("myD3").getSelection(true).then(function(selection){//  selection is the selection object});

The method has one parameter -wait. If it istrue, the method returns a promise of the selection object, otherwise (when the parameter is not passed) the method returns the selection object at once.

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

Related sample: JustGage Chart

Component Initialization

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

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

Next, initialize the view:

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

Raphaël JS library offers visualization tools that help to work with vector graphics on the web.

For instance, the dot chart shows data as circles placed on the coordinate system.

Related sample: Raphael Chart

Component Initialization

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

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

Next, initialize the view:

webix.ui({    view:"raphael-chart",     url:"...",    ready:function(){/*...*/};});

• url - specifies the data source for the chart (data file or script)
• ready - the function that is triggered when the component is fully loaded. It contains the chart source code available on theRaphaël library site.

Sigma is a JS library that is used to draw graphs using the HTML canvas element. It offers several graph types.

Related sample: Sigma Chart

Component Initialization

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

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

Next, initialize the view:

webix.ui({    view:"sigma-chart",     url:"./data/les_miserables.gexf"});

• url property specifies the path to a data file or a script that will generate data.

The look-and-feel of a Sigma chart is defined by the currently usedplugin. By default, the Webix-integrated Sigma chart uses theFishEye plugin described in the tutorial onSigma JS site. At the same time, you can easily change the plugin within the component source code in a private_render_once() 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 ourGithub package you will also find theforceAtlas2 Sigma plugin. Besides, you can write your own plugin, place it into the plugin folder and include it into thesigma-chart Webix component in the way described above.

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

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

Related Sample:FusionChart

Component Initialization

First, you should include the FusionCharts files from the package into your document in addition to the Webix files:

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

Next, initialize the view:

webix.ui({    view:"fusion-chart",     config:{// chart config}});

• config - specifies the chart configuration. The available configuration parameters can be found on theFusionCharts site.

Highcharts is anSVG-based multi-platform charting library that makes it easy to add interactive, mobile-optimized charts to web and mobile projects.

Related sample: Highcharts

Component Initialization

First, you should include the Highcharts file from the package into your document in addition to the Webix files:

<scripttype="text/javascript"src="./hcharts.js"></script>

Next, initialize the view:

webix.ready(function(){    webix.ui({        view:"highchart",        modules:[],// array of desired extra modules        settings:{// chart config}});});