0

I would like to link the functionality (print, export to excel etc) of the navigation button of highcharts to a bootstrap dropdown menu. This drop-down panel is in the panel-heading separate from the graph in the panel. I have made this example. The intention is that if you click on the bootstrap dropdown icon and for example on "Download CSV" you will receive pop-up to download, which now applies to the navigation button of highcharts.

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-xs-8">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>Panel title
            <div class="btn-group pull-right">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="glyphicon glyphicon-th-large"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Print chart</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Download PNG image</a></li>
                <li><a href="#">Download JPEG image</a></li>
                <li><a href="#">Download PDF document</a></li>
                <li><a href="#">Download SVG vector image</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Download CSV</a></li>
                <li><a href="#">Download XLS</a></li>
                <li><a href="#">View data table</a></li>
                <li><a href="#">Open in Highcharts Cloud</a></li>
              </ul>
            </div>
          </h3>
        </div>
        <div class="panel-body">
          <div id="container"></div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

Highcharts.chart('container', {

title: {
  text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
  text: 'Source: thesolarfoundation.com'
},

yAxis: {
  title: {
    text: 'Number of Employees'
  }
},
legend: {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle'
},

plotOptions: {
  series: {
    label: {
      connectorAllowed: false
    },
    pointStart: 2010
  }
},

series: [{
  name: 'Installation',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
  name: 'Manufacturing',
  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
  name: 'Sales & Distribution',
  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
  name: 'Project Development',
  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
  name: 'Other',
  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
      }
    }
  }]
}

});

Hopefully someone can help me to solve this problem. Thank you in advance!!

Kees de Jager
  • 582
  • 1
  • 7
  • 25
  • 1
    You will find some documentation and examples about that [here](https://api.highcharts.com/class-reference/Highcharts.Chart#exportChart) – Core972 May 15 '18 at 18:37
  • Thanks! SVG is working now. I also tried PDF but my computer does not automatically recognize that it is a pdf document but it can be opened as a pdf. Unfortunately, I can not find any information about exporting csv / xls file. Which asked after you press "Download CSV" if you want to open it with excel. Do you know if this can be done in the same way? This is the new example: https://jsfiddle.net/Pension007/0yy5qfc7/2/ – Kees de Jager May 15 '18 at 20:14
  • 1
    For exporting csv/xls you need an extra module export-data. See my answer here https://stackoverflow.com/questions/49919506/export-csv-from-highcharts - then you should be able to use chart.dowanloadCSV/XLS methods. – morganfree May 16 '18 at 09:26
  • Thanks again morganfree!! In this example everything works as expected: https://jsfiddle.net/Pension007/0yy5qfc7/9/ Unfortunately, that is not the case in this example: https://jsfiddle.net/Pension007/0yy5qfc7/12/ You know why that is and how I can fix this problem? Thanks again for the effort !! – Kees de Jager May 16 '18 at 19:37
  • If someone else can help me further please let me know. I still run into the problem that it does not work in combination with "containerId" and "definition". I do not know how to fix this: https://jsfiddle.net/Pension007/0yy5qfc7/12/ – Kees de Jager May 17 '18 at 19:03

0 Answers0