Free Javascript HTML5 Bar Chart Script

makeychart
I coded a javascript/html5 bar chart for a project i worked on during the week . I decided to make it open source since it will be useful for most web sites/developers planning to use bar chart in their projects. The script can create an horizontal or a vertical chart.The simple usage instructions are below. You can download it here: http://www.afrisoft.org/products/makeXchart.zip

 

 

Instructions

Link to the makeXchart.js in your project e.g

<script type=”text/javascript” src=”makeXchart.js”></script/>

Create an associative array in javascript. A sample is shown below:

var myArray = {
‘Pencils’:100,
‘Water Color’:950,
‘Tables’:10,
‘Excercise Books’:780,
‘Transparent Rulers’:390,
‘Markers’:100,
‘Books’:910,
‘Sandals’:109,
‘All others’:380};

Then call the makeXchart function or the makeYchart function:

makeYChart(“MyDIV”,750,300,myArray,”#ee0066″,”#000000″,”Bar Chart For Sample School Stuff”);

The makeXchart and the makeYchart functions take 6 or 7 arguments:

Argument 1 is the id of the div to insert the chart into e.g MyDIV
Argument 2 is the width of the chart e.g 750
Argument 3 is the height of the chart e.g 300
argument 4 is the associative array that contains your chart parameters e.g myArray
Argument 5 is the colour of the bars e.g #ee0066
Argument 6 is the colour of the text e.g #000000 for black
Optional Argument 7 is the title of the chart e.g Bar Chart For Sample School Stuff

Your final code should be something like this:

<div id=”MyDIV” ></div>
<script type=”text/javascript” src=”makeXchart.js”></script/>
<script type=”text/javascript”>
var myArray = {
‘Pencils’:100,
‘Water Color’:950,
‘Tables’:10,
‘Excercise Books’:780,
‘Transparent Rulers’:390,
‘Markers’:100,
‘Books’:910,
‘Sandals’:109,
‘All others’:380};
makeYChart(“MyDIV”,750,300,myArray,”#e06″,”#000″,”Bar Chart For Sample School Stuff”);
</script>