01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<anychart> |
03 |
<templates> |
04 |
<template name="gaugeTemplates"> |
05 |
<gauge> |
06 |
<chart_settings> |
07 |
<chart_background enabled="true"> |
08 |
<border type="Solid" color="#CCCCCC" thickness="1" /> |
09 |
<corners type="Square" /> |
10 |
<effects enabled="false" /> |
11 |
<inside_margin all="10" top="5" /> |
12 |
</chart_background> |
13 |
</chart_settings> |
14 |
<circular_template name="predefined"> |
15 |
<margin all="3" /> |
16 |
<styles> |
17 |
<needle_pointer_style name="small" thickness="7"> |
18 |
<cap radius="5"> |
19 |
<background> |
20 |
<fill type="Solid" color="Rgb(220,220,220)" /> |
21 |
<border enabled="false" /> |
22 |
</background> |
23 |
<inner_stroke enabled="true" thickness="4"> |
24 |
<fill color="Rgb(150,150,150)" /> |
25 |
</inner_stroke> |
26 |
</cap> |
27 |
</needle_pointer_style> |
28 |
</styles> |
29 |
<axis start_angle="180" sweep_angle="90"> |
30 |
<scale minimum="-20" maximum="20" major_interval="10" /> |
31 |
<scale_bar enabled="false" /> |
32 |
<scale_line enabled="true" color="#494949" opacity="0.3" /> |
33 |
</axis> |
34 |
<frame enabled="true" padding="20"> |
35 |
<inner_stroke enabled="false" /> |
36 |
<outer_stroke enabled="false" /> |
37 |
<background> |
38 |
<border enabled="true" color="#494949" opacity="0.3" thickness="2" /> |
39 |
<fill type="Solid" color="White" /> |
40 |
</background> |
41 |
<effects enabled="true" /> |
42 |
</frame> |
43 |
<pointers> |
44 |
<label enabled="true"> |
45 |
<font color="#494949" /> |
46 |
<format><![CDATA[{%Value}{numDecimals:1}]]></format> |
47 |
<position placement_mode="ByPoint" x="51" y="95" /> |
48 |
<background enabled="false" /> |
49 |
</label> |
50 |
<tooltip enabled="true"> |
51 |
<format><![CDATA[Value: {%Value}{numDecimals:1}]]></format> |
52 |
<font bold="true" /> |
53 |
</tooltip> |
54 |
</pointers> |
55 |
</circular_template> |
56 |
</gauge> |
57 |
</template> |
58 |
</templates> |
59 |
<dashboard> |
60 |
<view type="Dashboard"> |
61 |
<title padding="2"> |
62 |
<text><![CDATA[Combination of Chart and Gauges in Single Dashboard]]></text> |
63 |
</title> |
64 |
<background> |
65 |
<inside_margin all="8" top="10" /> |
66 |
</background> |
67 |
<vbox width="100%" height="100%"> |
68 |
<margin all="0" /> |
69 |
<hbox width="100%" height="60%"> |
70 |
<margin all="0" /> |
71 |
<view type="Chart" source="Chart1" width="100%" height="100%" /> |
72 |
</hbox> |
73 |
<hbox width="100%" height="40%"> |
74 |
<margin all="1" /> |
75 |
<view type="Gauge" source="Gauge1" width="33.33%" height="100%" /> |
76 |
<view type="Gauge" source="Gauge2" width="33.33%" height="100%" /> |
77 |
<view type="Gauge" source="Gauge3" width="33.33%" height="100%" /> |
78 |
</hbox> |
79 |
</vbox> |
80 |
</view> |
81 |
</dashboard> |
82 |
<charts> |
83 |
<chart plot_type="CategorizedVertical" name="Chart1"> |
84 |
<data_plot_settings default_series_type="Bar"> |
85 |
<bar_series point_padding="0.0" group_padding="1" style="AquaLight"> |
86 |
<bar_style> |
87 |
<fill opacity="1" /> |
88 |
<states> |
89 |
<hover> |
90 |
<hatch_fill enabled="true" type="Percent50" color="%Color" opacity="1" /> |
91 |
</hover> |
92 |
</states> |
93 |
</bar_style> |
94 |
<tooltip_settings enabled="False"> |
95 |
<format><![CDATA[{%SeriesName} |
96 |
{%Name}, {%Value}{numDecimals:0}%]]></format> |
97 |
<background> |
98 |
<corners type="Rounded" all="3" /> |
99 |
</background> |
100 |
</tooltip_settings> |
101 |
<label_settings enabled="true"> |
102 |
<format><![CDATA[{%Value}{numDecimals:0}]]></format> |
103 |
<font bold="false" /> |
104 |
<states> |
105 |
<hover> |
106 |
<format><![CDATA[{%Value}{numDecimals:0}%]]></format> |
107 |
<background enabled="true"> |
108 |
<inside_margin left="4" top="1" right="4" bottom="0" /> |
109 |
<border type="Solid" color="#494949" opacity="1" thickness="2" /> |
110 |
<corners type="Rounded" all="3" /> |
111 |
</background> |
112 |
</hover> |
113 |
</states> |
114 |
</label_settings> |
115 |
<marker_settings enabled="true" color="DarkRed"> |
116 |
<marker type="None" /> |
117 |
<states> |
118 |
<hover> |
119 |
<marker type="Star5" /> |
120 |
</hover> |
121 |
</states> |
122 |
</marker_settings> |
123 |
<interactivity use_hand_cursor="false" allow_select="false" /> |
124 |
</bar_series> |
125 |
</data_plot_settings> |
126 |
<chart_settings> |
127 |
<data_plot_background> |
128 |
<effects enabled="false" /> |
129 |
</data_plot_background> |
130 |
<chart_background enabled="true"> |
131 |
<border type="Solid" color="#CCCCCC" thickness="1" /> |
132 |
<corners type="Square" /> |
133 |
<inside_margin all="10" top="5" /> |
134 |
</chart_background> |
135 |
<title enabled="true"> |
136 |
<text><![CDATA[Product Sales]]></text> |
137 |
</title> |
138 |
<axes> |
139 |
<y_axis position="Normal"> |
140 |
<minor_grid enabled="false" /> |
141 |
<major_grid interlaced="false" /> |
142 |
<title enabled="false" /> |
143 |
<labels> |
144 |
<format><![CDATA[{%Value}{numDecimals:0}%]]></format> |
145 |
</labels> |
146 |
<scale minimum="0" maximum="140" major_interval="20" minor_interval="5" /> |
147 |
</y_axis> |
148 |
<x_axis> |
149 |
<line enabled="false" /> |
150 |
<zoom enabled="true" /> |
151 |
<title enabled="false" /> |
152 |
<major_tickmark enabled="false" /> |
153 |
<major_grid interlaced="true"> |
154 |
<interlaced_fills> |
155 |
<even> |
156 |
<fill enabled="true" type="Solid" color="Rgb(210,210,210)" opacity="0.3" /> |
157 |
</even> |
158 |
<odd> |
159 |
<fill enabled="true" type="Solid" color="White" opacity="0.3" /> |
160 |
</odd> |
161 |
</interlaced_fills> |
162 |
</major_grid> |
163 |
<labels padding="0"> |
164 |
<background> |
165 |
<inside_margin all="0" /> |
166 |
</background> |
167 |
</labels> |
168 |
</x_axis> |
169 |
</axes> |
170 |
<legend enabled="true"> |
171 |
<title enabled="false" /> |
172 |
</legend> |
173 |
</chart_settings> |
174 |
<data> |
175 |
<series name="Product A"> |
176 |
<point name="January" y="22" /> |
177 |
<point name="February" y="34" /> |
178 |
<point name="March" y="16" /> |
179 |
<point name="April" y="12" /> |
180 |
<point name="May" y="38" /> |
181 |
<point name="June" y="47" /> |
182 |
<point name="July" y="39" /> |
183 |
<point name="August" y="28" /> |
184 |
<point name="September" y="21" /> |
185 |
<point name="October" y="18" /> |
186 |
<point name="November" y="24" /> |
187 |
<point name="December" y="29" /> |
188 |
</series> |
189 |
<series name="Product B"> |
190 |
<point name="January" y="43" /> |
191 |
<point name="February" y="45" /> |
192 |
<point name="March" y="26" /> |
193 |
<point name="April" y="86" /> |
194 |
<point name="May" y="35" /> |
195 |
<point name="June" y="31" /> |
196 |
<point name="July" y="27" /> |
197 |
<point name="August" y="16" /> |
198 |
<point name="September" y="27" /> |
199 |
<point name="October" y="31" /> |
200 |
<point name="November" y="42" /> |
201 |
<point name="December" y="39" /> |
202 |
</series> |
203 |
<series name="Product C"> |
204 |
<point name="January" y="75" /> |
205 |
<point name="February" y="56" /> |
206 |
<point name="March" y="67" /> |
207 |
<point name="April" y="42" /> |
208 |
<point name="May" y="17" /> |
209 |
<point name="June" y="12" /> |
210 |
<point name="July" y="9" /> |
211 |
<point name="August" y="23" /> |
212 |
<point name="September" y="47" /> |
213 |
<point name="October" y="58" /> |
214 |
<point name="November" y="69" /> |
215 |
<point name="December" y="71" /> |
216 |
</series> |
217 |
<series name="Product D"> |
218 |
<point name="January" y="33" /> |
219 |
<point name="February" y="39" /> |
220 |
<point name="March" y="46" /> |
221 |
<point name="April" y="69" /> |
222 |
<point name="May" y="87" /> |
223 |
<point name="June" y="91" /> |
224 |
<point name="July" y="99" /> |
225 |
<point name="August" y="112" /> |
226 |
<point name="September" y="108" /> |
227 |
<point name="October" y="56" /> |
228 |
<point name="November" y="14" /> |
229 |
<point name="December" y="45" /> |
230 |
</series> |
231 |
</data> |
232 |
</chart> |
233 |
</charts> |
234 |
<gauges> |
235 |
<gauge template="gaugeTemplates" name="Gauge1"> |
236 |
<chart_settings> |
237 |
<title> |
238 |
<text><![CDATA[Param 1]]></text> |
239 |
</title> |
240 |
</chart_settings> |
241 |
<circular template="predefined" x="0" y="0" width="100" height="100"> |
242 |
<pointers> |
243 |
<animation enabled="true" start_time="0" duration="0.2" interpolation_type="Cubic" /> |
244 |
<pointer type="Needle" value="9.5" style="small" color="#4DBC4D" /> |
245 |
</pointers> |
246 |
</circular> |
247 |
</gauge> |
248 |
<gauge template="gaugeTemplates" name="Gauge2"> |
249 |
<chart_settings> |
250 |
<title> |
251 |
<text><![CDATA[Param 2]]></text> |
252 |
</title> |
253 |
</chart_settings> |
254 |
<circular template="predefined" x="0" y="0" width="100" height="100"> |
255 |
<pointers> |
256 |
<animation enabled="true" start_time="0" duration="0.2" interpolation_type="Cubic" /> |
257 |
<pointer type="Needle" value="3.1" style="small" color="#4DBC4D" /> |
258 |
</pointers> |
259 |
</circular> |
260 |
</gauge> |
261 |
<gauge template="gaugeTemplates" name="Gauge3"> |
262 |
<chart_settings> |
263 |
<title> |
264 |
<text><![CDATA[Param 3]]></text> |
265 |
</title> |
266 |
</chart_settings> |
267 |
<circular template="predefined" x="0" y="0" width="100" height="100"> |
268 |
<pointers> |
269 |
<animation enabled="true" start_time="0" duration="0.2" interpolation_type="Cubic" /> |
270 |
<pointer type="Needle" value="-13.2" style="small" color="#DF1B1B" /> |
271 |
</pointers> |
272 |
</circular> |
273 |
</gauge> |
274 |
</gauges> |
275 |
</anychart> |