Using Highcharts.js in qlikview Extensions Objects

[#1]

Hi Everyone,

I am trying to create a qlikview extension objects using highcharts.js

  this is the charts i want to create

http://www.highcharts.com/demo/pie-basic

Code for creating this chart in browser is here

Edit fiddle - JSFiddle

I am trying to write this code for extension object my script.js file is here

var path  = Qva.Remote + (Qva.Remote.indexOf('?') >= 0 ? '&' : '?') + 'public=only' + '&name=' + "Extensions/ET-HelloWorld/";
//alert('hi');
function pie_label_init(){
  Qva.LoadScript(path + 'jquery-1.11.1.min.js', function() {  
  Qva.LoadScript(path + 'highcharts.js', function() {
  Qva.LoadScript(path + 'exporting.js', bar_chart)
  });
  });
  }
function bar_chart() {

    //alert('hi');
        var divhtml = document.createElement("div");
        divhtml.setAttribute('id', 'container');
    //alert('div Element created with' + divhtml.id);
    $(document).ready(function () {
    Qv.AddExtension('ET-HelloWorld', function() {  
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
}); 
//alert('hi');
});
}
pie_label_init();

This code is running without any error , it also executing all the alert statements but it's not displaying the chart.

where i am wrong ?? Please Help 

Thanks in Advance

Vivek

[#2]

Hi Bob,

i can't see anything in the highcharts api that can be used.

What i can suggest you is to modify the y-axis values before draw, so the array to contain not only the raw values (West, SouthEast etc.) but to include the values itself (West $100, SouthEast $200 etc.). This way you will have the result.

In this case the tool tip will also include the amount. But you can use tooltip api (Highcharts API Reference) to remove the extra bits from it.

Stefan

[robert_connelly]

Hi Stefan,

Thanks again for your help. I also didn't see anything in the HighCharts api and figured it would take concatenating the categories with the values. Was hoping it would have been something easier but this shouldn't be too complicated. Appreciate the feedback!

Thanks

Bob