* This post is regularly updated. *
A new day a new list. Today we would focus on using CSS and Javascript techniques to create awesome and useful charts, graphs, bar charts, pie charts or diagrams. Almost all of the snippets are made freely available and only need simple CSS and Javascript knowledge. Thanks all the respectable web developers and designers. Now, it’s time to create a chart for your blogs!
CSS For Bar Graphs – good looking, only need pure XHTML and CSS only.
Webfx Charts – can create stacked area, line and bar.
CSSPlay Bar Charts – is compatible with major browsers.
Canvas 3D Graph – based on excanvas Javascript, works well at FireFox and Safari.
CSS Line Graphs
Accessible Bar Chart
Dojo Charting Engine – let you create complex charts easily.
PlotKit Chart Plotting – a chart and graph plotting library for Javascript.
Plotr Charts – lightweight charting framework.
AJAX Mgraph – based on Prototype Javascript.
Terrill Vertical Bar Graphs – CSS and PHP techniques are required.
CSS Vertical Bar Graphs – typical vertical bar graph, right click to see the source code.
Dynamic Pie Chart with CSS – creating a semi-dynamic pie chart.
Khmerang Bar Graphs – awesome gold!
Chronoscope Interactive Chart – works at Firefox and Safari.
jQuery Chart – based on jQuery Javascript library.
Dynamic Drive Pie Graph – simple pie graph, created by DynamicDrive.
Dynamic Drive Line Graph – simple line graph, also created by DynamicDrive.
Complex CSS Bar Graph – designed by ApplesToOranges.
Canvas Graph – similar with PlotKit Chart Plotting.
CSS Bar Graphs – basic bar graph.
Maxdesign Percentage Graph
More related links and resources…
High Performance JavaScript Vector Graphics Library – draw circles, ellipses, oblique lines, polylines and polygons dynamically into a web page.
Create A Graph Classic – simple online graph generator.
FooPlot – online graphing calculator and plotter.
Flowchart – free to create charts online.
CSS Bar Graphs and Charts
Ejschart – powerful Javascript chart, commerical only.
Amcharts – free version will display a small link on charts.
Create cross browser vector graphics – by Dylan Schiemann @ ThinkVitamin.
check out: http://simile.mit.edu/timeplot/
I used php/swf charts for my recent project “What’s My Crossover?”
http://www.maani.us/charts/index.php
It was very easy to use and flexible.
Hi,
i have made CSS Bar Graph (totally personalized):
http://read.melodycode.com/news/291/css_bar_graph.html
a little bit of CSS and xHTML
Good resource! Thx.
Great website and form with some amazing tips. Has been a great help
Hi,
I require a line graph which displays the coordinate values and also should work with dynamic data from php script. Somebody suggest.
Thanks – this page was quite useful!
Any way to save these as gif’s or jpg’s??
Pingback: Code free java script - Script tutorial - Free scripts