How can I add a div on the left part and this will be showed only on the mouse click on the yellow part? This is the code : http://jsfiddle.net/r6p7E/18/
events: {
mouseOut: function () {
var serie = this.points;
$.each(serie, function (i, e) {
if (!this.selected) {
this.graphic.attr({
fill: '#242c4a'
});
} else {
this.graphic.attr({
fill: '#fefe0f',
});
}
});
},
click: function(event) {
}
}
You can try something like the below:
jQuery: (just the sample part, refer Demo for full code)
click: function(event) {
//alert("ok");
$('#testDiv').show();
}
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="testDiv" style="height: 400px;">Sample Left Div</div> <!-- Added this -->
<div id="container" style="height: 400px"></div>
CSS: (to display both Div in same line and hide left div on load)
div {
display: inline;
}
#testDiv{
display: none;
}