If you need a flexible, functional charting system, this add-on is for you. It's intended for use on websites that need to show graphs with a high degree of flexibility. You can work with just 1 set of data, or multiple sets and display them as a: line graph, bar graph or pie graph.
If you're looking for something simple, check out our Instant Graph add-on.
Download from the Concrete5 Marketplace ($15)
Features:
- Uses Javascript, not Flash, so it's support in all web browsers (including iPhone/iPad)
- Customisable title (or blank for no title)
- 3 types of charts: line, bar and pie
- Flexible support for an unlimited number of series and data (entered in JSON format)
- Customisable height & width
- Customisable Y axis limits and segments
- Control the legend labels & placement
- Show & hide data sets by clicking the legend
- Customisable X axis captions
- Control the colours of: background, grid lines & data series
- Choose to show or hide data values (or show only on mouse hover)
- Adjustable markers (circle, diamond & square, with hollow & filled variations, or hide them)
- Choose to show mouse co-ordinates (in top-right corner of graph)
- Drag mouse to zoom specific area of graph. Double-click graph to reset zoom.
- Supports negative values (line graph & bar graph)
- Supports multiple graphs on the same page
Tips:
Data series are added in JSON format. Each value is separated by a comma, and data sets are wrapped in square brackets. This allows you to add a virtually unlimited amount of data to your charts.
In a line graph, you usually show 2 values to represent the X and Y axis (2 dimensions). Each value pair is wrapped in square brackets and the entire series is then also wrapped again.
In a bar graph, there is typically only a Y axis value (1 dimension). As such you don't need to wrap each value in square brackets as with a line graph.
In a pie graph, you typically just show 1 series of values (in 1 dimension).
Here are the data sets from the example charts below:
Example 1) Line graph: 2D, 2 series
[[1, 2],[2,5.12],[3,13.1],[4,33.6],[5,85.9],[6,119.9]],[[1, -3.6],[2,1.12],[3,14.1],[4,19.6],[5,60.9],[6,150.9]]
Example 2) Line graph: 2D, 2 series
[[1, -2],[2,-5.12],[3,-13.1],[4,3.6],[5,35.9],[6,69.9]],[[1, -13.6],[2,1.12],[3,4.1],[4,19.6],[5,-20.9],[6,40.9]]
Example 3) Bar graph: 1D, 2 series
[-2,-5.12,-13.1,3.6,35.9,69.9],[-13.6,1.12,4.1,19.6,-20.9,40.9]
Example 4) Pie graph: 1D, 1 series
[8,30,12,10,40]
This add-on uses jQuery 1.6, and so it requires Concrete 5.4.2 (or newer). If you'd like to make this work on an older version of Concrete5, simply download the latest version of jQuery and replace 1 file in your Concrete5 site: /concrete/js/jquery.js with the new 1.6 version. All other add-ons SHOULD work ok, so always backup your old jquery.js file just in case.
Examples:
Example 1) Line graph with 2 series of data and filled circle markers, legend placed outside the graph area. X-axis labels have been set to display months.
Example 2) Line graph with 2 series of data and diamond markers, legend placed on bottom-right corner of the graph area. X-axis labels have been set to display abbreviated months. Custom colours applied to graph background, lines and data series (blue & red). Also custom limits applied to graph (Y axis) as well as a custom number of Y segments (4 in this case). Mouse coordinates also enabled (top-right corner of graph).
Example 3) Bar graph with 2 series of data, and visible values. Legend placed in top-left corner of graph area. Custom colours for graph background, lines and data series (white and yellow). Negative values in this example. Custom X-axis labels. Modified height/width.
Example 4) Pie graph with 5 pieces of data. Legend placed outside the graph area. Automatic colouring for series but custom graph background colour.
Demonstration Video:
Screenshots
