11 Replies Latest reply: Nov 4, 2014 11:46 AM by Robert Connelly RSS

    Using Highcharts.js in qlikview Extensions Objects

      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