Making a speedometer?? (Beginner)
Moderator: General Moderators
Making a speedometer?? (Beginner)
Hello!
Allright so i want make a gauge. But i don't know how.
I want a speedometer look, and that the arrow moves according to the database values. I've been googleing alot about this but i haven't found anything that explains how i should do.
An Example:
The question is, Do you watch the olympics?
Two answers, Yes and No.
The database saves these and when you press View results(<-this i know), the speedometers arrow should point at, lets say 60%. Then you know that 60% watches the olympics and 40% doesn't. (it is a half circle)
I appreciete any help!
If you haven't notice i'm new to PHP so use your easy words.
Allright so i want make a gauge. But i don't know how.
I want a speedometer look, and that the arrow moves according to the database values. I've been googleing alot about this but i haven't found anything that explains how i should do.
An Example:
The question is, Do you watch the olympics?
Two answers, Yes and No.
The database saves these and when you press View results(<-this i know), the speedometers arrow should point at, lets say 60%. Then you know that 60% watches the olympics and 40% doesn't. (it is a half circle)
I appreciete any help!
If you haven't notice i'm new to PHP so use your easy words.
Re: Making a speedometer?? (Beginner)
PHP won't be of much help to you, other than to interact with the database to get the numeric data you need. Display of all kinds is done with HTML, CSS and Javascript. You might be able to do this with HTML5 drawing capabilities, but I have never tried.
Here are a few references:
https://geeksretreat.wordpress.com/2012 ... 5s-canvas/
http://stackoverflow.com/questions/5083 ... ple-needed
https://github.com/vjt/canvas-speedometer
http://teknonics.wordpress.com/2012/04/14/179/
Here are a few references:
https://geeksretreat.wordpress.com/2012 ... 5s-canvas/
http://stackoverflow.com/questions/5083 ... ple-needed
https://github.com/vjt/canvas-speedometer
http://teknonics.wordpress.com/2012/04/14/179/
Re: Making a speedometer?? (Beginner)
Okey! HTML and CSS was I already ready to use, i forgot to say that. Lets say you can use any way you want just use as much PHP as possible.
Is it possible to do this with HTML, CSS, PHP and javascript? And how?
Is it possible to do this with HTML, CSS, PHP and javascript? And how?
Re: Making a speedometer?? (Beginner)
It's not a matter of choice, PHP runs in the web server and has no capability to affect how anything is displayed in the browser. HTML and CSS and Javascript run in the browser and control everything that is displayed. That's why I gave you those links--they explain how you can do it. One of them does exactly what you said you want to do. PHP only sends the HTML, CSS and Javascript to the browser after preprocessing it. They do entirely different things.
Re: Making a speedometer?? (Beginner)
Wow !
Never knew something like HTML5 canvas API existed ? - But the outcome is really awesome. (Talking about this speedometer demo.
For the moment does not work in IE. Time to look into this
Never knew something like HTML5 canvas API existed ? - But the outcome is really awesome. (Talking about this speedometer demo.
For the moment does not work in IE. Time to look into this
Re: Making a speedometer?? (Beginner)
IE8 and before do not support most of HTML5. IE9 is supposed to, but I haven't tested it. IE is pretty much the last browser to support HTML5.
Here are charts showing which browsers support what:
http://speckyboy.com/2012/03/25/getting ... atibility/
Here are charts showing which browsers support what:
http://speckyboy.com/2012/03/25/getting ... atibility/
Re: Making a speedometer?? (Beginner)
i was going through the speedometer source code - ands its all js - wheres the role of html5 - i mean do not see any <canvas> tag in its source.
Re: Making a speedometer?? (Beginner)
I didn't look at that particular one. I'm sure you can do it either with js or html5's canvas. Google for html5 canvas speedometer.Live24x7 wrote:i was going through the speedometer source code - ands its all js - wheres the role of html5 - i mean do not see any <canvas> tag in its source.
Well, of course, you need js if you want to have it interactive, like that demo, rather than just display, based on some value.
Last edited by califdon on Sat Aug 11, 2012 1:03 pm, edited 2 times in total.
Reason: Added an afterthought.
Reason: Added an afterthought.
Re: Making a speedometer?? (Beginner)
Actually, the demo you mentioned DOES use html5 canvas. If you view the source for that demo, notice that in the <head> of the page it references several js files. Click on the speedometer.js to see the full code that actually does all the work. It's a pretty long script.