CODEWITHSUNDEEP
javascripthighcharts
logicstar
logicstar

Reputation: 197

How to add two different mouse over for two different type of series in same chart?

This question refers to my previous question:

Hover on areas not on point in Highchart-polygon

I have one code where i use multi-series of data. 1. polygon type 2. line type(x,y). 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="stylesheet" href="style.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>    
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type='text/javascript'>

    $(function() {
    var chart;
    var options = {
        chart : {
            type : 'polygon',
            renderTo : 'container',
                zoomType:''
        },
        title : {

            text : ''
        },
                 credits: {
            enabled: false
        }, 
        yAxis : {
            title : false,
            gridLineWidth : 0,
            lineWidth : 0,
            labels : {
                enabled : false
            }
        },

        xAxis : [{
            title : true,
            gridLineWidth : 0,
            lineWidth : 1,
            labels : {
                  enabled : true
                     },
                        plotLines: [{
                           color: '#FF0000',
                           width: 2,
                           value:61570783
                        }]

                },
                       ],
           plotOptions : {
            series : {
                lineWidth : '.2px',
                lineColor : 'black',
                                dashStyle: 'solid' 
            }
        },

           series : [ {} ],
        tooltip: {
           formatter :function (){ 
               return  this.series.options.someText;
           }
        }         

    };

    $("#container").html("<div style='style:margin:0 auto'><center><font size='5'>Loading Data....</font></center></div>") ;

        $.getJSON('data.json', function(data) {
               options.series=data; 
               var chart = new Highcharts.Chart(options);
        });

}); 
   </script>
   </head>
   <body>
   <div  id="container" style="min-width: 310px; max-width: 800px; height: 800px; margin: 0 auto"></div>
   <br>
 </body>
</html>

data.json

[{"showInLegend": false,"someText": "AAA", "color": "#FAFAFA", "data": [[61565285, 182], [61565385, 382], [61564937.5, 1277], [61564837.5, 1077]] } 
,{"showInLegend": false,"someText": "BBB", "color": "#FAFAFA", "data": [[61565385, 382], [61565403.5, 419], [61564956, 1314], [61564937.5, 1277]] }  
,{"name": "Position","enableMouseTracking": false,"lineColor": " #008000 ", "data": [[ 61564299 ,0 ],[ 61565194 ,0 ],[ 61565376 ,0 ],[ 61565576 ,0 ],[ 61565613 ,0 ],[ 61565882 ,0 ],[ 61565908 ,0 ],[ 61567753 ,0 ],[ 61568095 ,0 ],[ 61568460 ,0 ],[ 61569306 ,0 ],[ 61569830 ,0 ],[ 61570073 ,0 ],[ 61570783 ,0 ],[ 61570936 ,0 ],[ 61571348 ,0 ],[ 61571382 ,0 ],[ 61571478 ,0 ],[ 61572273 ,0 ],[ 61572522 ,0 ],[ 61573540 ,0 ],[ 61573684 ,0 ],[ 61573791 ,0 ],[ 61573936 ,0 ],[ 61574104 ,0 ],[ 61574602 ,0 ]],"marker": {"enabled" : true,"fillColor" : "green","radius" : 3}} 
]

The above code works fine for mousever on polygon but how can i have similar text for line series [x,y,"mousevertext"] so that i can see the info about the point on mouseover the point in line series.

I found similar example but it is single dimentional line.

http://jsfiddle.net/fc0crcu3/4/ but it does not seem to working in the way i need it.

Upvotes: 0

Views: 67

Answers (1)

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

Edit with fiddle Working fiddle with your dataset

If you want custom data for each point of a line chart and on polygon custon data for that polygon not its points , Use this:

 tooltip: {
       formatter :function (){ 
           if(this.series.options.someText)
           return  this.series.options.someText;
           if(this.point.mousevertext)
           return  this.point.mousevertext;
       }
    }

Or if you want custom data same for whole line chart(not on different points of the line chat) you can use same thing as polygone (see fiddle here )

return  this.series.options.someText;

Note - (though your data isn't sorted ,error 15 seen in console)

In a similar manner you can put custom data in your object and then you call that back , The only difference there is your question's line

[x,y,"mousevertext"] so that i can see the info about the point on mouseover the point in line series. That mean you need data on hover of points. so its simple : While creation of json response or formatting response ,add custome field like 

data.push({x:item,y:yValue, color:"whatevercolor", id:item.uuid, mousevertext: 'yourMouseOverText'});

and in tooltip formatter function get it back as 

this.point.mousevertext//assuming that custom is your data to be shown.

In last question you asked a hover effect on whole polygon that's why we used options.someText but here in case of line you can simply get the data

Upvotes: 1

Related Questions