In this tutorial, we will make a bar chart from CSV data.

JavaScript Charts, Graphs, Graphics, Circles, Ellipses, Arcs, Lines, and Polygons
Grab and Drop, Not Drag and Drop
Add Ids and onClicks to Divs
Add Ids and onClicks and Grab and Drop to Divs
Make Anti-alias (Almost) Lines
Make Anti-alias (Almost) Lines Using Bresenham's Line Algorithm
Good JavaScript Circle Algorithm
Good JavaScript Ellipse Algorithm
Good JavaScript Arc Algorithm
Make JavaScript Irregular Polygon
JavaScript Area of Irregular Polygon Algorithm
Make Line Chart from User-Inputted Data
Make Line Chart from CSV Data
Make Line Chart from MySQL Table Data
Make Bar Chart from User-Inputted Data
Make Bar Chart from CSV Data
Make Bar Chart from MySQL Table Data
Make Pie Chart from User-Inputted Data
Make Pie Chart from CSV Data
Make Pie Chart from MySQL Table Data

Data for line charts and graphs can come from any number of sources. We considered putting together a user input form and the numeric data could be charted and the non-numeric data turned into labels, and we did that here: Make Bar Chart from User-Inputted Data. But we decided to also interface with the two most important database sources needing charting: CSV files and MySQL tables. CSV is a delimited data format that has fields/columns separated by the comma character and records/rows terminated by newlines, and MySQL is the most popular open-source database ever. The first, CSV, can be pulled out of any competant database app, for example: spreadsheets such as Microsoft Excel or databases such as Microsoft Access database or Apache OpenOffice, which is a spreadsheet, database, word processor, plus other stuff (and it's free). MySQL is a server-side relational database, and the tables that we store in this database can be easily created, modified, or just read with server-side computer languages—such as PHP. We'll read a MySQL table here: Make Bar Chart from MySQL table data, but on this page we'll stick to CSV files. Okay, let's look at some test data in Excel:



Now let's check out test data exported from Excel as a CSV file and stuck in a text editor:



And you can, of course, simply type comma-separated data into your text editor if you're too lazy to make an Excel file. But we used Excel. Excel can make lots better graphs than what we'll do here, but if you like programming as much as we do, you'd like to check out how it's done. Besides, what if you've created a PHP poll but do not feel like dealing with the script for making a chart, but you do want a bar chart or line chart?

Get the CSV file in the same folder on the server as the PHP program below called Make Charts from CSV Data, which you may copy from this page and name as a PHP file called getcsvtochart.php.

When creating your CSV file or Excel file that you'll export as CSV, remember to type in a word like the name of a month and then an amount that must be a number. Don't add $ or other things—if you need it to be about money, have this in your CSV name, such as Monthly Data in Dollars Collected From Selling Pottery. If you'd like to add a $ filter so that you can deal with exported Excel data with $ in front of it, that's simple programming we'll leave up to you to add that to the PHP program below.

After some simple CSS to style the page so it looks good, we code the aDiv and bDiv DIVs. bDiv we use for the month labels and aDiv we use for the amount labels. We'll be adding these labels to the document with DOM methods like createElement() and appendChild(), using innerHTML for inserting the actual text into the DIV. We'll use calculated height and marginLeft properties on the DIVs later. Note that the overflow property is hidden and the background-color is transparent so in case you decide to have longer labels, the text won't slobber all over nearby text.

Next, there's a little form whose action is the PHP file getcsvtochart.php, which is the name you need to give the PHP file on this page. In other words, once you type in the file name, such as test.csv, the web page calls itself, reloading but remembering the POSTed file name.

Next comes the PHP script. We POST in the file name and check to see if there is such a file in your folder on the server. Next comes the file_exists() function which checks whether or not a file or directory exists. This function returns TRUE if the file or directory exists, otherwise it returns FALSE and the page reloads. If true, the script goes on to declare the $month and $amount arrays and it uses the fopen() function to open the file it found. Next, in a while() loop, we use the fgetcsv() function to parse a line from an open file, checking for CSV fields. Once it runs out of new lines to parse, it registers FALSE and we close the file.

While in the loop, we use the array_push() function to get the CSV file's data into our two arrays. Then, in order to know how to arrange the web page, we need to know the maximum value found in the $amount array. We use the max() function for this purpose.

Now come JavaScript Object Notation (JSON) for PHP to JavaScript conversions. We use the json_encode() function to convert the month names array and the amount array and the biggest amount number and the CSV file name into JavaScript array and variables, respectively, for convenient use. Then we divide the maximum amount value by 350. The 350 is the height of the graph minus 30—which we did because we don't want the top of a bar in the graph to hit the top of the graph. We'll be using a[i]/r to figure out bar heights. The a[] array is where the amounts are stored.

Next we use the Document Object Model (DOM) in two for loops to add labels to the graph and graph bars as well as drawing the bars themselves. We use the createElement() Method to bring a div into existence and the appendChild() Method to get it integrated into the document. The innerHTML property is used to put the labels into the div elements.

Next we put a box around the entire bar chart. Finally, we put the CSV file name as a big title under the graph and we draw a box around the whole graph using a width forced by the width and min-width properties.

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Make Charts from CSV Data</TITLE>
<meta name="description" content="Make Charts from CSV Data">
<meta name="keywords" content="Make Charts from CSV Data,View CSV Data as Charts,chart CSV Data,php,javascript, dhtml, DHTML">

<STYLE TYPE="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left;}
p, li, td {font:13px Verdana; color:black;text-align:left}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
h3 {font:bold 15px Verdana;}
#myid {position:absolute;left:10px;top:117px;height:380px;border: solid 1px #000;}
#myform {position:absolute;left:50px;top:20px}
#label {position:absolute;left:400px;top:550px;}
.aDiv {
width: 68px;
border: solid 1px #000;
background-color: #e1e1e1;
font-size: 11px;
font-family: verdana;
color: #000;
padding: 5px;
overflow:hidden
}
.bDiv {
width: 68px;
border: none;
background-color: #fff;
font-size: 11px;
font-family: verdana;
color: #000;
padding: 5px;
overflow:hidden
}
</STYLE>
</head>
<body>

<div id='myform'>
<center><h1>Make Charts from CSV Data</h1></center>
<form action='getcsvtochart.php' method='post' name='sendname'>
<center><input type='text' name='table' id='whattable' size='35' maxlength='40' value=''>
<input type='submit' value='Get chart data' name='flag'></center></form></div>

<?php

$table=$_POST['table'];$t=$table; if(strlen($t) > 0){
IF (!FILE_EXISTS($t)){echo '<script language="javascript">alert("No such file.");window.location="getcsvtochart.php";</script>;';}else
{$row = 1;$month=array();$amount=array();
if (($handle = fopen($t, "r")) !== FALSE) {
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
$num = count($data);
$row++;
array_push ($month, $data[0]);
array_push ($amount, $data[1]);}
$biggest=max($amount);}
fclose($handle);
}}
?>

<script language="javascript">

var m = <?php echo json_encode($month); ?>;
var a = <?php echo json_encode($amount); ?>;
var b = <?php echo json_encode($biggest); ?>;
var t = <?php echo json_encode($t); ?>;
var r=b/350;

if (a.length > 0 && m.length > 0) {
for (var i=0;i<a.length;i++){
var divTag = document.createElement("div");
divTag.id="a" + i;
divTag.setAttribute("align", "center");
divTag.style.marginLeft = (i*78+20)+"px";
divTag.style.position = "absolute";
divTag.style.bottom = 100+"px";
divTag.style.height = (a[i]/r)+"px";
divTag.className = "aDiv";
divTag.innerHTML = a[i];
document.body.appendChild(divTag);
}
for (var i=0;i<a.length;i++){
var divTag = document.createElement("div");
divTag.id="b" + i;
divTag.setAttribute("align", "center");
divTag.style.marginLeft = (i*78+20)+"px";
divTag.style.position = "absolute";
divTag.style.bottom = 70+"px";
divTag.style.height = 30+"px";
divTag.className = "bDiv";
divTag.innerHTML = m[i];
document.body.appendChild(divTag);
}

document.write("<div id='label'><h1>"+t+"</h1></div><div id='myid' style='min-width:"+(a.length*80)+"px; width:"+(a.length*80)+"px'> </div>");
}
</script>

</body>
</html>