If you want to leave any comments about www.sbmkpm.com or want to share any insights on java, apache, perl, life or anything else, feel free to do so below!!
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.
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.
Writing just to say HUGE THANK YOU! For giving a great solution on AS3 Away3D ownCanvas zsorting problem in http://www.sbmkpm.com/away3d_zorder.html
I saw (on dynamic drive’s site _ http://dynamicdrive.com/dynamicindex11/piegraph.htm) 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.
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?
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.
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
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
I removed an and tag and it seemed work. Don’t ask me why but it worked. Thanks for everything.
Hi can you please show how u got it working in IE 8 ? Mines not working But its working fine in FF ! Please Help
found the problem. Once I added the stylesheet line the chart showed up. Thanks.
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?
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.
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.
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!
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.
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
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.
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?
sbmkpm>> Here is an example: http://www.sbmkpm.com/graph.html
Do a view source and follow it. You need to have the proper HTML tags body . Hope it helps.
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.
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.
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.
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!
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.
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….
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:
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.
sbmkpm>> specify the size when you call render
p.render(“myCanvas”, “test graph”,500)
This functionality is thanks to Hendry Betts
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”);
that didn’t help.am unable to see the graph also, after adding g.setMin(1000).Any other way?
sbmkpm>>Here’s an example:
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;
var sx = 40;
var dw = 15;
var fnt = 12;
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:
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.
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🙂 )
On the otehr ahnd I bet you hear this commments before and you probably have as much available time as me…
Good job anyway.
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.
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🙂
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.
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.
SBMKPM>> Try the latest version of the script: http://www.sbmkpm.com/pie.html
Let me know if you still have the zero problem. You can change the colors by modifying the variable c_array
I can used this code to education propose ?
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.
Which version of GPL is pier.js under? I don’t find that info at: http://www.sbmkpm.com/pie.html
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”
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));
var ht2 = (ht1 > 0 ? ht1 : (ht1 == 0 ? 0 : ht1*-1));
i modified the bar chart a bit😀
please take alook:
sbmkpm>>Thanks! I am sure the changes would be useful.
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.
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[this.data.length] = new Array(R.G.B);
Thanks for the great script. I’d like to be able to specify the colors on the chart…ie.
Could you make some recommendations for a mod.
I hope I am not bothering you but I am using your script here http://www.dynamicdrive.com/dynamicindex11/piegraph.htm
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.
sbmkpm>>try setting the canvas div’s innerHTML to “”
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….
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.
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;
var number_of_steps = 100;
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.
>>I don’t think you can do that. The segments are not individual drawing units, but rather are rendered
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.
change the div width & height and use overflow:scroll; overflow-x:hidden
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.
Whoaw, Speedy support.
Log x-values works great.
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
to add the log value instead of value should do it.
I’m searching to put a logarithmic Y-axis.
Is it possible?
Check this for an example on multiline:
Essentially,you create multiple graph objects, but render them all on the same canvas.
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
What does the data for a multi line look like?
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;
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.
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
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 !
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 http://www.neaveru.com/digg/
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.
Fill in your details below or click an icon to log in:
You are commenting using your WordPress.com account. ( Log Out / Change )
You are commenting using your Twitter account. ( Log Out / Change )
You are commenting using your Facebook account. ( Log Out / Change )
You are commenting using your Google+ account. ( Log Out / Change )
Connecting to %s
Notify me of new comments via email.
Create a free website or blog at WordPress.com.
Get every new post delivered to your Inbox.