Pure JavaScript Chart Component Dhtmlxchart

Dhtmlxchart is also a JavaScript-based charting application component, similar to the previously shared Xcharts, Dhtmlxchart also offers a very rich chart type, which should say it offers more chart types than Xcharts, including pie charts, radar charts, Discrete point graphs and more complex chart types. Dhtmlxchart offers an open source version, but its commercial version needs more than $49, a little expensive.

configuration of the Dhtmlxchart

The installation can be completed by referencing the relevant JS script and CSS files on the DHTMLX page:

<link rel= "stylesheet" type= "Text/css" href= ". /.. /.. /codebase/dhtmlx.css "/><script src=". /.. /.. /codebase/dhtmlx.js "></script>

The path requires your own modification.

In addition, Dhtmlxchart provides 4 data source formats that support XML, JSON, CSV, and JS arrays, with XML as an example:

Window.onload = function () {        var barchart =  New Dhtmlxchart ({            view: "Bar",            container: "Chartdiv",            Value: "#sales #",            gradient: "Falling",            color: "#b9a8f9",            radius:0,            alpha:0.5,            border:true,            width:70,            xaxis:{                Template: "#year #"            },            yaxis:{                start:0,                end:100,                step : Ten,                template:function (obj) {                    return (obj%20? "": O BJ)                }            }        )        barchart.load (".. /common/data.xml ");}

Dhtmlxchart Column Chart generation

Window.onload = function () {var barChart1 =  New Dhtmlxchart ({view: "Bar", Container: "Chart1",    value: "#sales #",        Label: "' #year #",        barwidth:35,        radius:0,        gradient: "Rising"}) Barchart1.parse (DataSet, "JSON"); Barchart1.attachevent ("Onitemclick", function (ID) {alert (ID)}) var barChart2 =  New Dhtmlxchart ({view: "Bar", Container: "Chart2",    value: "#sales #",        Label: "' #year #",        color: "#66ccff",        gradient: "Rising",        barwidth:25,        padding:{            top:50,            bottom:0,            right:50,            left:50        }}); Barchart2.parse (DataSet, "JSON");}

The JSON data format is used here.

As follows:

Dhtmlxchart Radar Point graph generation

var chart =  New Dhtmlxchart ({            container: "Chartdiv",            View: "Radar", Value: "#companyA #",            Disablelines : true,item:{                borderwidth:0,                radius:2,color: "#6633ff"},xaxis:{template: "#month #"},yaxis:{lineshape: "Arc ",                bg:" #fff8ea ",                template:function (value) {                    return parsefloat (value). toFixed (1)}}        );        Chart.parse (Companies, "JSON");

As follows:

Dhtmlxchart Discrete point graph generation

Chart =  New Dhtmlxchart ({            view: "Scatter", Container: "Chartdiv",    value: "#b #", XValue: "#a #",            yaxis:{                Title: "Value B"            },            xaxis:{                title: "Value A"            },            tooltip:{              Template: "#a #-#b #"            },            item:{                radius:5,                bordercolor: "#f38f00",                borderwidth:1,                color: "#ff9600",                type: "D ",                shadow:true            }        }); Chart.parse (Scatter_dataset," json ");

As follows:

Other types of chart use is similar, Dhtmlxchart the biggest feature is the most popular data format to support the data as a chart, so that our developers are very convenient to use, you can try the Dhtmlxchart open source free version.

Pure JavaScript Chart Component Dhtmlxchart