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.
Related
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'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.
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'm thinking about setting up a website (based on WordPress) to host video tutorials on interpreting CT scans.
In addition to simply letting the visitor view PowerPoint presentation videos, I'm keen on writing some sort of simple app that I can embed in the blog to allow the visitor to scroll through a series of images (i.e. a scan).
I usually code in REALbasic or Objective-C. I have some experience with PHP. What are my language options for making an interactive embeddable image viewer in a blog? The website needs to be able to be viewed on an iPad as well as normal desktop browsers.
Javascript.
Pick up jQuery, or a similar Javascript framework. It will help you get down to business faster.
What you are asking has nothing to do with server-side coding. It is all client-side. Because of that, your choices are something to do with a plugin (such as Flash), or Javascript. If you want it to work on an iPad, Flash and other plugins are out.
Since you need your image viewer to work on the iPad, ActionScript3, hence, Flash is out of the picture. I would use JavaScript as per the examples on the Apple HTML5 advocacy site, using the canvas element to render the viewer.
I would lean towards a javascript solution. There are loads of libraries out there that will give you a kickstart. If you know some example works of what you are thinking about doing, we can give you pros and cons for serverside vs. client side languages. Additionally, you can use html5 for a lot, but then again it depends on what exactly you are wanting to do.