Highcharts - Exporting Module

Question

I am using highcharts to generate graphical data pulled from a database.

I am having trouble using the exporting module. I have included the exporting property:

exporting{
  enabled:true
}

but the buttons do not appear...

I have also linked the exporting.js to the file too...no buttons appear..

Has anyone else had this issue?

EDIT:

Here is the code:

$.ajax({
               type:"POST",
               url: "retrievechartdata.php",
           data: {questionId:qId, questionIdTwo:qIdTwo, title:title, titleTwo:titleTwo, from:from, to:to},
               dataType: "json",
               success: function(data) {
         //$("#response").html("<div class='successMessage'>"+ data.valuesTwo +"</div>");   
                   var maxY = parseInt(data.max) + 1;          
                   var minY = parseInt(data.min);          

           if(minY > 0){
             minY = 0;
           }else{
             minY -= 1;
           }

           var cdata = new Array();  
           cdata= data.values.split(',');  
           for(var i=0;i<cdata.length;i++)  
           {  
             cdata[i]= parseInt(cdata[i]);  
           } 
           var leg = false;
           var title = data.questionTitle;
           if(data.valuesTwo != "FALSE"){
             leg = true;
             title += " & "+data.questionTitleTwo; 
             var cdataTwo = new Array();  
             cdataTwo = data.valuesTwo.split(',');  
             for(var i=0;i<cdataTwo.length;i++)  
               {  
             cdataTwo[i]= parseInt(cdataTwo[i]);  
               } 
           }
              chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         zoomType: 'x',
         spacingRight: 20
      },
      credits: {
        enabled: false
      },
       title: {
         text: title
      },
       subtitle: {
         text: document.ontouchstart === undefined ?
            'Click and drag in the plot area to zoom in' :
            'Drag your finger over the plot to zoom in'
      },
      xAxis: {
         type: 'datetime',
         maxZoom: 14 * 24 * 3600000, // fourteen days
         lineWidth: 1,
         lineColor: '#999999',
         title: {
            text: 'Date' 
         }
      },
      yAxis: {
         title: {
            text: data.questionTitle
         },
     labels: {
        y: 2
     },
     lineWidth: 1,
         lineColor: '#999999',
         gridLineWidth: 1,
     gridLineColor: '#eaeaea',
     min: minY,
     max: maxY, 
         startOnTick: false,
         showFirstLabel: false
      },
      tooltip: {
         shared: true               
      },
      legend: {
         enabled: leg
      },
      plotOptions: {
         area: {
            Color: {
               linearGradient: [0, 0, 0, 600],
               stops: [
                  [0, 'rgb(69, 114, 167)'],
                  [1, 'rgba(2,0,0,0)']
               ]
            },
            lineWidth: 1,           
            marker: {
               enabled: false,
               states: {
                  hover: {
                     enabled: true,
                     radius: 5
                  }
               }
            },
            shadow: false,
            states: {
               hover: {
                  lineWidth: 1                  
               }
            }
         }
      },

      series: [{
         type: 'spline',
         name: data.questionTitle,
         pointInterval: 24 * 3600 * 1000,
     pointStart: Date.UTC(data.year, data.month, data.day),
     data: cdata,
     lineColor:  '#f6a828',
     color: '#418ed6'
      },
      {
         type: 'spline',
         name: data.questionTitleTwo,
         pointInterval: 24 * 3600 * 1000,
     pointStart: Date.UTC(data.year, data.month, data.day),
     data: cdataTwo,
     lineColor:  '#808080',
     color: '#ff0000'
      }],
      exporting: {
        enabled: true
      }
   })

Answer 1

Which version of Highcharts you are using? Which version of jQuery?

Currently is the v2.1.6, I recommend you use the latest release because they are continuously fixing bugs, adding new functionality, etc.

Prior to v2.0 there is no support to the exporting feature

The only things you need to do in order to bring the exporting module working are:

1- First: Add the js script after the highcharts script, like this:

    ...
    <script type="text/javascript" src="../js/highcharts.js"></script>
    <!-- 1b) Optional: the exporting module -->
    <script type="text/javascript" src="../js/modules/exporting.js"></script>
    ...

The exporting module is enabled by default, so there is no need to have the code you posted, so you can remove it:

exporting{
  enabled:true
}

2- Second: Be sure to publish the exporting-server/index.php file correctly.

Here you have what the official documentation reads about the exporting module installation:

1. Exporting module

From version 2.0 an exporting module is available for Highcharts, which allows users to download images or PDF's of your charts. This module consists of an extra JavaScript file, exporting.js, and a web service or server module written in PHP. Highslide Software offers the exporting web service free of charge. If you include the exporting module in your charts, two buttons will appear in the upper right. One button prints the chart, which is done on the client side only. The other button handles exporting. By default, an SVG representation of the chart is sent by POST to http://export.highcharts.com , where it is converted using Apache's Batik converter to PDF, PNG or JPEG.

See the navigation and exporting reference items for a full documentation for the options available. Also see under "Methods and Properties" in the reference for members releated to exporting.

Here you can see the configuration options regarding the exporting module: http://www.highcharts.com/ref/#exporting

Hope it helps you.

Answer 2

Make sure the script tag has

type="text/javascript"