How do I make a dartboard-type chart for the web?
March 16, 2012 12:34 PM Subscribe
I made an awesome dartboard-type chart in Excel, but now I'm trying to put it on the web. Help!!
I used a radar chart in Excel to create a dartboard. The dartboard displays an employee's score in each of 7 categories. They can achieve one of four scores, so there is a bullseye, an inner ring, an outer ring, and then an area outside the dartboard. When opened in Excel, there's a single unlocked cell where the employee number is input, and the chart updates when the user hits Enter. There are seven "sections" of the dartboard, and so Excel plots each dart at its proper place from bullseye to outside.
It looks great in Excel but I want something that can be done in a browser without any fancy plug-ins, just an up-to-date browser (IE, Chrome, or Firefox). I realize they may not all use the same standards currently, and Chrome has some abilities the others may not, but ideally I'd want this to work in IE.
I'm thinking that if I could just have an image of a dartboard as the background, then overlay some "darts" (either text or an image) plotted along an X & Y, I could do this. I do not know if this is actually possible. The data entry part could be freeform or dropdown box, it really doesn't matter.
Other things to know:
-I'm not a web programmer but can learn
-I'm not the administrator of the final location of this project, so I'd need to be able to create it and then hand it off to someone else as a self-contained unit
-I'm open to other solutions, but I'd prefer no flash or other plug-ins/tech since I cannot be sure that the end users will have the know-how to install anything or update anything
Feel free to tell me "no f-ing way" or "here's my contact info and I'll do it for $X", but I'd really like to figure out a way to generate this myself and learn something along the way. This is not part of something I'm being paid to do, but it is something I'd like to show to my bosses later as a "hey look at this neat thing I was able to create..." kind of project.
I used a radar chart in Excel to create a dartboard. The dartboard displays an employee's score in each of 7 categories. They can achieve one of four scores, so there is a bullseye, an inner ring, an outer ring, and then an area outside the dartboard. When opened in Excel, there's a single unlocked cell where the employee number is input, and the chart updates when the user hits Enter. There are seven "sections" of the dartboard, and so Excel plots each dart at its proper place from bullseye to outside.
It looks great in Excel but I want something that can be done in a browser without any fancy plug-ins, just an up-to-date browser (IE, Chrome, or Firefox). I realize they may not all use the same standards currently, and Chrome has some abilities the others may not, but ideally I'd want this to work in IE.
I'm thinking that if I could just have an image of a dartboard as the background, then overlay some "darts" (either text or an image) plotted along an X & Y, I could do this. I do not know if this is actually possible. The data entry part could be freeform or dropdown box, it really doesn't matter.
Other things to know:
-I'm not a web programmer but can learn
-I'm not the administrator of the final location of this project, so I'd need to be able to create it and then hand it off to someone else as a self-contained unit
-I'm open to other solutions, but I'd prefer no flash or other plug-ins/tech since I cannot be sure that the end users will have the know-how to install anything or update anything
Feel free to tell me "no f-ing way" or "here's my contact info and I'll do it for $X", but I'd really like to figure out a way to generate this myself and learn something along the way. This is not part of something I'm being paid to do, but it is something I'd like to show to my bosses later as a "hey look at this neat thing I was able to create..." kind of project.
Can you export (or Save As) the chart to. .jpg, .gif or .png?
posted by chesty_a_arthur at 12:58 PM on March 16, 2012
posted by chesty_a_arthur at 12:58 PM on March 16, 2012
Best answer: Yes, you could relativly easily do this as a web page. You'll need to be able to:
Even if the necessary software isn't installed on your target server, you could install a web server for testing purposes on your local machine by installing Ubuntu and VirtualBox and have a development server in a couple of hours.
Don't let all that gobbledygook intimidate you. You can do this yourself. Work through the linked tutorial. Don't be afraid to copy-paste-and-tinker if you have to. (Remember your Tom Peters and Swipe From the Best With Pride.)
posted by ob1quixote at 6:07 PM on March 16, 2012
- Create a server side page to serve the result string containing the coordinates for a given employee using PHP, ASP, Perl, etc. You shouldn't need to use a real database. It should be relatively straightforward to retrieve your data from a flat file or CSV.
- Create a page with your dartboard image, a small HTML form containing a text box for the employee number, and a submit button to update the display.
- When the user submits an employee number, make an AJAX call from your web page to the results server to retrieve the appropriate coordinates for each employee entered.
- Use CSS and the position property to show text or an image overlayed on your dartboard at the appropriate coordinates.
Even if the necessary software isn't installed on your target server, you could install a web server for testing purposes on your local machine by installing Ubuntu and VirtualBox and have a development server in a couple of hours.
Don't let all that gobbledygook intimidate you. You can do this yourself. Work through the linked tutorial. Don't be afraid to copy-paste-and-tinker if you have to. (Remember your Tom Peters and Swipe From the Best With Pride.)
posted by ob1quixote at 6:07 PM on March 16, 2012
Response by poster: chesty a arthur, I thought about just creating the 28 possible combinations and calling each image up based on a dropdown box choice. The biggest problem with this is that it doesn't scale very well, although admittedly neither does the plotting x and y (although I think that's a problem that could be solved mathematically).
posted by snapped at 7:09 AM on March 17, 2012
posted by snapped at 7:09 AM on March 17, 2012
Response by poster: ob1quixote, that does sound complex but I'll look into one step at a time. Thanks!
posted by snapped at 7:09 AM on March 17, 2012
posted by snapped at 7:09 AM on March 17, 2012
This thread is closed to new comments.
posted by adamrice at 12:42 PM on March 16, 2012