I'm open to php graphing frameworks aswel, or anything that can output a .png with a nice transparent canvas background.
Anyway the data I have is like
-Time in format:: 25/11/12 - 11:20:01 PM +0000
-Total Players online:: 29
-And a list of player names:: Player1, Player2, Player3
For the time format I could convert to epoch if it would make things a lot easy to graph?
I've seen some graphs where you can zoom in and out on a time line.. As I've got results taken every 5mins that's about 288 results for a 24hr period. So just looking for something that would be fairly easy to setup.
The extra fancything I was wondering was, if on mouseOver a particular result, it could show player names on at that time?
So anyone familiar with all the different javascript graphing scripts know of one that would easily do this without to much extra scripting on my side seeing i'm not fluent with javascript much at all.
Javascript:
Try Highcharts - A good library which I've used recently as it's got a lot of functionality and is highly flexible/configurable.
You could also try Rgraph too, which is an HTML5 charting library written in Javascript and that uses the HTML5 canvas tag to render/draw.
PHP:
JpGraph is a solid PHP-driven charting library that has been around for years and has been continually improved.
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.
My client needs to use IE8. I'm using the flot graphing library and I'm hitting a limitation of the performance of javascript in IE.
When there are a thousand points the graph takes up to 10s to display. I have seen one possible solution to speeding it up, but not sure how well this will work.
Has anyone tried optimising flot for IE?
Failing that has anyone done some performance analysis with the various PHP javascript (not flash) graphing libraries if there is one that will out-perform flot in IE8 (i.e. without canvas).
You can try jqChart. The render speed of the Line Chart is optimized for handling a large set of data.
Take a look at this sample:
http://www.jqchart.com/samples/ChartPerformance/LineChart
You might want to take a look at Highcharts. It is compatible with IE 6 and the chart in this time series demo has 1096 points.
I have used this library in my applications with success, although you will have to evaluate it yourself to see if it meets your performance requirements.
Your only hope is to figure out a way to not plot all the points at once. For instance, if you try to plot 10,000 points on a graph that is 600x300, chances are that the majority of points overlap each other almost completely.
What most people do in these situations is pre-compute (server-side) averages, or whatever type of aggregation is necessary, then plot that instead. Then, use the selection plugin to allow them to zoom in on smaller areas of the graph and only there plot the complete data set for that area.
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.
Here it goes.
I have been thinking about this for a long time, and havent really been able to put up a proper way to do it yet. I havent implemented anything yet, as im still designing the thing.
The idea is that i crawl a website for internal links, i got this settled, its easy, but after the crawling, i end up with an array with lots of links, and how many times those particular link appears on the site that i crawled (and how they're connected).
With this huge array, i want to draw a graph somehow. Assuming i can handle the data correctly, the real question here is how i can draw this in a image by the use of the GD library.
I figured if theres less than 12 elements, i can align them up on a unit circle spacing them up as a circle and then connecting them accordingly, so anything up to 12 elements shouldn't be a problem, but if theres more than 12, it could be awesome getting them lined up like this http://nayena.com/stackoverflow/graph.png Or well, thats just a rough drawing, but i guess its just to prove a point.
So i'm here looking for guidance or tips towards getting the math down to getting the stuff lined up in a good way.
I have previously made bar-graphs, so i have little experience doing math with GD. If possible, id prefer not using some plotter-library - in the end, it gives me a better understanding on how things are supposed to be.
This is a whole subfield of CS/IS, with textbooks, research papers and symposia devoted to the subject of graph drawing.
GraphDrawing.org
Graph Drawing: Algorithms for the Visualization of Graphs
Graph Drawing Software (Mathematics and Visualization)
Drawing Graphs: Methods and Models (Lecture Notes in Computer Science)
http://vis.computer.org/
You could devote an entire career to how to plot a graph.
I am looking to generate transport maps in a style similar to the iconic London underground [tube] map.
These maps will change from time to time and many will be required so instead of drawing them up manually in inkscape [or similar] I am hoping to have them generated dynamically from a db or dataset.
Does anyone know if there is any library apis etc. out there that would help with this task, or any suggestions in general of how [or how not] to go about this ?
I am thinking svg's would be the best way to go with this, plus there may be need for basic interactivity down the line.
I am working in php so otherwise it's GDlib, ImageMagick ?
Thanks in advance.
.k
Well, the answer really isnt in how to use GD or ImageMagick, there are manuals for that. As for helper libraries, most libraries focus on graphing, anything else you will have to write yourself. Your best bet as a solution would be to have your admin interface generate the images when data in the backend changes and cache the images, since there's no reason to build the image every time someone accesses it.
For generating maps, i think your best bet would be defining stations with one or many 'lines' which determine some sort of indicator of relationship to the stations around, and an x,y. You'd probably only need to determine a 'parent' station since you're just drawing lines from a-b. That way you can position them in the same manner as they're typically rendered on the actual trains, use the lines and surrounding stations to draw mappings.
Doesn't sound like too difficult a problem. 3 tables:
stations [stationid,name,x,y,meta1,meta2],
placements [placementid,stationid,lineid,parentstationid],
lines [lineid,name,meta1,meta2,colour,etc].
SVG would be pretty good at this sort of thing, and you would avoid the whole image building and caching process, but be wary of browser support issues.
Sounds like a pretty interesting project though, good luck :)
One strategy I use when I need to generate graphs from data in a db is to extract the data in some kind of XML way (e.g. Oracle SQLX or Cocoon XSP/ESQL or eXist-db XQuery) and process it through an XSLT to generate SVG. Good old Cocoon is fine for this kind of job if you don't want to write any code (except the XSL of course ;-).
The SVG itself can be loaded in some graphic tools to reprocess.
These maps will change from time to
time and many will be required so
instead of drawing them up manually in
inkscape [or similar] I am hoping to
have them generated dynamically from a
db or dataset.
If I were in your shoes, the very first thing I'd do is try to prove that the Google Maps API won't work for your application. Then, maybe, prove that ArcGIS won't work. (Even if they don't work, they're widely used, and you get to add lines to your CV.)