At present, data visualization has become a very important part of data science. Data generated in different network systems need to be properly visualized so that it can be better presented to users for reading and analysis.

For any organization, sufficient access to data, visualization of data, and analysis of data can greatly help to understand the underlying causes of data, so that the right decisions can be made accordingly.

Mastering data visualization in interactive web pages is a great skill for front-end developers. Of course, it’s also easier to visualize data on the front end through some JavaScript charting libraries. Using these libraries, developers can easily convert data into easy-to-understand diagrams without considering the programming challenges of different syntax.

Here are nine selected JavaScript diagramming libraries:

• Chart.js
• Chartist
• FlexChart
• Echarts
• NVD3
• C3.js
• TauCharts
• ReCharts
• Flot 

Chart.js

Chart.js is a concise, user-friendly Chart library, as well as an HTML5-based JavaScript library for creating animated, interactive and customizable charts and graphics.

With chart.js, users can easily and intuitively view mixed Chart types. By default, you can also create responsive web pages using chart.js.

The chart.js library allows users to quickly create visual data. Chart.js is easy to set up and very beginner friendly. With chart.js you don’t have to worry about browser compatibility because chart.js supports older browsers.

Install chart.js using NPM:

npm install chart.js –save 

Chart.js sample code for drawing radar charts:

const ctx = document.getElementById("myChart"); const options = { scale: { // Hides the scale } }; Const data = {labels: ['Running', 'Swimming', 'Eating', 'Cycling'], datasets: [{data: labels = 'Running', 'Swimming', 'Eating', 'Cycling'] [-10, -5, -3, -15], label: "two", borderColor: '# ffC63b '}, {data: [10, 5, 3, 10], label: "three", borderColor: '#1d9a58' }, { data: [18, 10, 4, 2], label: "one", borderColor: '#d8463c' }, ] } const myRadarChart = new Chart(ctx, { data: data, type: 'radar', options: options });Copy the code

Chartist

The Chartist library is ideal for creating beautiful, responsive and readable charts. Chartist uses SVG to render diagrams.

Chartist also provides the ability to customize charts using CSS media queries and creative animations. Users use Chartist to implement all their creative ideas in graphic design.

Chartist is easy to configure and to customize using Sass. However, it does not support older browsers.

Using Chartist, you can beautify your SVG with CSS styles, allowing users to visualize all the graphic styles they want.

Install Chartist using NPM:

npm install chartist –save 

Chartist Example of code for creating a pie chart with custom labels:

var data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]
};
var options = {
  labelInterpolationFnc: function(value) {
    return value[0]
  }
};
var responsiveOptions = [
  ['screen and (min-width: 640px)', {
    chartPadding: 30,
    labelOffset: 130,
    labelDirection: 'explode',
    labelInterpolationFnc: function(value) {
      return value;
    }
  }],
  ['screen and (min-width: 1024px)', {
    labelOffset: 80,
    chartPadding: 20
  }]
];
new Chartist.Pie('.ct-chart', data, options, responsiveOptions);Copy the code

Grape City Tech Team blog
Web front end

Nine JavaScript chart libraries commonly used by front-end developers

Grape City technical team
The front-end development
JavaScript chart library

At present, data visualization has become a very important part of data science. Data generated in different network systems need to be properly visualized so that it can be better presented to users for reading and analysis.

For any organization, sufficient access to data, visualization of data, and analysis of data can greatly help to understand the underlying causes of data, so that the right decisions can be made accordingly.

Mastering data visualization in interactive web pages is a great skill for front-end developers. Of course, it’s also easier to visualize data on the front end through some JavaScript charting libraries. Using these libraries, developers can easily convert data into easy-to-understand diagrams without considering the programming challenges of different syntax.

Here are nine selected JavaScript diagramming libraries:

• Chart.js
• Chartist
• FlexChart
• Echarts
• NVD3
• C3.js
• TauCharts
• ReCharts
• Flot 

Chart.js

Chart.js is a concise, user-friendly Chart library, as well as an HTML5-based JavaScript library for creating animated, interactive and customizable charts and graphics.

With chart.js, users can easily and intuitively view mixed Chart types. By default, you can also create responsive web pages using chart.js.

The chart.js library allows users to quickly create visual data. Chart.js is easy to set up and very beginner friendly. With chart.js you don’t have to worry about browser compatibility because chart.js supports older browsers.

Install chart.js using NPM:

npm install chart.js –save 

Chart.js sample code for drawing radar charts:

const ctx = document.getElementById("myChart"); const options = { scale: { // Hides the scale } }; Const data = {labels: ['Running', 'Swimming', 'Eating', 'Cycling'], datasets: [{data: labels = 'Running', 'Swimming', 'Eating', 'Cycling'] [-10, -5, -3, -15], label: "two", borderColor: '# ffC63b '}, {data: [10, 5, 3, 10], label: "three", borderColor: '#1d9a58' }, { data: [18, 10, 4, 2], label: "one", borderColor: '#d8463c' }, ] } const myRadarChart = new Chart(ctx, { data: data, type: 'radar', options: options });Copy the code

Chartist

 

The Chartist library is ideal for creating beautiful, responsive and readable charts. Chartist uses SVG to render diagrams.

Chartist also provides the ability to customize charts using CSS media queries and creative animations. Users use Chartist to implement all their creative ideas in graphic design.

Chartist is easy to configure and to customize using Sass. However, it does not support older browsers.

Using Chartist, you can beautify your SVG with CSS styles, allowing users to visualize all the graphic styles they want.

Install Chartist using NPM:

npm install chartist –save 

Chartist Example of code for creating a pie chart with custom labels:

var data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]
};
var options = {
  labelInterpolationFnc: function(value) {
    return value[0]
  }
};
var responsiveOptions = [
  ['screen and (min-width: 640px)', {
    chartPadding: 30,
    labelOffset: 130,
    labelDirection: 'explode',
    labelInterpolationFnc: function(value) {
      return value;
    }
  }],
  ['screen and (min-width: 1024px)', {
    labelOffset: 80,
    chartPadding: 20
  }]
];
new Chartist.Pie('.ct-chart', data, options, responsiveOptions);Copy the code

FlexChart

FlexChart is a high-performance charting tool. Using FlexChart, you can easily visualize tabular data into business charts. FlexChart supports not only common chart types such as line charts, pie charts, and area charts, but also advanced chart types such as bubble charts, K-charts, bar charts, and funnel charts.

It is also very easy to use FlexChart. FlexChart entrusts all tasks related to data to CollectionView class. It only needs to operate CollectionView class to realize the functions of filtering, sorting and grouping data.

FlexChart also includes a comprehensive set of chart elements, such as chart legends, chart titles, chart footers, number lines, chart series, and labels. Users can also add custom elements to charts, such as averages and trends.

FlexChart is essentially an interactive chart. Any changes made to the data are automatically reflected on the chart, such as curves zooming in and out with the data, filtering, drilling, animation, etc.

Check out FlexChart’s Chinese learning Guide and rising Sun Demo.

Examples of code for drawing a bar chart in FlexChart:

onload = function() { // wrap data in a CollectionView so the grid and chart // get notifications var data = new wijmo.collections.CollectionView(getData()); // create the chart var theChart = new wijmo.chart.FlexChart('#theChart', { itemsSource: data, bindingX: 'country', series: [ { binding: 'sales', name: 'Sales' }, { binding: 'expenses', name: 'Expenses' }, { binding: 'downloads', name: 'Downloads' } ] }) // create a grid to show the data var theGrid = new wijmo.grid.FlexGrid('#theGrid', { itemsSource: data }) // create some random data function getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000), }); } return data; }}Copy the code

Echarts

Echarts is a very useful library for data visualization of web pages. With Echarts, developers can create intuitive, customizable interactive charts that make it easy to present and analyze data.

Because Echarts is written in plain JavaScript, it doesn’t have the same seamless migration problems that other chart inventories have.

Echarts also provides many official documents for users to view.

Using NPM, Echarts can be easily installed:

npm install echarts –save 

Echarts draw scatter diagram code example:

var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; option = { title: { text: 'Large-scale scatterplot' }, tooltip : { trigger: 'axis', showDelay : 0, axisPointer:{ show: true, type : 'cross', lineStyle: { type : 'dashed', width : 1 } }, zlevel: 1 }, legend: { data:['sin','cos'] }, toolbox: { show : true, feature : { mark : {show: true}, dataZoom : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'value', scale:true } ], yAxis : [ { type : 'value', scale:true } ], series : [ { name:'sin', type:'scatter', large: true, symbolSize: 3, data: (function () { var d = []; var len = 10000; var x = 0; while (len--) { x = (Math.random() * 10).toFixed(3) - 0; D.p ush ([x, / / Math. The random () * 10 (Math. Sin (x) - x * (0.1: len % 2? - 0.1) * Math. The random ()). ToFixed (3) - 0]);} / / console log (d) return d;}) ()}, {name: 'cos' type:' scatter 'large: true, symbolSize: 2, data: (function () { var d = []; var len = 20000; var x = 0; while (len--) { x = (Math.random() * 10).toFixed(3) - 0; D.p ush ([x, / / Math. The random () * 10 (Math. Cos (x) - x * (0.1: len % 2? - 0.1) * Math. The random ()). ToFixed (3) - 0]);} / / console log (d) return d;}) ()}}; ; if (option && typeof option === "object") { myChart.setOption(option, true); }Copy the code

NVD3

NVD3 is a D3-based JavaScript library written by Mike Bostock. NVD3 allows users to create beautiful, reusable charts in Web applications.

NVD3 has a powerful charting function, which makes it easy to create box charts, rising sun charts, candlestick charts, etc. NVD3 is recommended for users who want to use a lot of power in their JavaScript charting library

The speed of the NVD3 chart library can sometimes be an issue and can be faster when used with a Fastdom installation.

NVD3 draw a simple line chart code example:

/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */ nv.addGraph(function() {  var chart = nv.models.lineChart() .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room. .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .transitionDuration(350) //how fast do you want the lines to transition? .showLegend(true) //Show the legend, allowing users to turn on/off line series. .showYAxis(true) //Show the y-axis .showXAxis(true) //Show the x-axis ; chart.xAxis //Chart x-axis settings .axisLabel('Time (ms)') .tickFormat(d3.format(',r')); chart.yAxis //Chart y-axis settings .axisLabel('Voltage (v)') .tickFormat(d3.format('.02f')); /* Done setting the chart up? Time to render it! */ var myData = sinAndCos(); //You need data... d3.select('#chart svg') //Select the <svg> element you want to render the chart in. .datum(myData) //Populate the <svg> element with chart data... .call(chart); //Finally, render the chart! //Update the chart when window resizes. nv.utils.windowResize(function() { chart.update() }); return chart; }); /************************************** * Simple test data generator */ function sinAndCos() { var sin = [],sin2 = [], cos = []; //Data is represented as an array of {x,y} pairs. for (var i = 0; i < 100; i++) { sin.push({x: i, y: Math.sin(i/10)}); Sin2. Push ({x: (I), y: Math. Sin (I / 10) * 0.25 + 0.5}); cos.push({x: i, y: .5 * Math.cos(i/10)}); } //Line chart data should be sent as an array of series objects. return [ { values: sin, //values - represents the array of {x,y} data points key: 'Sine Wave', //key - the name of the series. color: '#ff7f0e' //color - optional: choose your own line color. }, { values: cos, key: 'Cosine Wave', color: '#2ca02c' }, { values: sin2, key: 'Another sine wave', color: '#7777ff', area: true //area - set to true if you want this line to turn into a filled area chart. } ]; }Copy the code

C3.js

Like TauCharts, C3.js is a very effective D3-based chart visualization library. In addition, c3.js allows users to create customizable classes with a personal style.

C3.js may seem like a difficult library, but once you’ve mastered the c3.js technique, you’ll be able to use it with ease.

With the C3.js chart library, users can update charts by creating callbacks even after the first rendering. C3.js also allows users to create reusable charts for their Own Web applications, thereby reducing the workload.

Install c3.js chart library with NPM:

npm install c3 

Sample code for c3.js to draw composite diagrams:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 20, 50, 40, 60, 50],
            ['data2', 200, 130, 90, 240, 130, 220],
            ['data3', 300, 200, 160, 400, 250, 250],
            ['data4', 200, 130, 90, 240, 130, 220],
            ['data5', 130, 120, 150, 140, 160, 150],
            ['data6', 90, 70, 20, 50, 60, 120],
        ],
        type: 'bar',
        types: {
            data3: 'spline',
            data4: 'line',
            data6: 'area',
        },
        groups: [
            ['data1','data2']
        ]
    }
});Copy the code

TauCharts

TauCharts is one of the most flexible JavaScript charting libraries out there. Created based on D3, it is a data-centric JavaScript charting library that improves data visualization.

TauCharts is flexible and easy to access its API. TauCharts provides users with seamless mapping and visualization of data, making it possible to design a very beautiful data interface using TauCharts. TauCharts is also easy to learn.

Install TauCharts via NPM:

npm install taucharts 

TauCharts Examples of code for drawing horizontal lines:

var defData = [
        {"team": "d", "cycleTime": 1, "effort": 1, "count": 1, "priority": "low"}, {
            "team": "d",
            "cycleTime": 2,
            "effort": 2,
            "count": 5,
            "priority": "low"
        }, {"team": "d", "cycleTime": 3, "effort": 3, "count": 8, "priority": "medium"}, {
            "team": "d",
            "cycleTime": 4,
            "effort": 4,
            "count": 3,
            "priority": "high"
        }, {"team": "l", "cycleTime": 2, "effort": 1, "count": 1, "priority": "low"}, {
            "team": "l",
            "cycleTime": 3,
            "effort": 2,
            "count": 5,
            "priority": "low"
        }, {"team": "l", "cycleTime": 4, "effort": 3, "count": 8, "priority": "medium"}, {
            "team": "l",
            "cycleTime": 5,
            "effort": 4,
            "count": 3,
            "priority": "high"
        },
        {"team": "k", "cycleTime": 2, "effort": 4, "count": 1, "priority": "low"}, {
            "team": "k",
            "cycleTime": 3,
            "effort": 5,
            "count": 5,
            "priority": "low"
        }, {"team": "k", "cycleTime": 4, "effort": 6, "count": 8, "priority": "medium"}, {
            "team": "k",
            "cycleTime": 5,
            "effort": 8,
            "count": 3,
            "priority": "high"
        }];
var chart = new tauCharts.Chart({
            data: defData,
            type: 'horizontalBar',           
            x: 'effort',
            y: 'team',
            color:'priority'
        });
chart.renderTo('#bar');Copy the code

Recharts

ReCharts is a D3-based chart library built using React.

Using ReCharts, users can write charts seamlessly within the React Web application.

Recharts is very lightweight and uses SVG elements to create fancy charts.

Install Recharts using NPM:

npm install recharts 

Recharts doesn’t have long documentation, it’s straightforward. When you get stuck, using Recharts makes it easy to find a solution.

Examples of code for creating custom content tree charts by Recharts:

const {Treemap} = Recharts; const data = [ { name: 'axis', children: [ { name: 'Axes', size: 1302 }, { name: 'Axis', size: 24593 }, { name: 'AxisGridLine', size: 652 }, { name: 'AxisLabel', size: 636 }, { name: 'CartesianAxes', size: 6703 }, ], }, { name: 'controls', children: [ { name: 'AnchorControl', size: 2138 }, { name: 'ClickControl', size: 3824 }, { name: 'Control', size: 1353 }, { name: 'ControlList', size: 4665 }, { name: 'DragControl', size: 2649 }, { name: 'ExpandControl', size: 2832 }, { name: 'HoverControl', size: 4896 }, { name: 'IControl', size: 763 }, { name: 'PanZoomControl', size: 5222 }, { name: 'SelectionControl', size: 7862 }, { name: 'TooltipControl', size: 8435 }, ], }, { name: 'data', children: [ { name: 'Data', size: 20544 }, { name: 'DataList', size: 19788 }, { name: 'DataSprite', size: 10349 }, { name: 'EdgeSprite', size: 3301 }, { name: 'NodeSprite', size: 19382 }, { name: 'render', children: [ { name: 'ArrowType', size: 698 }, { name: 'EdgeRenderer', size: 5569 }, { name: 'IRenderer', size: 353 }, { name: 'ShapeRenderer', size: 2247 }, ], }, { name: 'ScaleBinding', size: 11275 }, { name: 'Tree', size: 7147 }, { name: 'TreeBuilder', size: 9930 }, ], }, { name: 'layout', children: [ { name: 'AxisLayout', size: 6725 }, { name: 'BundledEdgeRouter', size: 3727 }, { name: 'CircleLayout', size: 9317 }, { name: 'CirclePackingLayout', size: 12003 }, { name: 'DendrogramLayout', size: 4853 }, { name: 'ForceDirectedLayout', size: 8411 }, { name: 'IcicleTreeLayout', size: 4864 }, { name: 'IndentedTreeLayout', size: 3174 }, { name: 'Layout', size: 7881 }, { name: 'NodeLinkTreeLayout', size: 12870 }, { name: 'PieLayout', size: 2728 }, { name: 'RadialTreeLayout', size: 12348 }, { name: 'RandomLayout', size: 870 }, { name: 'StackedAreaLayout', size: 9121 }, { name: 'TreeMapLayout', size: 9191 }, ], }, { name: 'Operator', size: 2490 }, { name: 'OperatorList', size: 5248 }, { name: 'OperatorSequence', size: 4190 }, { name: 'OperatorSwitch', size: 2581 }, { name: 'SortOperator', size: 2023},],}]; const COLORS = ['#8889DD', '#9597E4', '#8DC77B', '#A5D297', '#E2CF45', '#F8C12D']; const CustomizedContent = React.createClass({ render() { const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props; return ( <g> <rect x={x} y={y} width={width} height={height} style={{ fill: depth < 2 ? colors[Math.floor(index / root.children.length * 6)] : 'none', stroke: '#fff', strokeWidth: 2 / (depth + 1e-10), strokeOpacity: 1 / (depth + 1e-10), }} /> { depth === 1 ? <text x={x + width / 2} y={y + height / 2 + 7} textAnchor="middle" fill="#fff" fontSize={14} > {name} </text> : null } { depth === 1 ? < text x = {x + 4} y = {y + 18} the fill = "# FFF" fontSize = {16} fillOpacity = > {0.9} {index + 1} < / text > : null} > < / g); }}); const SimpleTreemap = React.createClass({ render () { return ( <Treemap width={400} height={200} data={data} dataKey="size" ratio={4/3} stroke="#fff" fill="#8884d8" content={<CustomizedContent colors={COLORS}/>} /> ); } }) ReactDOM.render( <SimpleTreemap />, document.getElementById('container') );Copy the code

Flot

JQuery has become a very important tool for Web developers. With flot.js, front-end design is also much easier.

Flot.js is one of the older charting libraries in JavaScript libraries. However, lot.js does not degrade its performance by drawing line, pie, bar, area, or even stack charts.

Flot.js is well documented. When users encounter difficulties, they can easily find solutions. Flot.js also supports older browsers.

Instead of using NPM to install flot.js, you can choose to include jQuery and JavaScript files in HTML5.

Examples of basic usage code for flot.js:

$(function () { var d1 = []; for (var i = 0; i < 14; I += 0.5) d1.push([I, math.sin (I)]); var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // a null refrigerated separate line segments var 2 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot($("#placeholder"), [ d1, d2, d3 ]); });Copy the code

JavaScript development tools are recommended

SpreadJS is an HTML5-based JavaScript spreadsheet and grid control that provides a complete formula engine, sorting, filtering, input controls, data visualization, Excel import/export, and more. For.net, Java and mobile terminal and other platforms online editing Excel function of the form program development.

conclusion

The JavaScript libraries described above are all high quality chart libraries. However, while learning these libraries may be difficult due to a steep learning curve or lack of learning materials, a good solution is to use these libraries together. You are also welcome to add more JavaScript diagramming libraries.

Refer to the article: https://dzone.com/articles/top-9-javascript-charting-libraries

Reproduced please indicate from: Grape city control

About Grape Town

Founded in 1980, Grape City is the world’s largest provider of controls and the world’s leading provider of customized tools for enterprise applications, enterprise reporting and business intelligence solutions, serving more than 75% of the global Fortune 500 companies. Winestown established a research and development center in China in 1988. In the process of developing global products, winestown constantly ADAPTS to the local needs of the Chinese market, and provides excellent software tools and consulting services for the informatization of software enterprises and all industries.

Originally published: December 19, 2017 by Grape City technology team

This article source: open source China for reprint please contact the original author