MindTouch Charts Tutorial - Simple Bar Chart

Parameters

Using arguments in templates can be a powerful way to enable their re-use. In this template, we're looking for height and width parameters. The lines below essentially say (for height) "If the height parameter is specifically identified in the template call, use it. If that's not there but there are parameters, then assume the user knows the parameter order we're expecting and use the first parameter ($0). If there aren't any parameters at all, then use a default of 450."

// GET SIZE ARGS FROM TEMPLATE CALL
var height = (($height ?? $0) ?? '450');
var width = (($width ?? $1) ?? '300');

Get Datasets

Every dataset will be different, so we're not going to go into detail about this particular retrieval other than to point out the listbuilding. It's important to note that this is a rather complex set of data to obtain; most of the time results will be retrieved from a single query.

// DEFINE ACTIVITY FEED SOURCES
var usr = user.name;

var listsrc = site.api .. '/users/=' ..usr .. '/feed?authtoken=' .. user.authtoken;
var src = listsrc .. '&format=raw&limit=500&since=';
<div id="useractivitychart">
    // GET CHART DATA
    var Series1 = [];
    var week1 = web.xml(src .. date.format(date.adddays(date.now, '-7'), 'yyyyMMddHHmmss'));
    let week1 = week1['change'];
    var w1count = #week1;
    var w1dates = date.format(date.adddays(date.now, '-7'), 'MM/dd') .. ' - ' .. date.format(date.now, 'MM/dd');
    let Series1 ..= [{y: #week1, name: w1dates}];

    var week2 = web.xml(src .. date.format(date.adddays(date.now, '-14'), 'yyyyMMddHHmmss') .. '&offset=' .. w1count);
    let week2 = week2['change'];
    var w2count = #week2;
    var w2dates = date.format(date.adddays(date.now, '-14'), 'MM/dd') .. ' - ' .. date.format(date.adddays(date.now, '-8'), 'MM/dd');
    let Series1 ..= [{y: #week2, name: w2dates}];

...

The listbuilding for MindTouch Charts is taking place in the last line of each block with the let Series1 ..= [{y: #week1, name: w1dates}]. Again, that normally would automatically would be handled for you by the query.

Call the Chart Extension

The Chart extension, while a bit unwieldy at first glance, is actually very straightforward. The function call looks like anychart(chart_xml, height, width). Of course, the chart_xml is the bulk of the parameters. I won't bother to detail all that's going on below, since most of it's simply color and formatting. MindTouch Charts is extremely extensible, and the bar chart is the simplest of the charts available; the user guide provides instruction on how to customize your chart. The XML for some sample charts can be found at the Chart Gallery, and the complete breakdown of all nodes can be found at the XML Reference. In addition, a chart animation modeller (a great tool!) can be found at the Animation Tool.

The important keys here:

• The <data> block, which is towards the top (although it can go anywhere as an immediate child of <chart>). Here, we're taking the point values from the Series1 variable defined above, and inserting it directly into the XML. The use of single quotes to start the parameter allows use of double quotes throughout the XML, which is convenient (all the samples at the AnyChart site use double quotes). Just make sure you're using the correct quotes when inserting DekiScript variables. The XML format for the point values here will be <point y="foo" name="bar" />. Note that this is for a very simple bar chart; the full set of attributes for each point (about 20) can be found here: Chart Point Attributes.
• The <title> node directly beneath the <chart_settings>. This places (and formats) the title at the top of the chart.
• The <title> nodes in the <x_axis> and <y_axis>. This places (and formats) the titles for the x and y axes respectively.

anychart('
    <anychart>
        <settings>
            <animation enabled="True"/>
        </settings>
        <charts>
            <chart plot_type="CategorizedVertical">

                <data>
                    <series name="Series 1" type="bar">
                       ' .. (
                            //INSERT XML DATA POINTS FOR ANYCHARTS
                            foreach (var v in Series1) {
                            '<point y="' .. v.y .. '" name="' .. v.name .. '" />'
                            }
                        )
                         .. '
                    </series>
                </data>

                <data_plot_settings enable_3d_mode="true" z_aspect=".25" color="black" >
                    <bar_series group_padding="0.2" >
                        <tooltip_settings enabled="true"/>
                    </bar_series>
                </data_plot_settings>

                <chart_settings>
                    <title>
                        <font color="white" />
                        <text>User Activity By Week</text>
                    </title>
                    <chart_background>
                        <fill enabled="true" type="solid" color="#707070" />
                        <border enabled="false"/>
                        <corners type="Square"/>
                    </chart_background>
                    <data_plot_background>
                        <fill color="#EEEEEE" opacity="0"/>
                    </data_plot_background>
                    <axes>
                        <x_axis>
                            <title>
                                <text>Weeks</text>
                                <font color="white" />
                            </title>
                            <labels>
                                <font color="white"/>
                            </labels>
                        </x_axis>
                        <y_axis>
                            <title>
                                <text>Edits</text>
                                <font color="white" />
                            </title>
                            <labels>
                                <font color="white"/>
                            </labels>
                        </y_axis>
                    </axes>
                </chart_settings>
            </chart>
        </charts>
    </anychart>',
    height,
    width
);

The height and width variables, which were defined at the very top of the template, are put in at the very end before the closing parenthesis.

The Whole Enchilada

Here's the entire code block, with all of the markup and code layout:

// GET SIZE ARGS FROM TEMPLATE CALL
var height = (($height ?? $0) ?? '450');
var width = (($width ?? $1) ?? '300');

// DEFINE ACTIVITY FEED SOURCES

var usr = user.name;

var listsrc = site.api .. '/users/=' ..usr .. '/feed?authtoken=' .. user.authtoken;
var src = listsrc .. '&format=raw&limit=500&since=';

<div id="useractivitychart">
    // GET CHART DATA
    var Series1 = [];
    var week1 = web.xml(src .. date.format(date.adddays(date.now, '-7'), 'yyyyMMddHHmmss'));
    let week1 = week1['change'];
    var w1count = #week1;
    var w1dates = date.format(date.adddays(date.now, '-7'), 'MM/dd') .. ' - ' .. date.format(date.now, 'MM/dd');
    let Series1 ..= [{y: #week1, name: w1dates}];

    var week2 = web.xml(src .. date.format(date.adddays(date.now, '-14'), 'yyyyMMddHHmmss') .. '&offset=' .. w1count);
    let week2 = week2['change'];
    var w2count = #week2;
    var w2dates = date.format(date.adddays(date.now, '-14'), 'MM/dd') .. ' - ' .. date.format(date.adddays(date.now, '-8'), 'MM/dd');
    let Series1 ..= [{y: #week2, name: w2dates}];

    var week3 = web.xml(src .. date.format(date.adddays(date.now, '-21'), 'yyyyMMddHHmmss') .. '&offset=' .. w2count);
    let week3 = week3['change'];
    var w3count = #week3;
    var w3dates = date.format(date.adddays(date.now, '-21'), 'MM/dd') .. ' - ' .. date.format(date.adddays(date.now, '-15'), 'MM/dd');
    let Series1 ..= [{y: #week3, name: w3dates}];

    var week4 = web.xml(src .. date.format(date.adddays(date.now, '-28'), 'yyyyMMddHHmmss') .. '&offset=' .. w3count);
    let week4 = week4['change'];
    var w4count = #week4;
    var w4dates = date.format(date.adddays(date.now, '-28'), 'MM/dd') .. ' - ' .. date.format(date.adddays(date.now, '-21'), 'MM/dd');
    let Series1 ..= [{y: #week4, name: w4dates}];



// CREATE ANYCHART, AND INSERT DATA POINTS
    anychart('<anychart>
        <settings>
            <animation enabled="True"/>
        </settings>
        <margin all="0"/>
        <charts>
            <chart plot_type="CategorizedVertical">

                <data_plot_settings enable_3d_mode="true" z_aspect=".25" color="black" >
                    <bar_series group_padding="0.2" >
                        <tooltip_settings enabled="true"/>
                    </bar_series>
                </data_plot_settings>
                <palettes>
                    <palette name="sapd_blue" type="colorrange" >
                        <gradient>
                            <key color="#2332FF"/>
                            <key color="#E8F1FF"/>
                        </gradient>
                    </palette>
                </palettes>
                <styles>
                    <bar_style name="bs">
                        <border type="Solid" color="DarkColor(%Color)" thickness="1" />
                        <effects enabled="false" />
                        <states>
                            <normal>
                                <fill type="Solid" color="%Color" opacity=".5" />
                                <effects enabled="false" />
                            </normal>
                            <hover>
                                <fill type="Solid" color="LightColor(%Color)" opacity=".6" />
                                <effects enabled="false" />
                            </hover>
                            <pushed>
                                <fill type="Solid" color="DarkColor(%Color)" opacity="1" />
                                <border type="Solid" color="Black" thickness="2" />
                                <effects enabled="true">
                                    <bevel enabled="true" />
                                </effects>
                            </pushed>
                            <selected_normal>
                                <fill type="Solid" color="LightColor(%Color)" opacity=".6" />
                                <hatch_fill enabled="True" color="DarkColor(%Color)" />
                            </selected_normal>
                            <selected_hover>
                                <fill type="Solid" color="LightColor(%Color)" opacity="1" />
                                <hatch_fill enabled="True" color="%Color" />
                            </selected_hover>
                            <missing>
                                <fill type="Gradient" opacity="1">
                                    <gradient angle="45">
                                        <key position="0" color="LightColor(%Color)" />
                                        <key position="0.5" color="White" />
                                        <key position="1" color="LightColor(%Color)" />
                                    </gradient>
                                </fill>
                                <hatch_fill enabled="false" />
                            </missing>
                        </states>
                    </bar_style>
                </styles>
                <chart_settings>
                    <title enabled="true">
                        <font color="white" />
                        <text>User Activity By Week</text>
                    </title>
                    <chart_background>
                        <fill enabled="true" type="solid" color="#707070"/>
                        <border enabled="true"/>
                        <corners type="Square"/>
                    </chart_background>
                    <data_plot_background>
                        <fill type="gradient" opacity="0">
                            <gradient type="radial">
                                <key position="0" color="#FFFFFF" />
                                <key position="1" color="#DBE2F2" />
                            </gradient>
                        </fill>
                     </data_plot_background>
                    <axes>
                        <x_axis>
                            <title>
                                <text>Weeks</text>
                                <font color="white" />
                            </title>
                            <labels>
                                <font color="white"/>
                            </labels>
                            <scale major_interval="10" minor_interval="5" />
                        </x_axis>
                        <y_axis>
                            <title>
                                <text>Edits</text>
                                <font color="white" />
                            </title>
                            <labels>
                                <font color="white"/>
                            </labels>
                            <scale major_interval="10" minor_interval="5" />
                        </y_axis>
                    </axes>
                </chart_settings>
                <data>
                    <series name="Series 1" type="bar" style="bs" palette="sapd_blue">
                        ' .. 
                        (
                            //INSERT XML DATA POINTS FOR ANYCHARTS
                            foreach (var v in Series1) {
                            '<point y="' .. v.y .. '" name="' .. v.name .. '" />'
                        })
                         .. '
                    </series>
                </data>
            </chart>
        </charts>
    </anychart>', 
    height, 
    width
);

</div>