Onclick open new chart highcharts

Rakesh Sharma      No Comments  

Onclick open new chart or category subcategory chart highcharts

Sometime we need to make a new chart onclick existing chart like category subcategory chart. so here we can make new chart onclick existing chart using highcahrts. highcharts is most using charts library to make graphs in javascript. we can easily integrate or make charts using highcharts api. we are using example of column. bar and pie charts. below i am showing category charts first then opened subcategory charts on click category.

get value onclick bar chart highcharts :-

you will get y axis value and category name on click bar

plotOptions: {
  column: {
    pointPadding: 0.2,
    borderWidth: 0
  },
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function() {
          alert ('Category: '+ this.category +', value: '+ this.y);
        }
      }
    }
  }
},

get value onclick pie chart highcharts :-

you will get y axis value and options name on click bar

plotOptions: {
  pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    point: {
      events: {
        click: function(event) {
            alert('Person who like' + this.options.name + ' ' + this.options.y);
	}
      }
   }
},

both method use to getting values onclick series of graph using highcharts. on onclick you will get alert box which shows options details.

Live Demo

to show new chart onclick existing chart.

Get Full code :-

<!DOCTYPE html>
<html class="no-js">
<head>
<script src="http://code.jquery.com/jquery-git2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
<!-- BAR chart -->
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: ['Jan','Feb','Mar','Apr','May','Jun']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            },
			series: {
			  cursor: 'pointer',
		      point: {
			    events: {
				 click: function() {//alert ('Category: '+ this.category +', value: '+ this.y);
					 draw_cat_chart(this.category);
				 }
			    }
		      }
           }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3]

        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5]

        }]
    });
});
<!-- PIE chart -->
$(function () {
    $('#container_pie').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
				point: {
                   events: {
                      click: function(event) {
                         //alert('Person who like' + this.options.name + ' ' + this.options.y);
						 draw_cat_chart(this.options.name);
                      }
                   }
                },
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
				
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Jan',   45.0],
                ['Feb',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Mar',    8.5],
                ['Apr',     6.2],
                ['May',   0.7]
            ]
        }]
    });
});

// calling function to draw new chart onclick.
function draw_cat_chart(catagory)
{
	if(catagory == 'Jan') {
	  var cats = ['subcat1','subcat2','subcat3','subcat4','subcat5'];
	  var plseries = [20, 40, 50, 45, 80];
	  var acseries = [30, 60, 80, 35, 70];
	}
	if(catagory == 'Feb') {
	  var cats = ['home1','home2','home3','home4','home5'];
	  var plseries = [30, 20, 60, 55, 80];
	  var acseries = [30, 60, 80, 35, 70];
	}


	//exit;
 $('#container_subcat').highcharts({
        chart: {
            type: 'column',
		},
        title: {
            text: 'Monthly Average Rainfall'
		},
        xAxis: {
            categories: cats
        },
        yAxis: { 
            min: 0,
            title: {
                text: '',
			}
        },
        tooltip: {
            headerFormat: '<span style="font-size:8px">{point.key}</span><table>',
            pointFormat: '<tr style="border:none;"><td style="color:{series.color};padding:0;border:none;">{series.name}: </td>' +
                '<td style="padding:0;border:none;"><b>{point.y:1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0,
                borderWidth: 0
            },
		},
        series: [{
                name: 'Monthly',
                data: plseries
            }, {
                name: 'Yearly',
                data: acseries
            }]
    });
}

</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container_pie" style="min-width: 310px; height: 400px; margin: 0 auto; margin-top:100px;"></div>
<div id="container_subcat" style="min-width: 310px; height: 400px; margin: 0 auto; margin-top:100px;"></div>
</body>
</html>

Now you are all set with popout new chart onclick existing chart and getting values onclick bar and pie chart using highcharts.