SVG Graph Demo

The goal of this demo is to show some of the PHP SVGGraph features, and to help reduce the learning curve to get you started with creating your own SVG Graphs.

SVG (Scalable Vector Graphics) is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group.

The Master Summary with drill down sample that comes with Forena, includes an SVG graph. It's named the state graph and comes with a set of predefined graph generation options, such as colors (green and yellow), graph type (bargraph), data selection criteria (total at least 10000), etc. This included state graph is actually another sample that comes with forena, though it is hidden (using a forena option to do so) in the list of sample reports. Checkout this state graph link to see it anyhow.

Even though forena does an amazing job in creating SVG graphs, it is not (yet) obvious to get started with creating your own forena based SVG Graphs. And this because, as delivered, the state graph:

  • is the very only SVG sample within the delivered samples.
  • contains some predefined options that take some time to learn about.

That's why this SVG Graph Demo was created ... enjoy reviewing it!

To get started, how about this vertical BarGraph (in 3D, so it is actually Bar3DGraph) with like 20 different colors:

Vertical BarGraph in 3D (graph with vertical bars) 0 1,400 2,800 4,200 5,600 7,000 8,400 9,800 11,200 12,600 14,000 15,400 16,800 18,200 19,600 21,000 22,400 23,800 25,200 26,600 28,000 FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR ME MN RI State Total nr of users

Here is a sample of a CylinderGraph with fewer colors than the BarGraph before:

Vertical CylinderGraph (graph with vertical cylinders) 0 1,400 2,800 4,200 5,600 7,000 8,400 9,800 11,200 12,600 14,000 15,400 16,800 18,200 19,600 21,000 22,400 23,800 25,200 26,600 28,000 FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR ME MN RI State Total nr of users

Let's find out what a LineGraph would look like, using green triangles as markers, the line that connects the markers should be a blue dashed line (dashes of 3 pixels combined with 3 pixels of gap), and the area under the line should be filled in red, using 25% opacity for that filled area:

LineGraph (graph with a line joining the data points) 0 1,400 2,800 4,200 5,600 7,000 8,400 9,800 11,200 12,600 14,000 15,400 16,800 18,200 19,600 21,000 22,400 23,800 25,200 26,600 28,000 FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR ME MN RI State Total nr of users

Here is the ScatterGraph variation, using purple diamonds as markers, and with an extra best fit line added to it to draw a straight (red) line through the data points (using 7 pixels dashes combined with 7 pixels of gap).

Let's also zoom into the more interesting part of all the data included in the graph, i.e. start the Y-axis only from 7000, and increment the Y-axis values with 1000 (to get more detailed Y-axis data starting from 7000):

ScatterGraph (graph with markers drawn at horizontal and vertical points) 7,000 8,000 9,000 10,000 11,000 12,000 13,000 14,000 15,000 16,000 17,000 18,000 19,000 20,000 21,000 22,000 23,000 24,000 25,000 26,000 27,000 FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR ME MN RI State Total nr of users

Let's change to a PieGraph (also in 3D, so it is actually Pie3DGraph).

And let's use lots of colors (purple, cyan, red, blue, gold, green, indigo, orange, brown, pink, ...):

PieGraph in 3D (chart with slices) FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR ME MN RI

Here is a sample of a RadarGraph using red triangles as markers, the line that connects the markers should be a purple dashed line (dashes of 3 pixels combined with 3 pixels of gap), and the area within the line should be filled in green, using 40% opacity for that filled area:

RadarGraph (graph with values measured from the centre point instead of the X-axis) 3,000 8,000 13,000 18,000 23,000 28,000 FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR ME MN RI Total nr of users

Let's return to a BarGraph with horizontal bars, actually a HorizontalBarGraph. Let's only show states with a total nr of users of at least 12000 (instead of 10000) and we need to swap the labels also.

This horizontal BarGraph looks rather ugly, no? The data labels below the chart have become unreadable, even enlarging the width of the graph a bit won't really help (too much data-labels to be shown).

Horizontal Bargraph (graph with horizontal bars) FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR 0 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 9,000 10,000 11,000 12,000 13,000 14,000 15,000 16,000 17,000 18,000 19,000 20,000 21,000 22,000 23,000 24,000 25,000 26,000 27,000 Total nr of users State

By applying some advanced SVG Graph features it is possible to enhance the previous graph to something that looks already much better.

Refined Horizontal Bargraph (graph with horizontal bars) FL DC AL IL VA CT VT KY OH NJ CA SC MO WI NE MA OR 10,000 12,500 15,000 17,500 20,000 22,500 25,000 27,500 Total nr of users State

In case you haven't noticed yet, all graphs above also includes drill-down links. Just click on any of the colored items in any of the charts to view another report with the selected data.

As a reminder: this is just an introduction to create SVG Graphs. We haven't even mentioned some of the additional features, such as:

  • stacked and grouped variations of horizontal or vertical BarGraphs or CylinderGraphs, which out-of-the-box are supported also (can't cover everything in an introduction ...).
  • MultiRadarGraph variations of RadarGraphs.