diff --git a/How-to-work-with-plotly-interactive-selection.md b/How-to-work-with-plotly-interactive-selection.md new file mode 100644 index 0000000..d07a9f1 --- /dev/null +++ b/How-to-work-with-plotly-interactive-selection.md @@ -0,0 +1,33 @@ +# How to work with Plotly interactive selection + +Plotly supports interactive selection on some chart types, like scatterplot, +where you can select a subset of the points. It may be helpful for live +presentation purposes, but there's no UI to interact with it if you want to +compute something from the selection, like the count of points. + +![plotly scatterplot selection](./img/Screenshot_plotly_selection.png) + +This page proposes a workaround with browser console. Right click on the Plotly +chart and select *Inspect* in the context menu. In the opened browser DOM +inspector scroll up and find the chart's container, matching +`div.js-plotly-plot` CSS selector. Right click and select *Use in console* or +*Set as global variable* (depending on the browser). Then in *Console* tab paste +the following snippet (adjust to your needs): + +```javascript +temp0.on('plotly_selected', function(eventData) { + if (eventData) { + const start = Date.parse(eventData.range.x[0]) + const finish = Date.parse(eventData.range.x[1]) + console.log('---------- Selected points ----------') + console.log('Range, s:', (finish - start) / 1000) + console.log('Count:', eventData.points.length) + } +}) +``` + +To update set listener, first unset the existing one with: + +```javascript +temp0.removeAllListeners('plotly_selected') +``` diff --git a/img/Screenshot_plotly_selection.png b/img/Screenshot_plotly_selection.png new file mode 100644 index 0000000..59c5273 Binary files /dev/null and b/img/Screenshot_plotly_selection.png differ diff --git a/sidebar.json b/sidebar.json index eb1523f..a4381f8 100644 --- a/sidebar.json +++ b/sidebar.json @@ -1,33 +1,35 @@ [{ - "sections": [{ - "title": "For users", - "items": [ - "/docs/", - "/docs/installation/", - "/docs/basic-usage/", - "/docs/multiple-csv-file-import/", - "/docs/manage-inquiries/", - "/docs/export-current-database/", - "/docs/graph/", - "/docs/pivot-table/", - "/docs/predefined-inquiries/", - "/docs/sharing/", - "/docs/diagnostic-information/" - ] - }, - { - "title": "Examples and tutorials", - "items": [ - "/docs/how-to-migrate-to-sqliteviz-dot-com/", - "/docs/how-to-build-a-pivot-table-in-sq-lite/", - "/docs/how-to-rename-tables-and-columns-after-csv-import/" - ] - }, - { - "title": "For developers", - "items": [ - "/docs/integrate-predefined-inquiries/" - ] - } - ] + "sections": [ + { + "title": "For users", + "items": [ + "/docs/", + "/docs/installation/", + "/docs/basic-usage/", + "/docs/multiple-csv-file-import/", + "/docs/manage-inquiries/", + "/docs/export-current-database/", + "/docs/graph/", + "/docs/pivot-table/", + "/docs/predefined-inquiries/", + "/docs/sharing/", + "/docs/diagnostic-information/" + ] + }, + { + "title": "Examples and tutorials", + "items": [ + "/docs/how-to-migrate-to-sqliteviz-dot-com/", + "/docs/how-to-build-a-pivot-table-in-sq-lite/", + "/docs/how-to-rename-tables-and-columns-after-csv-import/", + "/docs/how-to-work-with-plotly-interactive-selection/" + ] + }, + { + "title": "For developers", + "items": [ + "/docs/integrate-predefined-inquiries/" + ] + } + ] }]