Pure JavaScript chart component dhtmlxChart

Pure JavaScript chart component dhtmlxChart

DhtmlxChart is also a JavaScript-based chart application component. Similar to the previously shared xCharts, dhtmlxChart also provides a rich array of chart types. It should be said that compared with xCharts, it provides more chart types, including pie chart, radar chart, discrete chart, and more complex chart types. DhtmlxChart provides an open-source version, but its commercial version costs more than $49, which is a little expensive.

DhtmlxChart Configuration

You can install dhtmlx by referencing related JavaScript scripts and css files on the page:

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

You must modify the path yourself.

In addition, dhtmlxChart provides four data source formats, including XML, JSON, CSV, and JS arrays. Take 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:10,                template:function(obj){                    return (obj%20?"":obj)                }            }        })        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 chart 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 dot chart 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:

Similar to other types of charts, dhtmlxChart supports most popular data formats as chart data, which makes it very convenient for developers to use, you can try the dhtmlxChart open source free version.