cogExample of using the Highcharts JS framework to draw graphs
Developed by

Vincent Massol

Rating
Rate!
0 Votes
LicenseGNU Lesser General Public License 2.1

Description

This example uses this jsfiddle HighCharts example to draw a graph inside a wiki page using HighCharts.

Follow these steps:

  • Create a wiki page (in XWiki Syntax 2.0 or 2.1) and paste the following content as the page's content:
    (% id="container" style="width:100%; height:400px;" %)((()))
  • Then go to the Object editor mode and add an object of type XWiki.JavaScriptExtension, and use the following content in the Code property:
    require({
        paths: {
            hchart: [
               "http://code.highcharts.com/highcharts",
               "http://code.highcharts.com/highcharts-more",
               "http://code.highcharts.com/modules/exporting"
            ]
        }
    },
    ['jquery', 'hchart'], function($, hc) {
       
       window.chart = new Highcharts.Chart({
                   
            chart: {
                renderTo: 'container',
                polar: true,
                type: 'line'
            },
           
            title: {
                text: 'Budget vs spending',
                x: -80
            },
           
            pane: {
                size: '80%'
            },
           
            xAxis: {
                categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
                       'Information Technology', 'Administration'],
                tickmarkPlacement: 'on',
                lineWidth: 0
            },
               
            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0
            },
           
            tooltip: {
                shared: true,
                valuePrefix: '$'
            },
           
            legend: {
                align: 'right',
                verticalAlign: 'top',
                y: 100,
                layout: 'vertical'
            },
           
            series: [{
                name: 'Allocated Budget',
                data: [43000, 19000, 60000, 35000, 17000, 10000],
                pointPlacement: 'on'
            }, {
                name: 'Actual Spending',
                data: [50000, 39000, 42000, 31000, 26000, 14000],
                pointPlacement: 'on'
            }]
       
        });
    });

You should get the following:

highchart-sample1.png

Note that if you wish to develop an XWiki Extensions that uses HighCharts you should use the XWiki WebJars Integration since HighCharts is available on WebJars.org.

Prerequisites & Installation Instructions

Copy the code snippet to a page and save it.

Created by Vincent Massol on 2014/11/01 13:07
     

Get Connected