From b05aadd5065e83863a233eefe945865e901c6969 Mon Sep 17 00:00:00 2001 From: michaelbabyn Date: Mon, 6 Aug 2018 16:32:57 -0400 Subject: [PATCH 1/3] add example for plotly legend click events --- .../2018-08-06-order6_legendclick_event.html | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 _posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html diff --git a/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html b/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html new file mode 100644 index 000000000000..e7ff330f3524 --- /dev/null +++ b/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html @@ -0,0 +1,52 @@ +--- +name: Legend Click Events +plot_url: https://codepen.io/plotly/embed/vazxKv/?height=500&theme-id=15263&default-tab=result +language: plotly_js +suite: events +order: 4.1 +sitemap: false +arrangement: horizontal +markdown_content: | + `plotly_legendclick` and `plotly_legenddoubleclick` allow customization of the plotly legend. The default behaviour of `plotly_legendclick` is to hide a trace and the default behavior of `plotly_legenddoubleclick` is to select one trace and hide all the others. + We can add to the default behaviour by creating a new `plotly_legendclick` event with a function of our choice. We can also disable the default behaviour by creating a function that returns `false`. In the example below, we do both in order to create a `plotly_legendclick` event which changes the marker color back to black instead of erasing the trace. +-- + +var myPlot = document.getElementById('myDiv'), + x = [1, 2, 3, 4, 5, 6], + y = [1, 2, 3, 2, 3, 4], + y2 = [1, 4, 7, 6, 1, 5], + colors = [['#00000','#00000','#00000','#00000','#00000','#00000'], + ['#00000','#00000','#00000','#00000','#00000','#00000']], + data = [{x:x, y:y, type:'scatter', + mode:'line', line:{ color:'red'},marker:{size:16, color:colors[0]}}, + {x:x, y:y2, type:'scatter', + mode:'line',line:{ color:'black'}, marker:{size:16, color:colors[1]}}], + layout = { + showlegend: true, + hovermode:'closest', + title:'Click on a Point to Change Color
Click on a Trace in the Legend to Change Back One Trace Only' + }; + +Plotly.newPlot('myDiv', data, layout); + +myPlot.on('plotly_click', function(data){ + var pn='', + tn='', + colors=[]; + for(var i=0; i < data.points.length; i++){ + pn = data.points[i].pointNumber; + tn = data.points[i].curveNumber; + colors = data.points[i].data.marker.color; + }; + colors[pn] = '#C54C82'; + var update = {'marker':{color: colors, size:16}}; + Plotly.restyle('myDiv', update,[tn]); +}); + +myPlot.on('plotly_legendclick', function(data){ + var trColors = ['#00000','#00000','#00000', + '#00000','#00000','#00000']; + var update = {'marker':{color: trColors, size:16}}; + Plotly.restyle('myDiv', update,[data.curveNumber]); + return false; +}); From 1a2f9bb41732c48fb8610d5a84e29780a09e09f2 Mon Sep 17 00:00:00 2001 From: michaelbabyn Date: Mon, 6 Aug 2018 17:25:41 -0400 Subject: [PATCH 2/3] fix formatting error preventing page from being rendered --- .../events/2018-08-06-order6_legendclick_event.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html b/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html index e7ff330f3524..7da9940684a2 100644 --- a/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html +++ b/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html @@ -9,7 +9,7 @@ markdown_content: | `plotly_legendclick` and `plotly_legenddoubleclick` allow customization of the plotly legend. The default behaviour of `plotly_legendclick` is to hide a trace and the default behavior of `plotly_legenddoubleclick` is to select one trace and hide all the others. We can add to the default behaviour by creating a new `plotly_legendclick` event with a function of our choice. We can also disable the default behaviour by creating a function that returns `false`. In the example below, we do both in order to create a `plotly_legendclick` event which changes the marker color back to black instead of erasing the trace. --- +--- var myPlot = document.getElementById('myDiv'), x = [1, 2, 3, 4, 5, 6], From 48aac3d9c5a216cdbb36860daac92e32b90724bf Mon Sep 17 00:00:00 2001 From: michaelbabyn <41019918+michaelbabyn@users.noreply.github.com> Date: Sun, 12 Aug 2018 08:01:17 -0400 Subject: [PATCH 3/3] Update 2018-08-06-order6_legendclick_event.html --- .../2018-08-06-order6_legendclick_event.html | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html b/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html index 7da9940684a2..83954935a432 100644 --- a/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html +++ b/_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html @@ -10,17 +10,16 @@ `plotly_legendclick` and `plotly_legenddoubleclick` allow customization of the plotly legend. The default behaviour of `plotly_legendclick` is to hide a trace and the default behavior of `plotly_legenddoubleclick` is to select one trace and hide all the others. We can add to the default behaviour by creating a new `plotly_legendclick` event with a function of our choice. We can also disable the default behaviour by creating a function that returns `false`. In the example below, we do both in order to create a `plotly_legendclick` event which changes the marker color back to black instead of erasing the trace. --- - var myPlot = document.getElementById('myDiv'), x = [1, 2, 3, 4, 5, 6], y = [1, 2, 3, 2, 3, 4], y2 = [1, 4, 7, 6, 1, 5], - colors = [['#00000','#00000','#00000','#00000','#00000','#00000'], - ['#00000','#00000','#00000','#00000','#00000','#00000']], + colors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'], + ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']], data = [{x:x, y:y, type:'scatter', - mode:'line', line:{ color:'red'},marker:{size:16, color:colors[0]}}, + mode:'line', line:{ color:'#5C636E'},marker:{size:16, color:colors[0]}}, {x:x, y:y2, type:'scatter', - mode:'line',line:{ color:'black'}, marker:{size:16, color:colors[1]}}], + mode:'line',line:{ color:'#393e46'}, marker:{size:16, color:colors[1]}}], layout = { showlegend: true, hovermode:'closest', @@ -44,9 +43,9 @@ }); myPlot.on('plotly_legendclick', function(data){ - var trColors = ['#00000','#00000','#00000', - '#00000','#00000','#00000']; - var update = {'marker':{color: trColors, size:16}}; + var trColors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'], + ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']]; + var update = {'marker':{color: trColors[data.curveNumber], size:16}}; Plotly.restyle('myDiv', update,[data.curveNumber]); return false; });