Click here to Skip to main content
15,563,124 members
Articles / Programming Languages / Javascript
Posted 2 May 2007

Tagged as


51 bookmarked

JavaScript Chart

Rate me:
Please Sign up or sign in to vote.
4.64/5 (10 votes)
2 May 2007CPOL3 min read
Add a stylish chart to your Web page using only client-side JavaScript.
Screenshot - jschart.gif


Wouldn't it be nice to be able to add a stylish and colorful chart to your Web page with minimal effort and still avoid slow-loading Java applets or server side generated images? Then the JavaScript Chart is just what you need!

The JavaScript Chart supports:

  • Several charts on the same page
  • No limit on the number of data items in one chart (as long as you have enough space)
  • Pass the chart data as a string in the following format: Item A;1;Item B;2;Item C;3.
  • Gridlines are automatically created and spaced with appropriate increments depending on the highest value in the data range
  • Choose if item values should be displayed or not on each individual chart
  • Choose if the chart legend should be displayed or not
  • Each data item will automatically get a different matching color
  • Each chart can be rendered in debug mode, showing some useful information if the chart is not displayed as expected
  • Modification of some of the layout parameters with CSS

This small utility will simply take a semi-colon delimited data string (the delimiter can be changed) and generate a chart for you. You can add several charts to the same page and there is no limit to how many data items you can have in one chart, just as long as you have enough space in your page.

This code is by no means perfect and I'm sure there is lots of room for improvements, but hopefully you will find it useful.


I was searching around to find a client-side JavaScript chart without much success, so I decided to write my own. Then, when coming here to The Code Project to upload my solution, I stumbled across the excellent article "Cool Graph Object to Plot Column and Line Graphs in your Web Pages." by Wagner DosAnjos. Ah, well... Even though the functionality is very similar, I guess there are also some differences, so I'll post my solution here anyway.

Using the Code

Include the JavaScript file in your Web page HEAD section:

<script language="javascript" type="text/javascript" src="jschart.js"></script>

Create a DIV element in your Web page and give it an ID attribute. This will be the container for your chart.

If you do not specify any width or height attributes, the following default values will be used: Width: 100%, Height: 300px. You can override those default values with your DIV element and you can also position the element if you'd like.

<div id="myChart" style="width:60%;"></div>

Now we need to create the actual chart object and assign it to the container. In the sample, I created a small function that is called from the onLoad-event.

Imagine that the chart data string is generated from a database SQL query, a Web Service, an Ajax call to some datasource, or whatever you decide.

<script language="javascript" type="text/javascript">
    // This is the chart data as a semi-colon delimited string.
    var chartData = 

    function initCharts() { 
        var chart = Chart;
        // Initialize the chart with the id of the container DIV element.
        chart.title = "Column chart" // Set the chart title.
        chart.type = "column"; // Specify the type of chart - "column" or "bar".
        chart.debug = false; // Debug. False if omitted.
        chart.showLegend = true; // Legend. True if omitted.
        chart.showValues = true; // Data item value labels. True if omitted.
        chart.setData(chartData); // Set the chart data.

Now add the function to the BODY onLoad-event.

<body onload="initChart()">

Refer to the file jschart_demo.html (available for download with this article) for a complete sample.


  • 1.1, 2007-May-01: Handle errors for incorrect data and more debug information
  • 1.0, 2007-Apr-01: Article created


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Web Developer Know IT Stockholm
Europe Europe
Software developer @Know IT Stockholm:

Comments and Discussions

QuestionGreat Chart Pin
Julian Michael7-Nov-14 22:40
Julian Michael7-Nov-14 22:40 
GeneralMy vote of 5 Pin
Reza Samadabadi10-Jul-11 21:46
Reza Samadabadi10-Jul-11 21:46 
GeneralMy vote of 5 Pin
Vixanna27-Oct-10 12:51
Vixanna27-Oct-10 12:51 
GeneralLine chart Pin
Clayton Bonelli3-Sep-09 3:34
Clayton Bonelli3-Sep-09 3:34 
GeneralRe: Line chart Pin
Magnus Lundahl3-Sep-09 10:17
Magnus Lundahl3-Sep-09 10:17 
Generalvery good Pin
Dai Jingjing24-Nov-08 1:34
Dai Jingjing24-Nov-08 1:34 
GeneralReading Chart Data from a .CSV FIle: Client-Side Chart Pin
M TURNER27-Feb-08 15:11
M TURNER27-Feb-08 15:11 
GeneralRe: Reading Chart Data from a .CSV FIle: Client-Side Chart Pin
Magnus Lundahl14-Mar-08 23:21
Magnus Lundahl14-Mar-08 23:21 
Generalreally good and simple chart script Pin
wizera21-Feb-08 9:40
wizera21-Feb-08 9:40 
GeneralRe: really good and simple chart script Pin
Magnus Lundahl14-Mar-08 23:40
Magnus Lundahl14-Mar-08 23:40 
GeneralThe JS chart appears different in Safari Pin
victorbos16-Aug-07 5:29
victorbos16-Aug-07 5:29 
GeneralRe: The JS chart appears different in Safari Pin
Magnus Lundahl16-Aug-07 22:51
Magnus Lundahl16-Aug-07 22:51 
GeneralThanks Pin
victorbos14-Aug-07 13:54
victorbos14-Aug-07 13:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.