I'm well aware of a large number of chart rendering frameworks, some Javascript (like Google Chart, ThreeD, HighCharts), PHP based ones like jpGraph and pChart and online REST API's like Google's old chart tools (to disappear in 2015).
All of them seem to specialize in one particular "flavour" of graph; either rendered images or browser-based graphs using SVG, Canvas, Flash or such. I'd like to be able to present a report both in the browser and exported as a printable PDF. Converting static HTML to PDF can be done using a number of frameworks (I prefer mPDF) so that won't be a problem.
What I'd like is a single framework that is able to generate graphs both as images and browser-based. Obviously they should be compatible with a wide range of browsers and the graphs should look similar (not necessarily identical). Preferable using PHP and/or JS, but I'm open to suggestions.
Does anybody know a single chart framework that can render both to images and browser-based?
If there are multiple frameworks with nearly identical API's and graphs, that would be good too, but I doubt such a combination exists. ;)
I don't know any library which is able to render a bitmap and a svg or canvas, supporting all the graph and drawing features.
If I had this problem, I would take a serious look into phantomjs:
http://code.google.com/p/phantomjs/wiki/QuickStart
It is a headless browser which can render bitmaps or even PDF. The advantage is, that you just have to develop the browser based rendering and phantomjs could take the job of rendering the images.
Related
Can anybody suggest me what should I do ?
I am generating the PDF report and in the report, I have to print the high chart graph. As high chart uses the javascript which will not execute in PDF file, So I have to create the graph on the server.
I read many posts, they suggest me that i have to create the image of that graph, but my question is how will I create the image to that graph ?
You could try using server-side "browser" or JS engine to generate your graphs; there are tools that can be used for that.
For that purpose I used those:
PhantomJS: some quirks regarding header/footers but a nice lot of examples on website
WkHTMLToPDF: highly customisable, but I had trouble setting timeouts properly so graphs are fully generated before PDF output
But there are others.
As Preuk says, phantomjs is a good choice and what I use, here's a guide to it on the Highcharts site: http://www.highcharts.com/news/56-improved-image-export-with-phantomjs
It can be fiddly to get going but works well once you get it up and running.
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.
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 need to generate a line graph based on results within a MySQL database, any ideas?
I must also point out that I do not have administrator rights to install things such as JGraph.
Google has a pretty comprehensive charting API available via javascript calls or simply image links. http://code.google.com/apis/charttools/index.html
You can use the GD library, right?
Should be able to use that to do a line graph as an image. You'd have to determine a scale and all that and figure out how to map that to the X and Y coordinates of the image, and then use that to plot the numeric data to the graph and use imageline() to draw the lines for it.
It would be the most compatible method. Java can be turned off and Flash isn't universally supported.
I don't want to give you a specific library to use, but if you searched google for "flash graph", you'll find a ton of flash graphic software. See http://www.google.ca/search?q=flash+graph&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
Note, these don't require anything to be installed on your server (unlike how jpGraph requires GD).
Check out PHP/SWF Charts.
To support mobile devices, you can use a JavaScript charting library such as Flot (http://code.google.com/p/flot/).
Example : http://people.iola.dk/olau/flot/examples/basic.html
This would work for desktop (IE / Firefoex /Chrome / Safari) as well as mobile (iOS / Android / Blackberry ).
jqPlot has come on in leaps and bounds recently.
A few stand out features from my point of view:
Proper implementation of rotated axis labels/text (Google charts can't do this)
Ability to plot many graph types including bubble and candlestick plots (like box and whisker plots)
jQuery based so easy to integrate if you are already using jQuery
Doesn't require an externally hosted API
Free
Features from their site:
Numerous chart style options.
Date axes with customizable formatting.
Up to 9 Y axes.
Rotated axis text.
Automatic trend line computation.
Tooltips and data point highlighting.
Sensible defaults for ease of use.
I am using jqPlot in a large project at the moment after trialling the following "competitors":
Protovis
amCharts
Google Charts
Highcharts JS
RGraph
PHPs GD lib
flot
And for fun here is a fully working ASCII pie chart written in pure SQL: http://code.openark.org/blog/mysql/sql-pie-chart
You can make an bar-graph relatively easy with php, html and css.
HTML/CSS part: As pointed out by Col. Shrapnel above:
It's as easy as elementary school math
and basic HTML just a couple divs
of this kind
<div style="background-color:black;width:50%;"> </div>
<div style="background-color:black;width:30%;"> </div>
<div style="background-color:black;width:20%;"> </div>
Custom bar images: If you would like a slightly fancier bars, you can use your own customs images, manipulated trough the width: CSS property of the < img /> tag.
The search query bellow contains at least 2 comprehensible and easy tutorials, on how to make your own bar graph with PHP/
google search for detailed tutorials
This approach should be less resource consuming on the end-user's computer, compared to JavaScript APIs.