Pure JavaScript Chart Component Dhtmlxchart

Source: Internet
Author: User
Tags radar

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.