Table of contents
No headers/***
USAGE:
Chart(type, data, height, width, xaxis, yaxis, title, min, max, interval, id)
PARAMETERS:
type : str (one of 'circulargauge', 'column', 'multiseriescolumn', 'lineargauge', 'line', 'bar', 'multiseriesbar', 'pie', 'pyramid', or 'funnel')
data : list
(optional) height : num (default: 450)
Height of chart in pixel or percent.
If value is greater or equal to 1, then value represents pixel, otherwise the value is a relative perecentage.
(optional) width : num (default: 450)
Width of chart in pixel or percent.
If value is greater or equal to 1, then value represents pixel, otherwise the value is a relative perecentage.
(optional) xaxis : str (default: 'Y-Axis')
Label for X-Axis.
(optional) yaxis : str (default: 'X-Axis')
Label for Y-Axis.
(optional) title : str (default: 'Title')
Label for chart.
(optional) min : num (default: 0)
Lower bound for Linear Gauge chart type.
(optional) max : num (default: 100)
Upper bound for Linear Gauge chart type.
(optional) interval : num (default: 10)
Major interval for axis markers.
(optional) id : str (default: nil)
ID for chart component. Used for listening for events and interacting with chart through JavaScript.
VERSIONS:
1.0 2-Feb-10 robertm initial version
1.1 4-Mar-10 steveb code clean-up
1.2 29-Mar-10 steveb better handling of error conditions; new default look for progress gauge
1.3 16-Jul-10 steveb fixed inproper data handling for 'pie' type. support for min,max
***/
// GET VARIABLES FROM TEMPLATE CALL
var type = string.tolower($type ?? $0 ?? 'circulargauge');
var data = $data ?? $1 ?? 67;
var height = $height ?? $2 ?? 450;
var width = $width ?? $3 ?? 450;
var xaxis = $xaxis ?? $4;
var yaxis = $yaxis ?? $5;
var title = $title ?? $6;
var min = $min ?? $7;
var max = $max ?? $8;
var interval = $interval ?? $9 ?? 10;
var id = $id ?? $10;
var error;
// TODO (steveb): validate the 'data' field
// TODO (steveb): enable/disable animation
// format settings
let settings_xml = <settings>
<animation enabled="True"/>
</settings>;
// format axis
var axes_xml = <axes>
<x_axis>
<title enabled=(xaxis is not nil)>
<text> xaxis </text>
</title>
<labels>
<format> "{%Value}{numDecimals:0}" </format>
</labels>
</x_axis>
<y_axis position=((type == 'bar' || type == 'multiseriesbar') ? "opposite" : nil)>
<title enabled=(yaxis is not nil)>
<text> yaxis </text>
</title>
<labels>
<format> "{%Value}{numDecimals:0}" </format>
</labels>
<scale major_interval=(interval) minor_interval=(interval / 4) minimum=(min) maximum=(max) />
</y_axis>
</axes>;
// set defaults for min-max
let min = min ?? 0;
let max = max ?? 100;
// format data
var data_xml;
if((type != 'pie') && data is map) {
let data_xml = <data>
foreach (var series:points in data) {
<series name=(series)>
foreach (var p in points) {
foreach(var label:value in p) {
<point y=(value) name=(label)>
<tooltip enabled="true">
<format> "{%SeriesName} ({%Name}) - {%Value}" </format>
</tooltip>
</point>
}
}
</series>
}
</data>;
} else if(data is list) {
let data_xml = <data>
<series name="Series 1">
foreach(var d in data) {
foreach(var label:value in d) {
<point y=(value) name=(label) />
}
}
</series>
</data>;
}
// CHART BUILDS
var chart;
switch (type) {
// SINGLE-SERIES COLUMN CHART, INCOMING DATA MUST BE FORMATTED AS [{label1:value1}, {label2:value2}, {label3:value3}]
// MULTI-SERIES COLUMN CHART, INCOMING DATA MUST BE FORMATTED AS {series1:[{label1:value1}, {label2:value2}, {label3:value3}], series2:[{label1:value1}, {label2:value2}, {label3:value3}], series3:[{label1:value1}, {label2:value2}, {label3:value3}]}
case 'column':
case 'multiseriescolumn':
case 'bar':
case 'multiseriesbar':
// determine layout value
var layout;
switch(type) {
case 'column':
case 'multiseriescolumn':
let layout = "CategorizedVertical";
case 'bar':
case 'multiseriesbar':
let layout = "CategorizedHorizontal";
}
// generate chart xml
let chart = <anychart>
settings_xml;
<charts>
<chart plot_type=(layout)>
<data_plot_settings default_series_type="Bar" enable_3d_mode="true" z_aspect="0.25">
<bar_series group_padding="0.2" >
<tooltip_settings enabled="true"/>
</bar_series>
</data_plot_settings>
<chart_settings>
<title enabled=(title is not nil)>
<text> title </text>
</title>
// check if we plotting a series of data points
if(data is map) {
<legend enabled="true" position="Bottom" align="Spread" ignore_auto_item="true" padding="15">
<format> "{%Icon} {%Name}" </format>
<title enabled="false"/>
<columns_separator enabled="true"/>
<background>
<inside_margin left="10" right="10"/>
</background>
<items>
<item source="Series"/>
</items>
</legend>
}
axes_xml;
</chart_settings>
data_xml;
</chart>
</charts>
</anychart>;
// MULTI-SERIES LINE CHART, INCOMING DATA MUST BE FORMATTED AS {series1:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}], series2:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}], series3:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}]}
case "line":
let chart = <anychart>
settings_xml;
<charts>
<chart plot_type="CategorizedVertical">
<chart_settings>
<title enabled=(title is not nil)>
<text> title </text>
</title>
<legend enabled="true">
<title enabled="false"/>
</legend>
axes_xml;
</chart_settings>
<data_plot_settings default_series_type="Spline">
<line_series>
<marker_settings>
<marker size="8"/>
<states>
<hover>
<marker size="12"/>
</hover>
</states>
</marker_settings>
<tooltip_settings enabled="True"/>
</line_series>
</data_plot_settings>
data_xml;
</chart>
</charts>
</anychart>;
//3D PIE CHART, DATA VARIABLE MUST BE FORMATTED AS {name1:value1, name2:value2, name3:value3}
case 'pie':
let chart = '<anychart>
settings_xml;
<charts>
<chart plot_type="Pie">
<data_plot_settings enable_3d_mode="true">
<pie_series>
<tooltip_settings enabled="true">
<format>
{%Name} : {%Value}{numDecimals:0} ({%YPercentOfSeries}{numDecimals: 0}%)
</format>
</tooltip_settings>
<label_settings enabled="true">
<background enabled="false"/>
<position anchor="Center" valign="Center" halign="Center" padding="20"/>
<font color="White">
<effects>
<drop_shadow enabled="true" distance="2" opacity="0.5" blur_x="2" blur_y="2"/>
</effects>
</font>
<format>{%YPercentOfSeries}{numDecimals:0}%</format>
</label_settings>
</pie_series>
</data_plot_settings>
<data>
<series name="Series 1" type="Pie">'
.. (
foreach (var name:y in data) {
'<point name="' .. name .. '" y="' .. y .. '"/>'
}
) ..
'</series>
</data>
<chart_settings>
<title enabled="true" padding="15">
<text>' .. title .. '</text>
</title>
<legend enabled="true" position="Bottom" align="Spread" ignore_auto_item="true" padding="15">
<format>{%Icon} {%Name} - {%YValue}{numDecimals:0}</format>
<title enabled="false"/>
<columns_separator enabled="false"/>
<background>
<inside_margin left="10" right="10"/>
</background>
<items>
<item source="Points"/>
</items>
</legend>
</chart_settings>
</chart>
</charts>
</anychart>';
// PYRAMID/FUNNEL CHART, DATA VARIABLE MUST BE FORMATTED AS {label1:value1, label2:value2, label3:value3}
case 'pyramid':
case 'funnel':
var ispyramid = (type == 'pyramid');
let chart = <anychart>
settings_xml;
<charts>
<chart plot_type="Funnel">
<chart_settings>
<title enabled=(title is not nil)>
<text> title </text>
</title>
<data_plot_background enabled="false" />
<legend enabled="false" />
</chart_settings>
<data_plot_settings enable_3d_mode="true">
<funnel_series inverted=(ispyramid) neck_height=(ispyramid ? 0 : nil) fit_aspect="1" min_width=(ispyramid ? 0 : nil) padding=(ispyramid ? 0 : nil) mode="Square">
<animation enabled="true" type="Appear" show_mode="Smoothed" start_time="0.3" duration="1.3" interpolation_type="Cubic"/>
<connector enabled="true" color="Black" opacity="0.4"/>
<tooltip_settings enabled="true">
if(ispyramid) {
<position anchor="CenterRight" padding="10" valign="Center" halign="right"/>
}
<format> "{%Name} - {%YValue}{numDecimals:0}" </format>
</tooltip_settings>
<label_settings enabled="true">
<animation enabled="true" type="Appear" show_mode="Smoothed" start_time="0.3" duration="1.3" interpolation_type="Cubic"/>
if(ispyramid) {
<position anchor="Center" valign="Center" halign="Center" padding="10"/>
} else {
<position anchor="center" padding="50"/>
}
<format> "{%Name} - {%YValue}{numDecimals:0}" </format>
<background enabled="true">
<corners type="Rounded" all="3"/>
</background>
<states>
<hover>
<background>
<border type="Solid" color="DarkColor(%Color)" thickness="2"/>
</background>
</hover>
<pushed>
<background>
<border type="Solid" color="#494949" thickness="2" opacity="0.7"/>
</background>
</pushed>
<selected_hover>
<background>
<border type="Solid" color="DarkColor(%Color)" thickness="2" opacity="0.7"/>
</background>
</selected_hover>
<selected_normal>
<background>
<border type="Solid" color="DarkColor(%Color)" thickness="2"/>
</background>
</selected_normal>
</states>
</label_settings>
<funnel_style>
<border color="Black" opacity="0.05"/>
<states>
<hover>
<fill color="%Color"/>
<hatch_fill enabled="true" type="Percent50" color="White" opacity="0.3"/>
</hover>
<selected_hover>
<fill color="%Color"/>
<hatch_fill type="Checkerboard" color="#404040" opacity="0.1"/>
</selected_hover>
<selected_normal>
<fill color="%Color"/>
<hatch_fill type="Checkerboard" color="Black" opacity="0.1"/>
</selected_normal>
</states>
</funnel_style>
<marker_settings enabled="true">
<marker type="None" anchor="Center" v_align="Center" h_align="Center" size="12"/>
<fill color="Yellow"/>
<border color="DarkColor(Yellow)"/>
<states>
<hover>
<marker type="Star5"/>
</hover>
<pushed>
<marker type="Star5" size="8"/>
</pushed>
<selected_hover>
<marker type="Star5" size="14"/>
</selected_hover>
<selected_normal>
<marker type="Star5"/>
</selected_normal>
</states>
</marker_settings>
</funnel_series>
</data_plot_settings>
data_xml;
</chart>
</charts>
</anychart>;
// CIRCULAR GAUGE CHART, DATA VARIABLE MUST BE A NUMBER
case 'circulargauge':
let chart = <anychart>
settings_xml;
<margin all="0"/>
<gauges>
<gauge>
<chart_settings>
<title enabled=(title is not nil)>
<text> title </text>
</title>
<chart_background>
<border enabled="false"/>
</chart_background>
</chart_settings>
<circular name="data">
<axis radius="37" start_angle="85" sweep_angle="190" size="3">
<labels align="Outside" padding="6">
<format> "{%Value}{numDecimals:0}" </format>
</labels>
<scale_bar>
<fill color="#292929"/>
</scale_bar>
<major_tickmark align="Center" length="10" padding="0"/>
<minor_tickmark enabled="false"/>
<color_ranges>
<color_range start=(min) end=(max) align="Inside" start_size="15" end_size="15" padding="6">
<fill type="Gradient">
<gradient>
<key color="Red"/>
<key color="Yellow"/>
<key color="Green"/>
</gradient>
</fill>
<border enabled="true" color="Black" opacity="0.4"/>
</color_range>
</color_ranges>
</axis>
<frame>
<inner_stroke enabled="false"/>
<outer_stroke enabled="false"/>
<background>
<fill type="Gradient">
<gradient angle="45">
<key color="#FDFDFD"/>
<key color="#F7F3F4"/>
</gradient>
</fill>
<border enabled="true" color="#A9A9A9"/>
</background>
<effects enabled="false"/>
</frame>
<pointers>
<pointer value=(data) name="value">
<label enabled="true" under_pointers="true">
<position placement_mode="ByPoint" x="50" y="60"/>
<format> "{%Value}{numDecimals:0}%" </format>
<background enabled="false"/>
</label>
<needle_pointer_style thickness="7" point_thickness="5" point_radius="3">
<fill color="Rgb(230,230,230)"/>
<border color="Black" opacity="0.7"/>
<effects enabled="true">
<bevel enabled="true" distance="2" shadow_opacity="0.6" highlight_opacity="0.6"/>
<drop_shadow enabled="true" distance="1" blur_x="1" blur_y="1" opacity="0.4"/>
</effects>
<cap>
<background>
<fill type="Gradient">
<gradient type="Linear" angle="45">
<key color="#D3D3D3"/>
<key color="#6F6F6F"/>
</gradient>
</fill>
<border color="Black" opacity="0.9"/>
</background>
<effects enabled="true">
<bevel enabled="true" distance="2" shadow_opacity="0.6" highlight_opacity="0.6"/>
<drop_shadow enabled="true" distance="1.5" blur_x="2" blur_y="2" opacity="0.4"/>
</effects>
</cap>
</needle_pointer_style>
<animation enabled="true" start_time="0" duration="0.7" interpolation_type="Sine"/>
</pointer>
</pointers>
</circular>
</gauge>
</gauges>
</anychart>;
// LINEAR GAUGE, DATA VARIABLE MUST BE A NUMBER
case 'lineargauge':
let chart = <anychart>
settings_xml;
<margin all="0"/>
<gauges>
<gauge>
<chart_settings>
<title>
<text> title </text>
</title>
<chart_background>
<border enabled="false"/>
</chart_background>
</chart_settings>
<linear name="data">
<axis size="0" position="50">
<scale minimum=(min) maximum=(max) major_interval=(interval) minor_interval=(interval / 4) />
<scale_bar enabled="false"/>
<labels padding="5"/>
<color_ranges>
<color_range start=(min) end=(max) align="Outside" padding="0" start_size="8" end_size="8">
<fill type="Gradient">
<gradient angle="90">
<key color="Red"/>
<key color="Yellow"/>
<key color="Green"/>
</gradient>
</fill>
<border enabled="true" type="Solid" color="Black" opacity="0.4"/>
</color_range>
</color_ranges>
</axis>
<pointers>
<pointer type="Marker" value=(data) name="value" color="#4662B0">
<tooltip enabled="true"/>
<marker_pointer_style align="Outside" padding="5" width="10" height="10"/>
<animation enabled="true" start_time="0" duration="1" interpolation_type="Elastic"/>
<label enabled="true">
<position placement_mode="ByAnchor" valign="Center" halign="Right" padding="45"/>
<format> "{%Value}{numDecimals:0}%" </format>
<background enabled="false"/>
</label>
</pointer>
</pointers>
</linear>
</gauge>
</gauges>
</anychart>;
default:
if(!error) {
let error = "Invalid chart type selected (did not recognize '" .. type .. "')";
}
}
// check if there was an error
if(error) {
<p style="color: red"> error </p>
} else {
anychart(chart, width, height, id);
}
