Buttons

Author -- Prachi Mishra

by Prachi Mishra

HTML

<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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div align="center" style="font-size: 14px;">
<div align="center" style="font-size: 14px;">
						Opted for <select style="border: 2px solid black"
							class="borderBox" id="states">

							<option value="allStates" data-othervalue="allStatesdd"
								data-cagr="allStatescg" data-rev="allStatesrev"
								data-exp="allStatesexp" data-debt="allStatesdebtser"
								data-def="allStatesdef" data-basic="allStatesrevenue" data-expyears="allStatesexpyears">All
								17 States</option>
							<option value="ap" data-othervalue="apdd" data-cagr="apcg"
								data-rev="aprev" data-exp="apexp" data-debt="apdebtser"
								data-def="apdef" data-basic="aprevenue" data-expyears="apexpyears">Andhra Pradesh</option>
							<option value="br" data-othervalue="brdd" data-cagr="brcg"
								data-rev="brrev" data-exp="brexp" data-debt="brdebtser"
								data-def="brdef" data-basic="brrevenue" data-expyears="brexpyears">Bihar</option>
							<option value="cg" data-othervalue="cgdd" data-cagr="cgcg"
								data-rev="cgrev" data-exp="cgexp" data-debt="cgdebtser"
								data-def="cgdef" data-expyears="cgsexpyears">Chhattisgarh</option>
							<option value="dl" data-othervalue="dldd" data-cagr="dlcg"
								data-rev="dlrev" data-exp="dlexp" data-debt="dldebtser"
								data-def="dldef">Delhi</option>
							<option value="gj" data-othervalue="gjdd" data-cagr="gjcg"
								data-rev="gjrev" data-exp="gjexp" data-debt="gjdebtser"
								data-def="gjdef" data-expyears="gjexpyears">Gujarat</option>
							<option value="hr" data-othervalue="hrdd"...

CSS

button.chart-update {
  cursor: pointer;
	background-color: #D3D3D3;
  border: none;
	border-radius: 2px;
  
	color: rgba(0,0,0,0.9);
  font-weight: bold;
  
  outline: none;
}
button.selected {
	font-size: 12px;
	color: #D3D3D3; /* text color */
	line-height: 14px;
	text-align: center;
	background-color: #000;
  shadow: none;
    outline: none;

  }

JavaScript

var chart,chartOptions ={};
var allStatesrev =  [{
    type: 'pie',
    name: 'Share',
    innerSize: '70%',
    data: [
        
        ['Capital Expenditure', 12],
        ['Repayment of Loans', 4],
        ['Revenue Expenditure', 84]
       
    ]
}]

var apexpyears = [{
	pointWidth: 18,
	name: 'Across Years',
	data: [{
		name: 'Revenue Expenditure',
		y: [123, 456, 678]
	}, {
		name: 'Capital Expenditure',
		y: [908, 786, 645]
	}, {
		name: 'Repayment of Loans',
		y: [789, 456, 123]
	}]
	       
}]

$(function(){
	Highcharts.setOptions({
	 colors: ['#0070bb', '#6390bc', '#3e5a76']
	 });
chartOptions.chart1 = {
	chart: {
	 	renderTo: 'container',
	 	backgroundColor: null,
	     plotBackgroundColor: null,
	     plotBorderWidth: 0,
	     plotShadow: false
	 },
	 credits:{
	 			enabled: false
	   },
	 title: {
	     text: null,
	     align: 'center',
	     verticalAlign: 'middle',
	     y: 40
	 },
	 tooltip: {
	     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	 },
	 plotOptions: {
	     pie: {
	    	 borderWidth:0,
	         dataLabels: {
	             enabled: true,
	             distance: 20,
	             style: {
	                 fontWeight: null,
	                 color: 'black',
	                 shadow: null
	             }
	         },
	         startAngle: -90,
	         endAngle: 90,
	         center: ['50%', '75%'],
	         showInLegend: true
	     }
	 },
	 legend:{
	 	enabled: false
	 },
	 series: allStatesrev,
	 navigation: {
	     buttonOptions: {
	         align: 'left',
	         x: -8
	         
	     }
	 }
};
chartOptions.chart2 = {
		chart:{
      renderTo: 'container', 
      type: 'column',
       backgroundColor: null, 
       shadow:false,
       },
       style: {
           fontFamily: 'Adobe Caslon Regular'
       },
          title: {
              text: null,
              x: -10, //center
              fontSize: '10px' 
          },
          subtitle: {
              text: null,
              x: -10
          },
...