Data visualization has become an essential part of business and business-related activities. Whether it is charts, infographics, maps or dashboards, all include information visualized in an easy-to-read manner. One advantage of modern chart-making techniques is that you don’t require special skills or knowledge to create them. As a matter of fact, it isn’t only developers, designers or programmers who know this skill. You can even make Java script charts by knowing the basics of Java and HTML5.
Data Charting Libraries for Java Script
The first thing you need to create Java script charts is a charting library. The charting library contains all sorts of designs and protocols for creating and extracting charts for data visualization. Some of them are free, such as D3 and Google Charts. You can use them for multiple purposes, but they range from basic to semi-advanced. However, you’re going to have to pay for the good stuff. AnyChart, Highcharts and amCharts are among the most comprehensive ones out there.
We will focus on AnyChart in this blog. AnyChart allows you to extensively document data and visualize it. It also has an extensive API reference and supports various chart types and demos on the code playground. Therefore, it’s a suitable option for beginners.
How to Create Java Script Charts
When creating charts, Java script allows you to input values and prepare data as you want. You can choose any variable you want and write a simple code to visualize it in a basic chart. This can be a line graph or a bar graph and entails three steps:
Preparing the Data for a JS Chart
Simple data is the best way to go. If you are handling substantial amounts of data, you will need to simplify it. Thus, data preparation is necessary. In other words, you need to create most of the popular chart types. This includes the X axis and then the Y axis. However, bar charts are even simpler since you mostly just need the Y axis, and an index or an item number. When using Java script with an array of data, you will get something like this:
// 5 data points = 5 categories for a single series
var data = [19, 24, 30, 34, 42];
// Y is these values; X is item numbers [0,1,2,3,4,5]
However, if you are using JSON/XML to transfer the data, then the data should appear like this:
[{
'x': 'Product A',
'value': 19
},{
'x': 'Product B',
'value': 24
}...]
There are many ways you can work with data and the visualization software developers describe them many times in documentations. So, if you’re curious, better to go through the relevant sections of the charting library’s documents.
You could also use Image Charts and get your charts made quite easily without any hassle.
Getting a Charting Library
It is imperative to choose the right library. If you will utilize charts locally, you can download the binary package of the chart. However, if you want to make graphs for web apps or a website, opt for a CDN. Image Charts offer plenty of features like it can fetch the files from the closest server to the client. Ultimately, this will give you a faster loading speed and better performance for the page.
The code will look something like this:
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
Writing an HTML/JavaScript Code
The final part of the chart-making process is to write a simple, HTML or Java script code.
When the data library is ready, you can begin writing the code to draw the chart.
- First, you need to create a chart container on the page itself. The best way forward is to use a <div> element and set the ID. Here’s what the code looks like:
<div id="container"></div>
- Second, add the following data:
var data = [
{x: 'DVD player', y: 19},
{x: 'Home theater system', y: 24},
{x: 'Karaoke player', y: 30},
{x: 'Projector', y: 34},
{x: 'TV receiver', y: 42}
];
- Next step, you need to specify the type of chart you want to create. These can be of various types, such as a line graph, a bar chart, a pie chart, etc. The code will need to include the constructor function:
var chart = anychart.bar();
- You also need to make sure the chart is clear for the viewers. After all, what’s the point if you’re not making the chart easy to read. That’s the entire objective of the visualization in the first place. Hence, you’ll need to label it and point out which values represent what quantity. Start by giving the chart a title:
chart.title('Product Sales');
- Create a series next so that you can put the values of your quantities and label them. The code will look like this:
chart.addSeries(data);
// or we can specify a simple dataset within the method:
chart.addSeries([19, 24, 30, 34, 42]);
- The chart should be put in a container so that the one we’re creating is specified. The code will look like this:
chart.container('container');
- Now that, that’s all done. You can draw the chart. Insert this code: “chart.draw();”
- The result will look something like a horizontal bar graph with different values represented by long and short bars.
The entire code of the sequence will look like this:
<html>
<head>
<script
src="//cdn.anychart.com/js/latest/anychart.min.js"
type="text/javascript"
></script>
<script>
anychart.onDocumentLoad(function() {
var data = [
{ x: "DVD player", y: 19 },
{ x: "Home theater system", y: 24 },
{ x: "Karaoke player", y: 30 },
{ x: "Projector", y: 34 },
{ x: "TV receiver", y: 42 }
];
var chart = anychart.bar();
chart.title("Product Sales");
chart.addSeries(data);
chart.container("container");
chart.draw();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
