Highcharts is a chart library written in pure JavaScript, providing intuitive and interactive charts for your Web sites and Web applications. Currently supports polyline, curve, area, area graph, column graph, bar graph, pie chart, scatter chart, angle measurement graph, area arrangement graph, area curve arrangement graph, column arrangement graph, polar coordinate graph, etc. Ten chart types.
Huidu downloads the latest trial version of Highcharts
In this article, we will compare two methods to visualize data in a CSV file:
a selected Highcharts data module API solution using data.cvsURL.
A custom parser written in pure JavaScript has greater flexibility in advanced situations.
Let's get started
Either way, the processing of data must be read through the basics, such as finding data sources, data loading and processing data.
Remarks
In our documentation and API, you can find many examples and solutions to enable you to start working/processing data.
We will use datasets from NASA (National Aeronautics and Space Administration), especially from NASA Goddard Institute for Space Research. The idea is to visualize a CSV file, which includes the global average temperature from 1880 to 2019.
1. Data source
Let's get the Zonal annual CSV file, store it on GitHub for the dedicated Highcharts solution, and use it locally in a custom way. The CSV file contains several columns: Year, Glob, Nhem, Northern Hemisphere, etc. These columns are separated by commas. The file is not really meant to be readable. You can view CSV files that are easier to read in many ways. For example, in a custom demo, you can use the Highcharts export data module to see how the data looks in spreadsheet format, and we strongly recommend using it for this purpose.
2. Data loading
To start using the data, we need to load it into the script. For the built-in Highcharts solution, this is as simple as setting the data.cvsURL option.
For custom parsers, we will use the Fetch API standard. We will also use await and async syntax for custom solutions supported by modern browsers. When using the latest features of JavaScript, remember to check the capacity of your browser. When you want to get support from older browsers, it's best to compile the code to the older ES5 syntax.
3. Data analysis
If you use the built-in Highcharts solution, the data module will save you the trouble of data analysis, and you can skip directly to the "Data Visualization" section (see section 4. "Data Visualization").
However, for custom solutions, there are various JavaScript libraries that can parse CSV. By parsing, we mean finding the position of all commas, breaking up the data, and putting it into an object to make it available. For this data set, it is very simple to parse it manually using the split function. By the way, a piece of text in a JavaScript variable is a string object and has a function called split. This function allows you to take arbitrary text and split it into different elements of an array. This is basically what we want to do; we want to split all the rows, and then split all the columns in each row. The split function requires only one parameter-the separator or delimiter. In this case, we have two types of delimiters. For each line, the delimiter that distinguishes one line from another is a newline character. So first let's call it split with newline characters. Again, we don’t need the first row – the first row is indeed useful information for us humans, they can consider what the data is, but for this purpose, we want to use the year as a category.
Now, it is important to know that the data is clean: no empty dates, no errors, no empty blocks. However, if there are commas in the data, this parsing system will crash. Even if there is a convention for CSV files to use quotation marks around the information that should not be split, but where there are commas, you always have to check the data. You may also find that your data is not yet in CSV format, so please make sure to remove unnecessary spaces and commas in the data manually or through a CSV converter/cleaner tool. . This may require a lot of work to enter the analysis and clean up the project data.
4. Data visualization
Now, we are ready to use a simple line chart to visualize the data.
For the dedicated Highcharts solution, the data is hosted in GitHub, and the data can be extracted with just one line of code (due to the data-module):
data:{
csvURL: " https://raw.githubusercontent.com/mekhatria/demo_highcharts/master /globalTemperatureChange.csv ",
} The
Highcharts data module completes all the heavy work for you to obtain, process and prepare the data to be visualized. Yes, it's that simple.
Below, you can use custom code to view the same data and chart types (see the chart below):
Even though the charts look similar, the code behind the scenes is different. Now, you no longer need a row of data to use the data module to get data, but have a complete function for the same job:
async function getData() {
const date = [],
globalTemp = [],
northernTemp = [],
southernTemp = [ ],
response = await fetch('../ZonAnn.Ts+dSST.csv'),
data = await response.text(),
rows = data.split(/\n/).slice(1);
rows.forEach(element => {
const row = element.split(','),
year = row[0],
gt = +row[1],
nt = +row[2],
st = +row[3];
date.push(year);
globalTemp.push(gt);
northernTemp.push(nt);
southernTemp.push(st);})
return {
date,
globalTemp,
northernTemp,
southernTemp
}
} The
above function retrieves data from local storage, cleans it up, processes it, and returns the result in four different arrays.
For these two examples, the idea is to load tabular data in CSV form and visualize it. We must go through data processing and then display the data on the chart. In the first demonstration, the Highcharts data module provides a ready-made solution to obtain and process data. In most cases, we recommend this option. However, if specific processing is required, custom code can always be used.
We encourage you to use the knowledge learned from this article to create interactive charts with different data and techniques. You are always welcome to ask your questions and comments under this article.
APS helps improve the production efficiency of enterprises, truly realize the visual presentation and control of production plans, quickly and effectively respond to production plans in different scenarios, improve on-time delivery capabilities, and increase production capacity and resource utilization.
If you want to buy a genuine Highcharts license, or for more product information, please click [Consult Online Customer Service]