Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.webix.com/desktop__chart_integration.html below:

Chart Integration - Third-party charts integration guide. Webix Docs

Intermediate

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

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

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

Except for the built-in charts, 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 the cdn 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 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.

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 the getChart() method:

D3 API configuration has its peculiarities, see the details below.

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

The method has the optional waitChart parameter. If it is set tu true, 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

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

<script type="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.

To receive access to the general selection object of a D3 element, use the getSelection() method:

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

The method has one parameter - wait. If it is true, 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

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

<script type="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

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

<script type="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 the Raphaë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

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

<script type="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 used plugin. By default, the Webix-integrated Sigma chart uses the FishEye plugin described in the tutorial on Sigma 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 our Github package you will also find the forceAtlas2 Sigma plugin. Besides, you can write your own plugin, place it into the plugin folder and include it into the sigma-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

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

<script type="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 the FusionCharts site.

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

Related sample:  Highcharts

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

<script type="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
        }
    });
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4