If you want to leave any comments about or want to share any insights on java, apache, perl, life or anything else, feel free to do so below!!


65 Responses to Feedback

  1. Garth says:

    The multiple line graph is great and perfect for a little web app I am working on. Quick question. How do I stop the data points from displaying on the lines. In other words, I want only lines, not the little balls at each point along the line.

    • Garth says:

      Hey – never mind – I figured it out. I’m going to add user variables to turn on/off data points and the horizontal line makers as well as set colors.

  2. Jฤnis M says:

    Writing just to say HUGE THANK YOU! For giving a great solution on AS3 Away3D ownCanvas zsorting problem in
    Jฤnis M

  3. Anonymous says:


    I saw (on dynamic drive’s site _ your dhtml pie and line charts which are pretty convenient and easy to implement.
    However, I recently updated my browser (to ie version 8) and unfortunately the charts do not appear anymore.

    Had you notice and that and could you help me in fixing it ?

    SBM>> It works on IE 8.0. Check comments from another user below.

  4. Corbett says:

    Got another question about the Help box script. I am trying to make more than one help file pop up. How can I do that? I tried putting several links on the page, each calling a different URL, but it always displays the last one on the HTML page. Got any ideas on how to do this?


  5. Corbett says:

    I did not see this listed here anywhere, but is there a way to render the value of each point in a line graph? My graph works great, but it would be nice to be able to actually see the exact value at each point.

    Great job on the graph, made my life a lot easier.

  6. hong says:

    hi, I tried your pie chart, it works well on quirk mode but seems not working on transitional and strict mode. and my html has to be on those modes, is there a solution? Thanks

  7. Micah Lawrence says:

    First off thanks and your line graph is awesome.

    Second, have you had anyone have trouble with the line graph showing the lines in IE8?

    Your line graph works in every browser so far but IE8. If you click Compatibility VIew in IE it works then.



    SBM>>It works fine on IE 8.0.x

  8. Pete Ellison says:

    found the problem. Once I added the stylesheet line the chart showed up. Thanks.


  9. Pete Ellison says:

    I am having a devil of a time getting the line chart to display. I have placed the js in the same directory as the html test page. I get nothing in either ff or ie. I can see the charts on your site and on dynamic drive just fine. When I look at the source code all looks normal but something obviously is not set right. Any suggestions?

  10. vanarie says:

    Thanks for the OM page. I shared it on my FB page, so please leave it up if you can.

    I do have a question about the ajax popup. I’d like to set a show/hide on hover. I’m pretty sure it would be easy to do but haven’t tried coding it yet.


    sbmkpm: Thanks. I am sure you can call the “toggleHelp()” function on mouseOver. Good luck.

  11. c1lonewolf says:

    First of all thanks for the bar, line and pie scripts. I havn’t tried them yet, but have been working with js_graphics and a few other of wz’s things. I was wondering how to pull off the line, pie and bar charts. My js math is nill. I made a DrawMap() that made using jsGraphics alot easier. It allows you to turn image maps into actual vector graphics and image map area highlighting etc. You can even animate things with it using a simple loop. I would like to take things a lil’ farther, but as I said my js math is nill. If interested in helping out let me know. I’ll let you know some of the other things I’ve been working on for it.

    sbmkpm: thanks for the kind offer. Unfortunately, I don’t have the time to help at this point.

  12. Sandeep says:

    Your line chart graph is very amazing. Can you guide me as to how I can use it in html through Perl.
    ie. I will take the date from the user through html and fetch the required data from my server. The output should be viewed as a line graph, through PERL.
    I hope I am able to put my question right. Pls guide.

    sbmkpm: it is as simple as printing the HTML/JS output from Perl. You would have to read the Perl documentation for that , though!

  13. Larry says:

    Would it be possible to see an example of more than one multiline graph on a page? I added an additional div before the next graph but I still only see one graph on a page. Thank you.

    • Larry says:

      After writing the message I got it to work. I knew that would happen. If I have your attention is there a way to hover to see the exact value set at the points on the graph. Thanks and this is well implemented. I appreciate the work involved to get this to work.

      sbmkpm: There isn’t a hover option presently. Will try to add it

  14. Tony L says:


    I am a newbie so please excuse my question.

    I followed the code from the source and incorporated onto my own page but it always render to the top of the html page. Unlike yours, you were able to render in the middle of the page.

    Any feedback is appreicated.


  15. Sam says:


    The JS graphs codings which you’ve shared are amazing!

    I tried the older version of them once. And worked well. Pretty fast too. But recently I tried the latest version for one of my work, but only the text could be seen. Not the bars or the slices or the lines. Don’t know what went wrong. I tried it in the same was as i did the older version.

    Could you guess what went wrong?

    Thank you,

    Sam G.

    sbmkpm>> Here is an example:
    Do a view source and follow it. You need to have the proper HTML tags  body . Hope it helps.

  16. Newbie says:


    Are you able to create an example of the multigraph with legends/labels and an onMouseover or onClick function so that when you click on the legend/label it will highlight that specifc graph on the multigraph and the rest are sort of greyed-out?

    Any help or response will be very much appreciated.

    Thanks in advance.

  17. Edwin says:


    Your graphs are very good example. Am very newbie on these kind of stuff though.

    Am especially interested in the multiple line chart if it is possible to make it a filled line graph and in such a way that if I relate them to some kind of legend list, if I click on the legend it will highlight the corresponding filled line graph?

    It is kinda similar to a world map, if I click on Asia, the Asia continent will be highlighted, if I click on Africa, it will highlight Africa etc. So in the case of the line graph, if on your example, the four lines represent sales for Asia, Africa, South America and North America, I will like to have a legend list at the bottom labeled Asia, Africa, North America, South America and if I click on Asia, it will highlight the Asia line graph, if I click on Africa, it will highlight the Africa line graph etc.

    Any response or suggestion will be very much appreciated. Thanks in advance.

  18. Keith says:

    I modified the pie chart to pass in the RGB for the color of the slice and discovered that when one of them is 0, the hex conversion only returns one character (0) instead of two (00). I plugged in a little function to do a left pad of zero to a length of 2 and it works great. Thanks again for sharing all this stuff.

  19. Keith says:

    Great stuff! Thanks!

    Using the new pie chart, when I have three slices, the third slice’s label is under the pie. Any thoughts on getting it out? With only two slices, the label works fine. Thanks.

    You can try changing the “mx & my” vars to move it

    You may have to hardcode the values. I don’t think we can get a formula that would work for all instances!

    • Keith says:

      Thanks. For some reason it’s now working okay. I rearranged the order in which the slices are added, so that may have fixed it.

  20. herb says:


    your graphs are nice and light…

    i have one question though, can you adjust the barwidth? say like 5px? im planning to have lots of data in the chart and i want them to be displayed at once…. (no scrollbar or something)


    sbmkpm>>Change the “var dw = 15;” line to whatever width you want….

  21. tamak says:

    Thanks for thereply — I tried changing p.render(“pieCanvas”, “Pie Graph”) to

    p.render(“pieCanvas”, “Pie Graph”,500)

    but it did not change / affect the size of the graph at all.

    sbmkpm>>Here’s an example:

  22. tamak says:

    thanks for the great tool you have here… Im experimenting and trying out the PIE chart example and am trying to figure out how to change the SIZE of the chart….

    I ran across this line: ” I further modified the script to allow the user to set the size of the pie chart however, if no size is provided, it defaults to 50% of the canvas’ width.”

    … but couldnt get the height / width parameters in the DIV pieCanvas to alter the overall size of the pie chart.

    Can you tell me what exactly I need to change to DOUBLE the size of the chart (I guess since its defaulting to 50%, I’d like to either do 100% or better yet, specify a specific height / width in pixels.

    Thanks again!

    sbmkpm>> specify the size when you call render
    p.render(“myCanvas”, “test graph”,500)

    This functionality is thanks to Hendry Betts

  23. Bharathi says:

    I would like to use ur line graph on our site, to display some stock data.we are able to do that which can be found here
    but, the problem is the result line coming always on to the top. can we make it appear in the middle .is it possible?

    add g.setMin() before you call render()


    g.render(“lineCanvas”,”STATE BANK OF INDIA”);

  24. Ryann says:

    I’m using the multi-line graph – I am using date labels instead of 1,2,3 along the X-Axis, but the label text overlaps leaving a mess – is there a way that I can get the chart to grow with the size of the labels, or manually override the distange between points on the graphc?

    sbmkpm>> Try changing the font size, or the start & width values in the js file.

    var sx = 40;
    var dw = 15;
    var fnt = 12;

    • NataX says:


      Your code is very useful. Now I’am using value var dw = 30;
      Is it possible to rotate date value 90 degrees along the X -axis ?

      SBM>>This uses jsGraphics to draw the text. That doesn’t seem to support vertical text. You can try an alternate library to write the text and replace the present one:

  25. Bob says:

    Hi, First, thank you for your efforts. Now, my quandry. I dowloaded the JS files, and did view source, then saved to the same directory as the JS files as chart.html, but when I run it, all the text shows up then a box with nothing in it where the chart is suppose to be. I am an old hand at html, but not java. I have java loaded on this box, and am running xp pro and internet explorer 7.
    From what I have seen this is exactly what I am looking for so I am really keen to get it working. Any suggestions are welcome.

    sbmkpm>>The js files are supposed to be under sub directory “js/” , while the html should be the parent. View the HTML source for examples.

  26. lcabral says:

    Since you asked for comments… ๐Ÿ˜›
    I did required to set my hown set of colors (more accordingly to a correct/ incorrect color standards ๐Ÿ™‚ ) so I just place then directly into the array.
    This said, I think it would be more human readable and human assessible if those values where in a hexadecimal form already instead of RGB (wich you later also convert into hexadecimal).
    Imagine me knowing the hexadecimal values, altering those values, I have to convert them to decimal so that later in the graph.js (or pie) it converts them back to hexadecimal. I do think this is an important issue in usability… I also notted a problem with the index of Colors… does it really jump start 0 to 1?!

    Other less important suggestions would include:

    * Allow colors to be altered via a functions instead of editing array_something would also be OK. A resetColors(), addColor(#hex , option index) would go very nice

    * Choosing beetwen percentage and numeric value in the pie

    * allowing to print values on top of bars or points/lines might make it more readable in certain situations

    *hidding scrowll bars (I actually haven’t checke it again since vacations but I do remember those scrowll bars ruinned my mojo ๐Ÿ™‚ )

    I admit I could do this, unfortunatly I’m busy ๐Ÿ˜ฆ and just have the time to suck the javascripts main files as they are (I prefer to hack on my hown script that calls your javascript files).
    On the otehr ahnd I bet you hear this commments before and you probably have as much available time as me…
    Good job anyway.

  27. dante says:


    got a problem when I want to use you line chart.

    I tried to use JS to control for the dataset

    g.add(‘1’, variable );

    when I change the value for the variable(actually, a serious of variable) through drop down menu, it will draw a new one on top of it.

    My expect is the old one will disappear.

    How to solve this issue?

    sbmkpm>> You can’t change a variable and have the graph automatically update! It doesn’t work that way. You need to create a new graph object and render it.

  28. Mitica says:

    Thank you for your work on graphs. I’ve included them in a project I had to do at school, about SQL tables and hashtables. Very nice work, simple and efficient.

    sbmkpm>> Thanks! Glad I could be of help ๐Ÿ™‚

  29. Pascal says:

    Thanks for this script.
    Is there any problem using it for an Open Source project ?

    I tried to suppress the โ€˜0โ€™ abscissa value using the solution you provided before (question nยบ25), but this unused value is still visible. Any idea ?

    I also tried to decrease the font size modifying the line 107 of the graph.js script, but it seems not having any impact.

    Thanks for your job.

    SBMKPM>>Sure, you can use this for open source. Use the variables lblFnt and graphFnt so change the size.

  30. taka says:

    Hi, thank you for a great script ! I love to use it for a while.
    I’ just having trouble with pie chart with 0 value.

    p.add(“Yes”,0); & p.add(“No”,100);
    p.add(“Yes”,100); & p.add(“No”,0);

    This displays one color pie and the problem is color is always same. Usually red for yes, yellow for no but 0:100 chart always shows yellow and title (Yes,No) displays the other way around.

    Do you have any idea with this ? If so, please help me.
    Thank you,

    SBMKPM>> Try the latest version of the script:
    Let me know if you still have the zero problem. You can change the colors by modifying the variable c_array[]

  31. elvin says:

    I can used this code to education propose ?

    SBMKPM>>Sure, yes!

  32. Alexandre Rocha says:

    Thanks for the graphs.

    I found at trac scrum plugin and im using it in place of older methods in my intranet. Its better and faster than make images in server

    great, good job.

  33. ola says:

    Which version of GPL is pier.js under? I don’t find that info at:

    Can you be specific ?


    sbmkpm>> You can assume whichever version of GPL you are comfortable with! The spirit of the license is that “you can use this for any purpose, but cannot charge for this software itself. You can use it as part of a larger commercial software and still charge for your commercial software. Any enhancements you make to this piece of code, should be made available free to the general public”

  34. Dels says:

    0 value didn’t play nice there, it show like it were -1 value (test it using opera & ie still same)

    Change the “2” to “0” in line 127 of graph.js as in:
    var ht2 = (ht1 > 0 ? ht1 : (ht1 == 0 ? 0 : ht1*-1));

  35. Dels says:

    i modified the bar chart a bit ๐Ÿ˜€
    please take alook:

    sbmkpm>>Thanks! I am sure the changes would be useful.

  36. Tom says:

    Is there a way to show the labels under a line graph vertically? They all run into one another, otherwise.

    sbmkpm>> No. Try using <br> in the labels and use labels for alternate items to flow them in.

  37. sbmkpm says:

    In the constructor, change the c_array to whatever colors you want. Or as you suggest modify add() to store the color in that position:

    c_array[] = new Array(R.G.B);

  38. jp says:

    Thanks for the great script. I’d like to be able to specify the colors on the chart…ie.

    p.add(“title1”,value1, RGB);

    Could you make some recommendations for a mod.


  39. Wayne McGowan says:

    I hope I am not bothering you but I am using your script here

    on a sales analysis page. The trouble I am having is, I use variables to provide the data so when I press a button (onclick) it loads the stats to your script. It works fine at first but if I change the data in the same page without refreshing, the results change and the chart changes but the first data results remains on the screen causing a overlap of data. So both the first and the second chart results or showing.

    Is there a way to clear the previous data without clearing the entire screen so that when I update the data (without refreshing the screen) only the new data shows after each update.

    Thank You

    sbmkpm>>try setting the canvas div’s innerHTML to “”

  40. Cotsios says:

    How can i place 2 or more graphs in the same table (one next to the other). I tried this using standard TR and TD html tags but the second graphs overwrite the first one. Any ideas ?

    sbmkpm>>Use multiple divs/canvas before you add them to the TDs….

  41. Ste Cork says:

    Very useful, thx. I’ve added it to our internal asset-control system, with a link on the ‘About’ page back to your site. All I tweaked was the colour array so that entries 1,2,3 where red, yellow, green respectively. Nice work.

    sbmkpm: Thanks!!

  42. Kakiro says:

    Great scripts, I want to use your pie chart code on one of my pages but I noticed when I supply 3 numbers and one of them small enough to get the % to 2 the fillArc doesn’t seem to work correctly instead I get no arc drawn and I can see the grey shadow underneath.

    Any ideas on how to fix this? I am trying to myself but I’m struggling.

    sbmkpm>> Try increasing the number_of_steps to a higher number
    var number_of_steps = 100;

  43. tw says:

    Thanks for sharing the script.

    I couldn’t make the line graph display forex rate like from min1.35…..max 1.58

    >>Try with g.setMin(), setMax() and setScale(). Try “View source” for examples.

  44. Trey Kinzer says:

    I’m looking at trying to add title tags to the ellipses to allow exact info to appear when hovered upon. I’m not skilled at javascript so any advice on where to place said info would be helpful.

    >>I don’t think you can do that. The segments are not individual drawing units, but rather are rendered

  45. Mehjabin says:


    i wanted help on the colors used in the pie chart…. wnated to change the colors but cant figure out how… please help

    >> Its in the .js file. Change the array c_array.

  46. sbmkpm says:

    change the div width & height and use overflow:scroll; overflow-x:hidden

  47. C. Fox says:

    Thanks for putting together a line graph function. I need to resize it. How do I change the size of the graph to fit in a dive size of 100px x 400px instead of the standard 300px by 400px. I can change the numbers however, this gives me scroll bars.


  48. Whoaw, Speedy support.

    Log x-values works great.


  49. sbmkpm says:

    logarithmic scale is not available right now. However, you can try and change the code in line.js (or graph.js) to do this. I would think just changing the line where we add data,10));

    to add the log value instead of value should do it.

  50. Great stuff,

    I’m searching to put a logarithmic Y-axis.
    Is it possible?

    Thanks, Peter

  51. sbmkpm says:

    Check this for an example on multiline:

    Essentially,you create multiple graph objects, but render them all on the same canvas.

  52. Mike says:

    Great stuff! I want to do a multi-line how ever I cannot find an example of the data array for one. this provides a single line
    g.add(‘1/1/08’, 0);
    g.add(‘2/1/08’, 30);
    g.add(‘3/1/08’, 175);
    g.add(‘4/1/08’, 130);
    g.add(‘5/1/08’, 150);
    g.add(‘6/1/08’, 175);
    g.add(‘7/1/08’, 205);
    g.add(‘8/1/08’, 125);
    g.add(‘9/1/08′, 125);
    g.add(’10/1/08′, 135);
    g.add(’11/1/08′, 125);
    g.add(’12/1/08’, 125);

    What does the data for a multi line look like?

  53. discry says:

    Nevermind – i actually found the parameters to edit here: this.render = function(canvas, title)
    var jg = new jsGraphics(canvas);

    var r = 75;
    var sx = 150; (was 200)
    var sy = 100; (was 200)
    var hyp = 100;
    var fnt = 12;

  54. discry says:

    I really appreciate the chart code and am considering using it. I’m having trouble with how low the chart sits in the cell. Any suggestions on what to tweak? It seems to begin a good 100 -150 px down the page from the div.

  55. sbmkpm says:

    You can use setMin() & setMax() functions to make it work with negative values. Here’s an example

    Its not an exact science! But you can try out various values until one works for you. The example uses minus 10 to minus 50

  56. Roland says:

    Peace be with you !

    Thanks for sharing your instant jscript/css graphs.
    I find it very nice cause it loads very fast and efficient compared to applet solution.
    However, I’d like to use specifically the line graph to plot dew point atmospher reading.
    Could I use the line graph to plot negative values say from minus 10 to minus 50 ?

    Pls kindly help me on this.

    Thanks and more power !

  57. Neaveru says:

    I just wanted to say thank you for the code for the multiple line graph. I’ve been using it, with a few tweaks, on my site. You can take a look at it at

    Thanks again,

  58. Erik Carlsson says:


    Must say I’m really impressed by your charts! I would add a feature to the wish list:

    There would be great to have a setmin function too for the line charts. There are times I would prefer not having 0 as minimum value, as for instance when plotting air pressure.

    I’m a newbee to javascripts so I’m sorry I can’t implement it myself.

    Best regards

    Erik Carlsson

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: