JavaScript Charts Tutorial

28/12/2020
Chưa phân loại

Creating Charts using JavaScript and PHP

Web based chart can be created by using any client-side library or server-side library based on static or dynamic data. If you want to create animated charts and want to download the chart faster then it is better to use a client-side chart library. Many client-side libraries are available to create charts for web pages. One of the popular client-side libraries is CanvasJS which can be used to create web based charts by using fixed data or retrieving data from any database.

CanvasJS is used with PHP in this tutorial for creating web based charts. This library supports various types of charts, such as bar chart, column chart, dynamic column chart, line chart, pie chart, pyramid chart, doughnut chart, bubble chart etc. Some of them are shown here by using sample data. Before starting this tutorial, you must ensure that your web server and PHP are installed properly and working.

Download CanvasJS

It is available in free and commercial version. You can download and use the free version of this library for testing purposes. Go to the following URL and click on Download link to download CanvasJS library. Unzip the file and store the folder in web server after download to use it.

https://canvasjs.com

<?php
 
$profitdata = array(
array("x"=> 2013, "y"=> 440000),
array("x"=> 2014, "y"=> 270000),
array("x"=> 2015, "y"=> 210000, "indexLabel"=> "Lowest"),
array("x"=> 2016, "y"=> 600000),
array("x"=> 2017, "y"=> 630000, "indexLabel"=> "Highest"),
array("x"=> 2018, "y"=> 560000)  );
 
?>
 
<html>
<head>
<script src="http://localhost/canvasjs/canvasjs.min.js"></script>
<script>
 
window.onload = function () {
 
var chart = new CanvasJS.Chart("displaychart", {
//Enable animation
animationEnabled: true,
 
//To save the chart as image
exportEnabled: true,
 
//The others values of theme are "light1", "light2", "dark1"
theme: "dark2",
title:{
text: "Yearly Profits"
},
data: [{
//Change type to bar, line, pie etc. to change the display
type: "column",
indexLabelFontColor: "#5A3457",
indexLabelPlacement: "outside",
//Read data from PHP array in JSON format
dataPoints: <?php echo json_encode($profitdata, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
 
}
</script>
</head>
<body>
<center>
<h3>Column Chart Example </h3>
<div id="displaychart" style="height: 70%; width: 40%; align:center;"></div>
</center>
</body>
</html>

Output:

The following output will be generated if you run the file from any web server. “Trial Version“ and “CanvasJS.com” watermarks will be shown for free version.

When you click on “More Options” button from top right corner then three options will be shown. You can print the chart or save the chart as JPG or PNG image format. If you click on “Save as PNG” option then the following dialog box will appear.

The default image file name is Chart.png. You can remove the watermarks from the image by using any photo editing software easily.

Pie Chart:

The following example shows the popularity of different Linux distributions using pie chart. Write the following code in a file named pie-chart.php and store the file in var/www/html/jschart folder.
 

<?php
 
$popularity = array(
array("os"=> "Arch Linux", "y"=> 40),
array("os"=> "CentOS", "y"=> 25),
array("os"=> "Debian", "y"=> 12),
array("os"=> "Fedora", "y"=> 10),
array("os"=> "Gentoo", "y"=> 8),
array("os"=> "Lindows", "y"=> 5)
);
 
?>
 
<html>
<head>
<script src="http://localhost/canvasjs/canvasjs.min.js"></script>
<script>
 
window.onload = function () {
 
var chart = new CanvasJS.Chart("displaychart", {
//Enable animation
animationEnabled: true,
//To save the chart as image
exportEnabled: true,
//The others values of theme are "light1","dark1", "dark2"
theme: "dark1",
title:{
text: "Popularity of Linux Distributions"
},
data: [{
//Change type to bar, line, column etc. to change the display
type: "pie",
//Set font color for the label
indexLabelFontColor: "yellow",
//format the percentage values
yValueFormatString: "##0.00’%’",
//Set angle for pie
startAngle: 240,
indexLabel: "{os} {y}",
//Read data from PHP array in JSON format
dataPoints: <?php echo json_encode($popularity, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
 
}
</script>
</head>
<body>
<center>
<h3>Pie Chart Example </h3>
<div id="displaychart" style="height: 70%; width: 40%;"></div>
</center>
</body>
</html>

Output:

The following output will display if you run the file from web server. You can create image file of the chart by the step which is shown in the previous example.

Dynamic Column Chart:

You can create nice looking dynamic chart by using this library. Suppose, you want to create live chart of stock market where stock price increases or decreases continuously. Write the following code in a file named dynamic-chart.php and store the file in var/www/html/jschart folder.
 

<?php
 
$stockdata = array(
array("stock"=> "MSFT", "y"=> 92.67),
array("stock"=> "LOW", "y"=> 88.89),
array("stock"=> "INTC", "y"=> 52.15),
array("stock"=> "ADI", "y"=> 91.78),
array("stock"=> "ADBE", "y"=> 224.80),
array("stock"=> "ABBV", "y"=> 94.30),
array("stock"=> "AMD", "y"=> 10.27)
 
);
 
?>
 
<html>
<head>
<script src="http://localhost/canvasjs/canvasjs.min.js"></script>
<script>
 
window.onload = function () {
 
var chart = new CanvasJS.Chart("displaychart", {
//Enable animation
animationEnabled: true,
//To save the chart as image
exportEnabled: true,
//The others values of theme are "light1","dark1", "dark2"
theme: "dark1",
title:{
text: "Stock Market Values"
},
data: [{
//Change type to bar, line, column etc. to change the display
type: "column",
//Set font color for the label
indexLabelFontColor: "red",
//format the percentage values
yValueFormatString: "##0.00’%’",
indexLabel: "{y}",
//Read data from PHP array in JSON format
dataPoints: <?php echo json_encode($stockdata, JSON_NUMERIC_CHECK); ?>
}]
});
 
 
//Read stock names
var stdata = chart.options.data[0].dataPoints;
var st = new Array();
for (var i = 0; i < stdata.length; i++) {
st[i]= stdata[i].stock;
}
 
function updateChart() {
var stockColor, deltaY, yVal, xVal;
var dps = chart.options.data[0].dataPoints;
for (var i = 0; i < dps.length; i++) {
deltaY = Math.round(2 + Math.random() *(22));
yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0;
xVal = dps[i].stock;
stockColor = yVal > 200 ? "#FF2500" : yVal >= 170 ? "#FF6000" : yVal < 170 ? "#6B8E23 "
:null;
dps[i] = {label: st[i], y: yVal, color: stockColor};
}
chart.options.data[0].dataPoints = dps;
chart.render();
};
updateChart();
 
setInterval(function() {updateChart()}, 500);
}
</script>
</head>
<body>
<center>
<h3>Dynamic Chart Example </h3>
<div id="displaychart" style="height: 70%; width: 40%;"></div>
</center>
</body>
</html>

Output:
The following output will display if you run the file from web server. You can create image file of the chart by similar way which is shown in the first example.

By following above steps, you can easily create necessary web based animated charts using this useful JavaScript library.

ONET IDC thành lập vào năm 2012, là công ty chuyên nghiệp tại Việt Nam trong lĩnh vực cung cấp dịch vụ Hosting, VPS, máy chủ vật lý, dịch vụ Firewall Anti DDoS, SSL… Với 10 năm xây dựng và phát triển, ứng dụng nhiều công nghệ hiện đại, ONET IDC đã giúp hàng ngàn khách hàng tin tưởng lựa chọn, mang lại sự ổn định tuyệt đối cho website của khách hàng để thúc đẩy việc kinh doanh đạt được hiệu quả và thành công.
Bài viết liên quan

ImageMagick to Sharpen an Image

A common task is to edit images, change the formats, rename them and do many computations on not one but many files at...
29/12/2020

Run Ubuntu 18.04 From USB Stick

Ubuntu 18.04 is a great operating system. It is in beta at the time of this writing. Everyone is so excited and eagerly...
28/12/2020

How to Install and Configure OpenVPN on Debian 9

OpenVPN is an open source Virtual Private Network software. It runs as a client-server model. An OpenVPN server runs on...
29/12/2020
Bài Viết

Bài Viết Mới Cập Nhật

Reliable IPv4 and IPv6 Subnet Rental Services: The Perfect Solution for Global Businesses
23/12/2024

Tìm Hiểu Về Thuê Proxy US – Lợi Ích và Cách Sử Dụng Hiệu Quả
11/12/2024

Mua Proxy V6 Nuôi Facebook Spam Hiệu Quả Tại Onetcomvn
03/06/2024

Hướng dẫn cách sử dụng ProxyDroid để duyệt web ẩn danh
03/06/2024

Mua proxy Onet uy tín tại Onet.com.vn
03/06/2024