CODEWITHSUNDEEP
phphtmlcss
Sander Koedood
Sander Koedood

Reputation: 6337

Drawing graphs in PHP or HTML

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)

Image example

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.

Upvotes: 2

Views: 3917

Answers (2)

Sander Koedood
Sander Koedood

Reputation: 6337

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.

Upvotes: 1

Sam
Sam

Reputation: 500

You should check out Charts.js by Nick Downie. It has simple HTML5 Charts using the canvas element -

Charts and Graphs Included:

  1. Bar Chart
  2. Doughnut Chart
  3. Line Graph
  4. Pie Chart
  5. Polar-area Chart
  6. 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

Upvotes: 1

Related Questions