I'm looking for quite a specific technique.
The short of it:
I need HTML which can generate a line chart, as shown below (but without the background image. That is totally irrelevant)
However, I want to make it in HTML, without Javascript or Flash and in a way that the dots can be hovered to show more information.
The long of it:
The image shown above comes from the website jpgraph.net. That is a PHP library for creating charts. The downside of that however, is that it generates images. Since you have no clue of knowing where the dots are going to end up, you can't estimate where the hovers should be made.
Ofcourse there are also loads of javascript ways of doing this, but the graph should also work without javascript.
Flash is out of the question, since it should also work on tablets (read iPads)... And because it is flash...
All the information shown in the graph is generated by an external system. That means that the code should work and change the graph, depending on the information put in there.
EDIT:
I'm aware of the fact that it is easily done with javascript, and my fallback would be to offer a javascript version and as a fallback the php version. However, I'm hoping to find a way which doesn't need a fallback. Using 1 script to do the same task would be better than using two.
You should check out Charts.js by Nick Downie.
It has simple HTML5 Charts using the canvas element -
Charts and Graphs Included:
Bar Chart
Doughnut Chart
Line Graph
Pie Chart
Polar-area Chart
Radar Chart
Read the documentation here: http://www.chartjs.org/docs/
and download on GitHub here: https://github.com/nnnick/Chart.js
Hope I Helped
For those still interested: I fixed this using the jpgraph.net library. It's a php library which allows you to draw graphs on the server using data you get from somewhere else.
As enhzflep pointed out, since you have the data, you can calculate where the points will end up. This is however, quite a tedious job, but it's working in javascript-less browsers.
Related
I am just stuck a little in making a choice between PHP chart Lib and JavaScript Chart Lib. I do understand that PHP if for the server side and Javascript for the client side. My problem is what difference does it make when using their charting libraries. Is it performance issue or what?
I want to understand the difference in using PHP chart Libs and JavaScript Chart Libs. Please am not looking for examples of their chart libraries. I am looking for why i should choose one over the other.
I tried to google 'php chart vs javascript chart' but didn't get any links that can give me
the difference.
EDIT 1
1)
If this question has been answered before, then point me there.
2)
Am developing the application for internet
EDIT 2
1)
I have found out about PHPChart PHPChart which has both PHP source code and JavaScript source code. If anyone has experience in that library, does it may be solve the problem of server side load (bandwidth issues) etc.. I am thinking since it has both the PHP and JavaScript source then it may be the best to use. Am just assuming. :-)
Thank you very much
Both ways of creating graphs have their own pros and cons.
If you decide to do it using PHP, first you need to make sure that you have all the required graphical libraries installed (e.g. GD, which might not always available on shared hosts).
Assuming you have them, the first negative thing in my opinion is that you will end up with static images. Of course, it's not always a bad thing, as that ensures compatibility with all the clients, be those with or without javascript support, however, it takes away the dynamics of graphs generated on the client side using javascript. Your users won't be able to zoom, move, slide, full screen or do anything that they could with the likes of Highcharts or Flot.
Another con is that images take up more bandwidth than, say, JSON. The bigger you want to have your graph, the more colors it contains, the longer your clients will have to wait till your page loads. And just because those loads are not asynchronous, they will have to wait for the images to load before they will see the rest of the page.
With javscript libraries everything is different though. You only request the data required for your graph and you only request it when your page loads. The amount of data is usually smaller than an image would be plus you can compress your output with GZ to make it even smaller. Users will see nice spinners informing them that the graph is loading instead of some incomplete webpage.
Another thing to take into account is - what if you decide to show a nice table with data in them below each graph? If you chose to render images on the server, you would end up having to add new functionality just to get the data. With JSON, however, you just make one call, render the graph and display the table. Maybe calculate totals or do whatever you want with it. Hand it out to people as an API if you wish, after all :)
If you ask me, I would definitely go with client-side graphs as most of the devices have nice HTML5 support nowadays and being able to display a graph on an Android phone, or an iPhone or an iPad shouldn't pose a problem. If you only need images and you don't wish to expose the original data, go with PHP.
My opinion is that having a server side solution (i.e. php) takes away any browser compatibility issues you may have with a client side solution (i.e. javascript) and hence support issues.
A benfit of using JS is that it does offload resources from your server to the client because you may only have to generate some light weight data (e.g. JSON , XML) and the rendering occurs on the client. You will have to investigate how many hits your server is likely to get, etc to determine if resource is an isuse with PHP or JS.
However, using Php to create images of charts you can always get around the performance/resource issue by using a cache of the image files and serving from the cache (it's a just a folder of images) instead of generating a new one. Whether you cna use a cache will depend on your usage. If clients require up to the second data and its always changing, obviously a cache may not be of use.
Here's what I see :
Using PHP
Increase load on the server for the request
Will work everywhere
Also, like someone said here and made me think of it, you can cache the image that PHP give you, reducing bandwith (no lib to download) and reducing load (cache)
Using Javascript
Decrease load but increase the bandwitch and addition http request (to load the JS lib)
Will work where JS is available
But remember, PHP take more load then an HTTP request.
Also, always remember, Javascript is made for effects and specials stuffs you need to display.
There is one PHP render advantage that no one told about. Since sometime you need to include chart as image into PDF, DOC, XLS etc. file or email it – you have no other way except to render chart on server and store it as image to be inserted.
For data manipulation you use PHP.
For visual and behavioral effects you use JavaScript.
For that reason, you should use Javascript as its designed for visual behavior. Plus it will put less load on your server as all processing will be client side. As more people use your application simultaneously, it will start to slow down as your server will be doing a lot more then it has to.
Hope that helps :)
I have two basic bar charts and I am currently using XML/SWF Charts which is great but the problem I have is I need to be able to send these graphs via email to the user. As well as display them on the site.
I know sending Flash is a bad idea, I would love to find a way to convert my current graphs to an image, but am pretty certain there is no quick fix without building a work around myself.
Therefore what are the best open source or closed solutions for this problem.
I need to be able to display two graphs dynamically and then email them to users.
Any advice is appreciated.
You may want to check out the "Google Image Chart Api" (not to be confused with the Google Chart API).
http://code.google.com/apis/chart/image/
It allows you to generate numerious different types of charts just from the URL.
For example:
https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
That URL could also be put into an HTML e-mail.
Alternatively, looking at this stackoverflow quesiton FLASH save frame, to image (tiff, bmp, jpg, gif, png)
If you can modify the flash movie. It appears that you can save frames in AS3 via BitmapData. So you may be able to send the data back to the server for processing (emailing). But I can't vouch for this as I haven't tried it.
jqPlot seems pretty good. Piwik uses it. http://www.jqplot.com/
I would recommend using gRaphael. It is a javascript library for rendering graphs using svg(or vml for IE8 and below). I've personally use it and it is quite good.
This probably won't work for you since you're not running .net, but for anyone else who's looking for resources for generating charts there's the MS Chart controls.
I have a question. I have to prepare a good report module for an application in PHP and MySQL. The report should be in two forms: a graph and a normal table with text. Tables and text are simple, but the graph is what I don't know how to begin. I was thinking about HTML5 (canvas) and Javascript, but honestly I don't know if this is a good idea.
I don't know if HTML5 is rendered on all browsers in the same way. A while ago it was a problem and I didn't have time to investigate it by myself. Good tips about new elements (canvas, article, footer and so on) on different browsers (including mobile ones) would be nice.
Maybe someone had similar problem and can give a tip on how to begin?
There are lots of free javascript tools for that, for example:
jqplot
Google charts
Google charts uses canvas for canvas capable browsers and flash for other browsers (like IE).
One thing you might consider is using wkhtmltopdf to generate a PDF of whatever HTML5 you want, using the consistent Webkit rendering engine. I'd set it up like this:
The user clicks a link that says "generate"
This loads a script which runs the report (generates the data, etc.) and outputs the HTML needed to a temporary file
Invoke wkhtmltopdf using the temporary HTML file as input and output it to a temporary PDF
Read the PDF into PHP, set the headers, and output the PDF to the browser
This should create a fairly seamless experience and shouldn't take more than a few seconds to run, and since it's Webkit, you can use whatever Javascript library you want to make charts (I like flot).
Depends on your target user group. If you wan't to hit the maximum ammount of web browsers you should probably go for a flash based graph solution. Flash however is not supported on iPad and iPhone.
If you want to support iPhone/iPad and still have an interactive graph, go with Canvas - however i don't belive it's supported by Internet Explorer yet.
I want to take data from a table that'll be almost exactly similiar to the one below, but have it in a line graph. The date values would be on the Y-axis, and it would plot the XP values on the X-axis. Since the numbers for each user vary, I'd need a way to make the distance between each point plotted "relative", I guess.
Example table http://img687.imageshack.us/img687/4175/tablel.png
Any suggestions?
If you want to generate a static image of the chart you could use Libchart or pChart for PHP.
It's better to get the data from the data source, not from the rendered table. Anyway it's two separate questions: how to take data from a table and how to draw a graph.
Drawing a chart in PHP is pretty easy. HTML/CSS can be used to draw a bar and PHP to calculate the bar length.
Or if you want to go the JavaScript route, maybe Raphaël.
I would go for HighCharts.
If you're using a linux/unix platform, you probably already have Gnuplot installed. Gnuplot can take a plot file and a datafile and generate an image, thus:
History.gnuplot, which needs to be generate first:
set title "Rawr_satch history"
set xlabel "Time"
set ylabel "Ranking"
set output "rawr_satch_graph.png"
set terminal png color
set xdata time
plot "rawr_satch_xphistory.dat" with linespoints
Which assumes a data file rawr_satch_xphistory.dat has already been generated, formatted thus:
2010-03-06 385581123
2010-03-05 384895430
2010-03-04 382983388
People have also written interfaces into Gnuplot for most languages, for example PHP-GNUPlot. Gnuplot scripts can be quite complex, and you could plot multiple variables, etc.
I use and fully recommend the Google Chart Tools API. If you're looking for a simple line-graph, they provide a very simple API that you can call that requires no installation or configuration. Some of the documentation is confusing, but I've been able to figure it out with a little bit of patience.
All that is required is an IMG tag and point the src to the Google URL with the right parameters.
They also have a more interactive Javascript library if you want to provide more functionality later on.
I've used the following from PHP: Google Charts, Open Flash Chart, YUI charts (Flash), and AMCharts (also Flash).
They're all pretty easy to use and all have their pros and cons. If you want to show more than a single graph on one page, don't use Flash-based charts. It turns out browsers have trouble displaying a dozen Flash charts all at once. AMCharts is probably the most feature rich, but the options available depend on which of their chart packages you select, and configuration is pretty complex.
I was wondering if it's possible to create an image of a div inside a page in php, jquery or javascript? Or even just a screenshot of the entire page (on my own server - not external)..
What I want to do is create an image of a graph (drawn in via jQuery) and pass it onto a PDF, as I can't seem to get the jQuery to display in the pdf..
Because of the security risks, it is not possible to get Javascript to make a screenshot of a web page. This would allow you to steal credit card info, etc... You can use an active X control or something like that, but the client has to knowingly install it in order for things to work.
In PHP, you can create an image and place it on a web page, but again, you cannot see what is on the client's screen. It has to be done on the server before it is sent to the client.
Here is an example of a library you can use to draw a graph in PHP. http://www.aditus.nu/jpgraph/
You might be able to mimic what jQuery is doing in your script but it will take a shift in your applications design.
Take a look at this article:
http://www.developerfusion.com/code/181/capture-screenshot/
It's not client-side code, but you mentioned PHP so maybe server-side code is an option. I don't think you can do it client-side...
How about using a server side graph generator, for example for PHP? Maybe the transition hurts but you'd get a really stable and simple solution.
If you describe what kind of charts you exactly generate and what server side options you have, I'm sure you'll get some specific hints.
Your best bet is to use the GD library on the server to generate the graph as needed. There's no practical way to screencap the browser canvas. Check out this PHP graphing library, it may be what you're looking for:
http://graphpite.sourceforge.net/
If you run into problems where you're doing processing on the client-side that don't exist on the server (i.e.: summing up rows or taking in user settings from cookies), maybe you need to consider passing that data back to the server and letting your hosting handle it (after all, that's why you run a server with lots of RAM and a big CPU, to crunch numbers).
If your javascript draws the graph on a canvas, you can serialize the canvas and then send it to the server using POST.
I don't know if jquery can draw the graph on a canvas, but if the graph is a simple one you could probably code it yourself as canvas has drawing tools already.
Obviously, this only works with browsers supporting canvas.