I'd like to make a 'dashboard' page and show some figures in a graphical nice way.
My idea is to use an Illustrator design, export it as SVG and change the charts with CSS according to the values from the database.
Like these elements: http://graphicriver.net/item/infographic-elements/2656503?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=REDPENCILMEDIA
I would like to use those donut charts to visualize percentages. But how do I adjust the graphic with CSS (or jQuery).
Found some tutorials on d3.js and other libraries, but I'd like to use the Illustator design instead of generating the graph. Been on Google for 2 days now..
Any tips, hints, links, etc are welcome! Thanks :)
I think this is what you've been looking for: http://www.chartjs.org/
It's a lightweight js-library that allows you to make piecharts, doughnutcharts, .. easily.
Pretty easy to customize too.
Customization is always a pain in the ass for such things, but starting from scratch is much harder, so i highly recommend this.
Related
I would like to design some sort of a map, of a country, in which every state behaves as a different 'div'. Then I would link different pages to each of the states. But the borders of the state are not square/rectangle/any_regular_shape. The borders are complex shapes. How do I go about doing this?
Even though I break them in Photoshop, how do I recombine them perfectly in CSS?
Thank you!
You want something like this map, you should go for SVG and maybe RaphaelJS is a good start.
Try using an HTML image map:
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741
Lots of good tutorials out there.
Consider using D3.js Geo Projections. This post written by one of the main developers behind D3 should be a good start.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
Can any one point me to any resources for making graphs in HTML5? Most of resources I have seen through Google use animated graphs, I just want a simple static graph in HTML5. One more thing, I am really very weak in graphs, so a simple, easy to understand solution would be very helpful. I will be using this XML file to display data in graphical format.
US Canada Mortality
Thanks in advance :-)
Check out the new canvas tag. It allows you to draw shapes including rectangles and circles using javascript. Canvas Tutorials
If you're looking for just a standard bar chart, though, you can use the div tag with a specified width, height, and background color. This method avoids the use of javascript.
I've already asked a very similar question but that was using javascript/php - i've not had much luck finding an ideal solution so want try to emulate a chart using just CSS that looks similar to that below
As you can see the chart rows have a secondary element that is overlayed in a different colour & with a black border. This is the style that I am trying to achieve - can anyone suggest how to best go about this?
Can anyone suggest the best way to go about this possibly by creating another chart overlayed on top of another?
My attempt at doing the chart with pure CSS http://dabblet.com/gist/3142994
... and a second version with a lot less HTML and cleaner CSS: http://dabblet.com/gist/3143479
Instead of reinventing the wheel, in this case I'd recommend using an existing visualisation API. Google offer a fairly extensive one:
https://developers.google.com/chart/interactive/docs/gallery
If you're feeling adventurous and this isn't what you're after, use float: right; to align the left bars to the right.
I'm trying to create a symmetrical pie-chart with 6 pieces of 60 degrees each using html and CSS3 (only).
I've come across this article http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/ but doesn't quite understand the concept.
Can anyone help me with it or explain what is .pieSliceBlue, .hold and .pie classes in the link above responsible for?
Try this:
http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/
It is far more easier to use this JQuery and CSS, just need to give the values and pie chart will be created automatically.