javascripthighchartsclickpie-chartonmouseclick

How can I add a div on the left part and this will be showed only on the mouse click?


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) {

          }
       }

Solution

  • 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;
    }
    

    Updated Demo