svg_demo.frx 13.8 KB
Newer Older
1
2
3
4
5
6
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE root [
<!ENTITY nbsp "&#160;">
]>
<html xmlns:frx="urn:FrxReports">
<head>
David Metzler's avatar
David Metzler committed
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<title>8. SVG Graph Demo</title>
<frx:category>Sample</frx:category>
<frx:options />
<frx:parameters></frx:parameters>
<frx:docgen>
  <frx:doc type="csv" />
  <frx:doc type="doc" />
  <frx:doc type="xls" />
</frx:docgen>
<frx:fields>
  <frx:field id="state" link="" format="" format-string="" target="" />
  <frx:field id="name" link="" format="" format-string="" target="" />
  <frx:field id="total" link="reports/sample.user_distribution_simple?state={state}#test" format="" format-string="" target="" />
  <frx:field id="svggraph_library" link="http://www.goat1000.com/svggraph.php" target="_blank">PHP SVGGraph</frx:field>
  <frx:field id="state_summary" link="reports/sample.state_summary">Master Summary with drill down</frx:field>
  <frx:field id="state_graph" link="reports/sample.state_graph?height=400&amp;width=600">state graph</frx:field>
</frx:fields>
<frx:menu />
<frx:cache />
<style>
27
28
29
30
31
32
.graphs {
	clear: both;
	display: block;
	width: 100%;
}

David Metzler's avatar
David Metzler committed
33
/* Make sure the SVG fills the containing div*/
34
35
.graph-sample svg {
	width: 100%;
David Metzler's avatar
David Metzler committed
36
	height: 100%;
37
38
39
40
	vertical-align: top;
}

.graph-description {
41
	width: 32%;
42
43
44
45
46
47
48
	display: inline-block;
	clear: left;
	margin-top: 1em;
	vertical-align: top;
}

.graph-sample {
49
	width: 66%;
50
51
	clear: right;
	margin-top: 1em;
David Metzler's avatar
David Metzler committed
52
	padding: 0;
53
54
55
56
	display: inline-block;
	vertical-align: top;
}

David Metzler's avatar
David Metzler committed
57
58
59
60
61
62
/* When the display area gets to small make sure the containers get big*/
@media only screen and (max-width:800px) {
	.graph-sample,.graph-description {
		width: 100%;
	}
}
63
</style>
64
65
</head>
<body>
David Metzler's avatar
David Metzler committed
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
  <p>The goal of this demo is to show some of the {svggraph_library} features, and to help reduce the learning curve to get
    you started with creating your own SVG Graphs.</p>
  <p>
    SVG (Scalable Vector Graphics) is a widely-deployed royalty-free graphics format developed and maintained by the <a
      href="http://www.w3.org/Graphics/SVG/" target="_blank">W3C SVG Working Group</a>.
  </p>
  <p>
    The {state_summary} sample that comes with <a href="https://drupal.org/project/forena" target="_blank">Forena</a>, includes
    an SVG graph. It's named the <strong>state graph</strong> 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. 
  </p>
  <p>
    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 <strong>state graph</strong>:
metzlerd's avatar
metzlerd committed
82
  </p>
83
  <ul>
David Metzler's avatar
David Metzler committed
84
85
    <li>is the very only SVG sample within the delivered samples.</li>
    <li>contains some predefined options that take some time to learn about.</li>
86
  </ul>
David Metzler's avatar
David Metzler committed
87
88
89
  <p>
    That's why this <strong>SVG Graph Demo</strong> was created ... enjoy reviewing it!
  </p>
90
  <div class="graphs">
David Metzler's avatar
David Metzler committed
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
    <div class="graph-description">
      <p>
        To get started, how about this vertical <strong>BarGraph</strong> (in <strong>3D</strong>, so it is actually <strong>Bar3DGraph</strong>)
        with like 20 different <strong>colors</strong>:
      </p>
    </div>
    <div class="graph-sample">
      <svg id="Bar3DGraph" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="Bar3DGraph"
        frx:xpath="*[total&gt;10000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="Vertical BarGraph in 3D (graph with vertical bars)" frx:graph_title_position="bottom"
        frx:label_v="Total nr of users" frx:label_h="State" frx:label_font="georgia" frx:label_font_size="14"
        frx:label_colour="purple" frx:colour_1="pink" frx:colour_2="brown" frx:colour_3="red" frx:colour_4="gold"
        frx:colour_5="orange" frx:colour_6="yellow" frx:colour_7="green" frx:colour_8="olive" frx:colour_9="lightgreen"
        frx:colour_10="azure" frx:colour_11="lavender" frx:colour_12="cyan" frx:colour_13="royalblue" frx:colour_14="blue"
        frx:colour_15="orchid" frx:colour_16="purple" frx:colour_17="indigo" frx:colour_18="gray" frx:colour_19="black"
        frx:colour_20="ivory">
108
	  </svg>
David Metzler's avatar
David Metzler committed
109
110
111
112
113
114
115
116
117
118
119
120
121
122
    </div>
    <div class="graph-description">
      <p>
        Here is a sample of a <strong>CylinderGraph</strong> with fewer <strong>colors</strong> than the BarGraph
        before:
      </p>
    </div>
    <div class="graph-sample">
      <svg id="CylinderGraph" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="CylinderGraph"
        frx:xpath="*[total&gt;10000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="Vertical CylinderGraph (graph with vertical cylinders)" frx:graph_title_position="bottom"
        frx:label_v="Total nr of users" frx:label_h="State" frx:label_font="georgia" frx:label_font_size="14"
        frx:label_colour="purple" frx:colour_1="red" frx:colour_2="blue">
123
	  </svg>
David Metzler's avatar
David Metzler committed
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
    </div>
    <div class="graph-description">
      <p>
        Let's find out what a <strong>LineGraph</strong> would look like, using green triangles as <strong>markers</strong>, 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:
      </p>
    </div>
    <div class="graph-sample">
      <svg id="LineGraph" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="LineGraph"
        frx:xpath="*[total&gt;10000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="LineGraph (graph with a line joining the data points)" frx:graph_title_position="bottom"
        frx:label_v="Total nr of users" frx:label_h="State" frx:label_font="georgia" frx:label_font_size="14"
        frx:label_colour="purple" frx:colour_1="red" frx:fill_under="true" frx:fill_opacity="0.25" frx:marker_colour="green"
        frx:marker_type="triangle" frx:stroke_colour="blue" frx:line_dash="3">
140
	  </svg>
David Metzler's avatar
David Metzler committed
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
    </div>
    <div class="graph-description">
      <p>
        Here is the <strong>ScatterGraph</strong> variation, using purple diamonds as <strong>markers</strong>, and with an
        extra <strong>best fit line</strong> added to it to draw a straight (red) line through the data points (using 7 pixels
        dashes combined with 7 pixels of gap).
      </p>
      <p>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):</p>
    </div>
    <div class="graph-sample">
      <svg id="ScatterGraph" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="ScatterGraph"
        frx:xpath="*[total&gt;10000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="ScatterGraph (graph with markers drawn at horizontal and vertical points)"
        frx:graph_title_position="bottom" frx:label_v="Total nr of users" frx:label_h="State" frx:label_font="georgia"
        frx:label_font_size="14" frx:label_colour="purple" frx:marker_colour="purple" frx:marker_type="diamond"
        frx:best_fit="straight" frx:best_fit_colour="red" frx:best_fit_dash="7" frx:axis_min_v="7000" frx:grid_division_v="1000">
159
	  </svg>
David Metzler's avatar
David Metzler committed
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
    </div>
    <div class="graph-description">
      <p>
        Let's change to a <strong>PieGraph</strong> (also in <strong>3D</strong>, so it is actually <strong>Pie3DGraph</strong>).
      </p>
      <p>
        And let's use lots of <strong>colors</strong> (purple, cyan, red, blue, gold, green, indigo, orange, brown, pink, ...):
      </p>
    </div>
    <div class="graph-sample">
      <svg id="Pie3DGraph" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="Pie3DGraph"
        frx:xpath="*[total&gt;10000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="PieGraph in 3D (chart with slices)" frx:graph_title_position="bottom" frx:label_v="Total nr of users"
        frx:label_h="State" frx:label_font="georgia" frx:label_font_size="14" frx:label_colour="black" frx:colour_1="pink"
        frx:colour_2="brown" frx:colour_3="red" frx:colour_4="gold" frx:colour_5="orange" frx:colour_6="yellow"
        frx:colour_7="green" frx:colour_8="olive" frx:colour_9="lightgreen" frx:colour_10="azure" frx:colour_11="lavender"
        frx:colour_12="cyan" frx:colour_13="royalblue" frx:colour_14="blue" frx:colour_15="orchid" frx:colour_16="purple"
        frx:colour_17="indigo" frx:colour_18="white" frx:colour_19="gray" frx:colour_20="ivory">
179
	  </svg>
David Metzler's avatar
David Metzler committed
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
    </div>
    <div class="graph-description">
      <p>
        Here is a sample of a <strong>RadarGraph</strong> 
        using red triangles as <strong>markers</strong>, 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:
      </p>
    </div>
    <div class="graph-sample">
      <svg id="Radargraph" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="Radargraph"
        frx:xpath="*[total&gt;10000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="RadarGraph (graph with values measured from the centre point instead of the X-axis)"
        frx:graph_title_position="bottom" frx:label_v="Total nr of users" frx:label_font="georgia" frx:label_font_size="14"
        frx:label_space="45" frx:label_colour="purple" frx:colour_1="green" frx:axis_min_v="3000" frx:axis_max_v="28000"
        frx:grid_division_v="5000" frx:fill_under="true" frx:fill_opacity="0.40" frx:marker_colour="red"
        frx:marker_type="triangle" frx:stroke_colour="purple" frx:line_dash="3">
198
	  </svg>
David Metzler's avatar
David Metzler committed
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
    </div>
    <div class="graph-description">
      <p>
        Let's return to a <strong>BarGraph</strong> with <strong>horizontal</strong> bars, actually a <strong>HorizontalBarGraph</strong>.
        Let's only show states with a <strong>total nr of users</strong> of at least 12000 (instead of 10000) and we need to
        swap the labels also.
      </p>
      <p>
        This horizontal BarGraph looks rather ugly, no? The data labels below the chart have become unreadable, even enlarging
        the <strong>width</strong> of the graph a bit won't really help (too much data-labels to be shown).
      </p>
    </div>
    <div class="graph-sample">
      <svg id="BarGraphH-Ugly" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="HorizontalBarGraph"
        frx:xpath="*[total&gt;12000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="Horizontal Bargraph (graph with horizontal bars)" frx:graph_title_position="bottom" frx:label_v="State"
        frx:label_h="Total nr of users" frx:label_font="georgia" frx:label_font_size="14" frx:label_colour="purple"
        frx:colour_1="red" frx:colour_2="blue">
218
	  </svg>
David Metzler's avatar
David Metzler committed
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
    </div>
    <div class="graph-description">
      <p>
        By applying some <strong>advanced SVG Graph features</strong> it is possible to enhance the previous graph to something
        that looks already much better.
      </p>
    </div>
    <div class="graph-sample">
      <svg id="BarGraphH-Great" frx:block="sampledb/users_by_state" frx:renderer="FrxSVGGraph" frx:type="HorizontalBarGraph"
        frx:xpath="*[total&gt;12000]" frx:link="sample.user_distribution_simple?state={state}" frx:series_1="{total}"
        frx:label="{state}" frx:back_colour="white" frx:graph_title_colour="red" frx:graph_title_font_size="12"
        frx:graph_title="Refined Horizontal Bargraph (graph with horizontal bars)" frx:graph_title_position="bottom"
        frx:label_v="State" frx:label_h="Total nr of users" frx:label_font="georgia" frx:label_font_size="14"
        frx:label_colour="purple" frx:colour_1="red" frx:colour_2="blue" frx:axis_min_h="10000" frx:grid_division_h="2500"
        frx:division_size_h="2" frx:division_size_v="0" frx:show_subdivisions="true" frx:subdivision_size="5">
234
	  </svg>
David Metzler's avatar
David Metzler committed
235
    </div>
236
237
  </div>
  <div>
David Metzler's avatar
David Metzler committed
238
239
240
241
242
243
244
245
246
247
    <p>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.</p>
    <p>As a reminder: this is just an introduction to create SVG Graphs. We haven't even mentioned some of the additional
      features, such as:</p>
    <ul>
      <li><strong>stacked</strong> and <strong>grouped</strong> variations of horizontal or vertical BarGraphs or
        CylinderGraphs, which out-of-the-box are supported also (can't cover everything in an introduction ...).</li>
      <li><strong>MultiRadarGraph</strong> variations of RadarGraphs.</li>
    </ul>

248
249
250
  </div>
</body>
</html>