MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 13:48, 4 Jan 2011 by neilw
MindTouch Community Portal > App Catalog > Highcharts - a wrapper for the Highcharts JavaScript graphing package
Page Notifications Off
1 of 1 found this page helpful

Highcharts - a wrapper for the Highcharts JavaScript graphing package

    Discuss this template here

    Description

    This is a wrapper for highly awesome Highcharts graphing package.  Two reasons this package is great:

    1. Produces beautiful graphs.
    2. Based on JavaScript, SVG, and VML, so no plugins required and no dependency on Excanvas for IE compatibility.  Has proven reliable on a wide variety of browsers.
    3. Flexibility.  You can make these charts do just about anything.
    Although the Highcharts package is quite complex, this template is designed to make it very easy to produce a wide variety of pleasing and useful graphs, by applying a reasonably intelligent set of defaults and interpretation of a small set of parameters.  It also gives you access to (almost) the complete functionality of Highcharts should you desire it, in convenient DekiScript form.

    Requirements

    • Mindtouch 10.0.
    • Highcharts is not free for commercial use, so please check licensing terms.  The fees are reasonable, help support worthy software!
    • You must have UNSAFECONTENT permission to install this template!
    • You must attach the highcharts.js file to the template page on your wiki.

    Version

    Version Date Author Description
    0.2.1b 15-Oct-2010 Neil Weinstock Fixed a major bug in the handling of the options parameter.

    How to Install

    These instructions will help you install the template'Highcharts' on your wiki quickly and correctly.

    Perform the following steps:

    1. Copy the template source code:
      1. If the code in the "HTML Source" area below is not already visible and selected, click the "View" button to display and select it.
      2. Copy it to your clipboard (CTRL-C).
    2. Create a new template on your wiki:
      1. Select the Tools->Templates menu item on your wiki
      2. Click "New Page" button. This will open the editor on a new page with the title "Template:Page Title".
      3. Replace "Page Title" with the name of the template.
    3. Paste in the source code:
      1. In the editor, click the "View->Source" menu item to view the HTML source of the page.
      2. Select all text (CTRL-A).
      3. Paste in the template source code from the clipboard (CTRL-V).
    4. Click "Save" button.

    HTML Source for Template:Highcharts

    Parameters

    Name Type Default Description
    CORE The following arguments are all you need to do anything you want.  These can all be accessed either in an ordered list (highcharts(type, size, data, options)) or via an argument map (highcharts { type:"line", etc. }).
    type str? "line"

    Default chart type.  May be one of the following (case insensitive):

    • line
    • spline
    • area
    • areaspline
    • bar
    • column
    • scatter
    • pie
    • raw

    For all options except "raw", this template will generate a set of pleasing defaults for that chart type.  For "raw", this template generate "renderTo" and "series" (from the data parameter), but leave everything else up to you to implement via the options parameter.  In other words, the template will pretty much get out of the way and let you feed Highcharts exactly the options you want.
    size list of two numbers? [400,200] Width and height (in pixels) of chart container
    data list required List of data series.  Format of each data series is chart type-dependent. (add more here)
    options map? {}

    Additional options passed directly to Highcharts.  This options map is intelligently (?) merged with the options generated by the template based on the previous parameters.  So you only need to specify options here to either override or modify what the template already provides.

    Note that label and tooltip formatters (if desired) must be specified using the dedicated options given below.
    labelFormatter str? nil

    Code for a custom plotOptions.series.dataLabels.formatter function.  This lets you specify the exact contents of the labels shown on the chart for each data point.  This is generally most useful for pie charts.  See the linked documentation for explanation and examples.

    Note that the template will automatically generate the function wrapper; you only need to specify the contents of the formatter function (i.e., everything inside the {}).
    tooltipFormatter str? nil

    Code for a custom tooltip.formatter function.  This lets you specify the exact contents of the tooltip shown when you mouse-over a point on the chart.  This works will all chart types.

    As with labelFormatter, you only specify the contents of the function, and the template will generate the function wrapper.
    debug bool? false Show debug output.  Specifically, this will display the argument map that is passed to Highcharts.  This option requires the PrettyPrint template, and CollapseItem is recommended as well.
    CONVENIENCE The following arguments are provided as convenient shortcuts for applying some common modifications to the graph.  These can be accessed only as named arguments in an argument map (highcharts {}).
    animation bool? false

    Enable or disable animation when the graph is first displayed.

    Shorthand for options.plotOptions.series.animation.
    categories list? nil

    Category names for the x axis.  Size of this list should be equal (at least) to the size of the data series.

    Shorthand for options.xAxis.categories.
    title str? nil

    Title text for the chart.  This will be placed above the chart, centered.  For more precise control, feed the required info directly to the options parameter.

    Shorthand for options.title.text, plus some additional interpretation.
    stacking str? nil

    Set to "normal" to stack based on summing the series.  Set to "percent" to stack based on percentage of total.

    Shorthand for options.plotOptions.series.stacking.

    Examples

    Try rolling over and clicking stuff (including the legends!).  Here's the data we'll use for all the charts:

    var pieData = [ [ "slice1",20 ], [ "slice2", 50 ], [ "slice3",40 ], [ "slice4", 10 ], [ "slice5", 3 ] ];

var lineData = [
    { name: "First", data:  [ 10,20, 50, 30, 10, 40, 20 ] },
    { name: "Second", data: [ 1, 3,  5,  12, 9,  11, 13] },
    { name: "Third", data:  [ 10,9,  8,  7,  6,  1,  4 ] }
];
var lineCategories = [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ];

    Pie chart

    By default, the template labels each slice with its value.  Fancier behavior requires use of the options arg.

    Try clicking the pie slices.

    highcharts{
    type:"pie",
    size: [ 400, 200 ],
    data: pieData,
    title: "A basic pie chart"
};

    This shows the use of custom formatters.

    highcharts{
    type:"pie",
    size: [400,200],
    data: pieData,
    title: "Custom Formatters",
    labelFormatter:
        "if (this.percentage >= 5) return this.percentage.toFixed(1)+'%'",
    tooltipFormatter:
        "return '<b>'+this.point.name+':</b> '+this.y+' ('+this.percentage.toFixed(1)+'%)'"
};

    Line charts

    Basic line chart:

    highcharts("line", [ 400,250 ], lineData);

    Here's one with splines and a title:

    highcharts {
    type:"spline",
    size:[ 400,250 ],
    data: lineData,
    title: "Spline Chart"
};

    Bar charts

    Basic horizontal bar chart.

    highcharts("bar", [ 400,300 ], lineData);

    Mouseover behavior on the lower left part of the horizontal bar charts is wonky in Webkit browsers, need to work on that.

    Horizontal bar chart with normally stacked bars, and proper categories:

    highcharts {
    type:    "bar",
    size:    [ 400,250 ], 
    data:    lineData,
    stacking: "normal",
    categories: lineCategories
};
     

    Here's a vertical bar ("column") chart.

    highcharts("column", [ 400,250 ], lineData);

    Column chart with percent-stacked bars.

    highcharts {
    type:    "column",
    size:    [ 400,250 ], 
    data:    lineData,
    stacking: "percent"
};

    Area Charts

    Area charts are pretty much the same as line charts, but with the area under each series filled in.

    Basic area chart.

    highcharts("area", [ 400,250 ], lineData);

    Area chart with spline.

    highcharts("areaspline", [ 400,250 ], lineData);

    Normally stacked areas.

    highcharts {
    type:   "area",
    size:   [ 400, 250 ],
    data:   lineData,
    stacking: "normal",
    title: "This is an Area Chart"
};

    Debug output

    highcharts{
    type: "area",
    size: [400,250 ],
    data: lineData,
    debug: true,
    title: "This is a demo of the Debug feature",
    tooltipFormatter: "return 'This point has the value '+this.y;",
    options: {
        chart: { marginBottom: 50 },
        xAxis: { title: { text:"my X axis name" } },
        yAxis: { title: { text:"my Y axis name" } }
    }
};
    Highcharts debug output
    Here are the parameters passed to the template:
    { }
    Here is the generated argument map passed to Highcharts:
    { }
    The custom tooltip formatter is: function() { return 'This point has the value '+this.y; }
    The resulting chart appears below this box.
    Was this page helpful?
    Tag page
    What links here

    Files 0

    Attach file or image
     
    Viewing 5 of 5 comments: view all
    #2
    Mseuda says:
    Hi. I does not how understand to use "options". Could you put an example to modify the title yAxis? Thank you.
    Posted 07:19, 4 Jan 2011
    #3
    neilw says:
    @Mseuda
    Good point. I've added this to the last example ("Debug Output"). To enable the X axis name to show, I increased the marginBottom value to 50 to make room. Getting this all "just right" takes a bit of trial and error, and you need to become familiar with the Highcharts options given here: http://www.highcharts.com/ref/. Over time, I'll add more dedicated options handling to the template to make this easier (axis titles are probably going to be one of the first things I do...)
    Posted 14:08, 4 Jan 2011
    #4
    Mseuda says:
    Hi. I'm really sorry, i've see the last example, but i don't read the code. It work now ! Thank you.
    PS : your template is a very good works, thank again.
    Posted 22:42, 4 Jan 2011
    #5
    MPD says:
    In my environment, Windows 7 and Internet Explorer 8 (32 bit) returns blank charts, but Firefox and Chrome work fine. Anyone know the fix?
    Posted 13:36, 23 Nov 2011
    #6
    neilw says:
    @MPD Sorry I don't know if I ever saw this comment until now. I personally experience reliable operation with IE8 (64 bit), but we're having problems with IE9. A newer version of the Highcharts script might help, but I haven't had a chance to try integrating it yet.

    Honestly, I don't know how to keep on top of all the different IE behaviors.
    Posted 12:00, 26 Mar 2012
    Viewing 5 of 5 comments: view all
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by