Example of using the Highcharts JS framework to draw graphs

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: