javascript - HighCharts: Use shared tooltip only when series overlap -

-

in below highcharts example, series a , b have identical data. line b visible in chart plot area, plotted directly on a.

it impossible end user know a behind b.

we can set tooltip.shared = true in configuration object show data values given x-axis point when hovered on series. however, in real-life example have 50 series plotted on chart , not appropriate.

is possible keep behaviour of tooltip.shared = false, when user hovers on series overlaps @ point 1 or more series, show (and only) of overlapping series values in tooltip? or there other user-friendly way indicate there 2+ identical y-values @ given x-value?

http://jsfiddle.net/adamtsiopani/xbyzz/

$(function () {     $('#container').highcharts({         xaxis: {             categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun',                 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']         },         tooltip: {             valuesuffix: '°c'         },         series: [{             name: 'tokyo',             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]         }, {             name: 'new york',             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]         }, {             name: 'berlin',             data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]         }, {             name: 'london',             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]         }]     }); });

http://jsfiddle.net/adamtsiopani/xbyzz/

highcharts doesn't have solution yet. have feature hide 1 series other visible, alternative. if need shared tool-tip when 2 series overlap can done shown in below fiddle.

$(function () {     var series1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];      var series2 = [24.9, 50.5, 106.4, 90.2, 80.0, 150.0, 160.6, 170.5, 160.4, 180.1, 95.6, 54.4];      $('#container').highcharts({         xaxis: {             categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']         },         tooltip: {             formatter: function () {                 var s1 = this.series.chart.series[0].processedydata[this.point.index];                 var s2 = this.series.chart.series[1].processedydata[this.point.index];                 if (s1 == s2) {                     return '<b>' + this.series.chart.series[0].name + ' :' + s1 + '</b><br/><b>' + this.series.chart.series[1].name + ' :' + s2 + '</b><br/>in month : ' + this.x;                 }                 return '<b>' + this.series.name + ' :' + this.y + '</b><br/>in month : ' + this.x;             }         },         series: [{             data: series1         }, {             data: series2         }]     }); });

http://jsfiddle.net/malinga/2jbdqe6x/7/

reference:http://www.malinga.me/highcharts-shared-tooltips-only-in-overlapping-points/#more-109


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more