Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Graph Generating Code

If you want to display a graph on your web page, you could use a graphics program to draw the graph, but that's time consuming and the resulting graph is static, it can't change or grow. In this article I will show you how to generate graphs using JavaScript.

The code in this example displays a chart of the page views served up by this web site. But the code is easy to modify for the data that you need to display. First let's view the results of the example code.

View Example

The data is coded as two JavaScript arrays. When you need to change or add to the data, you edit these arrays. One array is named "month" and the other is named "views". You can modify this for your own data. For example, your chart will probably not be about "views". Maybe you are charting "dollars". Change the name of the "views" array to "dollars". Find and replace the name "views" with "dollars" anywhere that you find it in the code.

Similarly, you may want to chart by the "week" instead of "month". Change the name of the "month" array to "week". Find and replace the name "month" with "week" anywhere that you find it in the code.

month = new Array();
views = new Array();

month[0] = "Feb 02";
views[0] = 11739;
month[1] = "Mar 02";
views[1] = 16106;
month[2] = "Apr 02";
views[2] = 15812;
month[3] = "May 02";
views[3] = 29051;
month[4] = "Jun 02";
views[4] = 23921;
month[5] = "Jul 02";
views[5] = 36680;
month[6] = "Aug 02";
views[6] = 45135;
month[7] = "Sep 02";
views[7] = 42486;
month[8] = "Oct 02";
views[8] = 68227;
month[9] = "Nov 02";
views[9] = 91546;
month[10] = "Dec 02";
views[10] = 128230;
month[11] = "Jan 03";
views[11] = 111233;
month[12] = "Feb 03";
views[12] = 84628;
month[13] = "Mar 03";
views[13] = 75141;
month[14] = "Apr 03";
views[14] = 121439;

You can add more data by adding more array element assignments with incremented indexes, for example the next index would be 15.

You could place the data in a separate file from your web page. Don't put the <script language="JavaScript"> and </script> tags in the data file. Give the data file a name with the extension .js, then put an include statement in the head of your web page. For example:

<script language="JavaScript src="filepath/filename.js"></script>

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268