Charts and graphs are graphical representation of data that organizes and represents a set of numerical or qualitative data used for analysis such as bar graphs, line charts and pie chart. Are you tired of lame and not-easy to deal with graphs and charts?
There are techniques that will lessen the static images and create more accessible content of the charts and graphs. Techniques in using CSS, jQuery plugins ,and online chart tool generator are some of the few things you can do about your charts and graphs.
Here are some techniques to style up you charts and graphs:
1. CSS Charts and Graphs
CSS (Cascading Style Sheet )is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. – Wikipedia. It affects the display properties of a web page.CSS deals with HTML, XHTML and XML language. Here are techniques that will create a style on your charts and graphs. I think that the most useful feature of the CSS is that the style and layout are removed on the HTML page making the size smaller that reduces bandwidth requirements and faster download for your visitors.
Browser issue is one of the disadvantage of the CCS because it does not work consistently in different browsers. Earlier versions of Internet Explorer and Netscape will just display a plain html page not like Firefox and new versions of Netscape.
CSS Vertical Bar Graph
A technique that uses unordered list element to achieve the height and width. The positioning of the 4 quarters using the ul element of position: absolute. The div element that uses to create the horizontal bars. To add the colors, go all the way with the CSS color image elements.
Pure CSS Line Graph
Line graph is the simplest way of data representation. If you are not comfortable using scripting language to create your line graph, this CSS line graph will give you an ease in presenting your data. Combination of your CSS sprites and positioning that creates a simulation of the line graph. This technique used definition list element (DL) that represents the coordinate system.
There are lots of posting about bar graph but not with stacked bar graph. Stacked bar graphs are commonly used in placing the most uniform series in the lower part so it’s easier to gain insight about the data. HTML and CSS come hand in hand in creating a CSS stacked bar graph. It uses definition list to present the data in organize way. The <dt> tags and <dd> tags are used to dynamically access the content of the graph and it easier to style using the CSS.
Creating Pie Chart with CSS3
Pie chart or a circle graph is a circular chart divided into sectors that illustrates proportion. It is usually in percentage. This technique works only in Firefox, Chrome , Safari update, and Opera because it uses CSS3. Using the div element to create the circle and the radius. By using the clip property to show only the half of the circle. By stacking all the pie element and rotating it with its percentage amount and adding color property you’ll get that pie chart.
Complex CSS Bar Graph
Love, Education , War Craft are few things to graph. Is it in a good side or bad side? With this complex bar graph , an indicator that uses a marker position to determine your data. The color scheme also help in identifying the data from lighter shade to darker shade. With the help of the <dl>, <dt>, and <dd> tag incorporated into CSS , your ready to mark.
2. jQuery Plugins for Charts and Graphs
jQuery plugins are tools to extend the functionality of the applications. These are easy to install plugins that will lessen out your work in coding. Here are the 3 most used jQuery plugins for charts and graphs. The advantages of the jQuery are lightweight,easy and fast , write less but do more in functionality, cross – browser compatibility, easy integrations with applications and to cite a few.
Flot Demo || Flot Download
- Creates graphical plots
- Special Features: Zooming and Mouse Tracking
- Simple and easy to use
The features include line chart, bar chart, tristate chart, discrete chart, bullet graph, pie graph, and box plot.The plug in was written by Gareth Watts. I found out that the Sparklines could also be use in Microsoft Excel 2010 to show the data trends.
- Creates small inline charts
- Customize size and colors
- Numerous Style: Inline Graphs, Bar Chart, Tristate Chart, Discrete Chart, Box Plot, Pie Chart and Bullet Chart
- Added Functions: Mouse Speed, Negative Values, threshold
- Supports: Firefox 2+,Safari 3+,Opera 9,Google Chrome, and Internet Explorer 6, 7 & 8
- Numerous chart style options.
- Date axes with customizable formatting.
- Up to 9 Y axes.
- Rotated axis text.
- Automatic trend line computation.
- Tooltips and data point highlighting.
- Sensible defaults for ease of use.
- Supports:IE 6, 7 & 8,Firefox,Safari, and Opera
3. Flash- based Charts and Graphs
Flash is a tool that creates interactive and animated applications in your Website. Animations or movable images are fun and create more impact on the viewers.
Fusion Chart is a free Flash Charting tool that let you create animated and interactive Flash Charts for your web applications, desktop application and presentations.
- Most of the basic charting needs
- 22 popular charts like Column, Line, Pie, Bar, Area, Stacked, Candlestick and Funnel Chart, that look the same across all browsers
- Animated and interactive charts that make your applications look “wow”
- Works with PHP, ASP.NET, JSP, ColdFusion, Python, RoR, simple HTML pages or even PowerPoint Presentations
- All the charts can pull data from any database and are AJAX enabled
AmCharts offers really a great range and customize set of charts. Dynamic used of this web-based product will surely generate your data into a great chart.
- Chart Styles: Pie & Donut, Line & Area, Column & Bar and Scatter & Bubble
- Can be generated in 2D or 3D charts
- Extract data from CSV or XML files
- Read dynamic data generated with PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion, and many other programming languages.
AnyChart offers a dynamic Flash-based charting component. It is an XML driven that is compatible in any data format It is not a free tool but it offers a trial version for the first time users but if you want to maximize the potential of this tool, $649.00 is all you need to have a license purchase.
- Cross-browser and cross-platform
- Generate Pie, Bar, Line, Candlestick, Area, Column, Bubble, Spline, Dot/Marker, Scatter, Candlestick and Doughnut charts
- Can be used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages and also PowerPoint presentations.
XML/SWF Charts provides flexible and dynamic chart generating tool that output best graphic quality.
- Quick generation of charts and graphs from static or dynamic data (any scripting language)
- Full updates and data streaming without reloading the web page.
- Interactive scrolling (any number of data-points), drill-down, 3D rotation, links, guides, labels, etc.
- Animated transitions and quality Flash graphics, including anti-aliased fonts, transparency, shadow, bevel, glow, and blur.
- Full screen mode, scalable charts, printable charts, and bitmap export.
- Supports unicode text to display special characters and multi-languages.
- Variety types of charts
4.Online Charts and Graphs Generator
Are you tired of coding and just want to generate the charts and graphs you always wanted?
Here are some of the useful charts and graphs generator:
DIY (Do It Yourself) Chart is a web-based tool that lets you create your charts and graphs in any scripting language you want from static to dynamic one. It offers features that is user-friendly , different type of charts, support multiple data and supports and language.
Who said that graphs and charts are never fun to kids? This is the best and easy way to use to tool for young at heart.With a friendly graph creating tutorial, surely kids will love this for their homework.
Design and share your graphs for free. The best way to share numerous type of charts and graphs are for free.
Statistical Analysis is never been fun but with the help of these existing tools and scripting your presentation will be way out easier. Just one code or click away your presentation will be the talk about in your meetings. Whatever techniques you want to use, try to experiment and find the best technique or tool your comfortable working in.
An IT explorer who loves to browse anything over the web which made her an enthusiast blogger. She is aggresive to learn new things and share through writing.