💡 Tip: Double-click anywhere on a Plotly chart to reset zoom/pan to the original view.
You can also use the Autoscale button in the toolbar.

Getting Started…

The app interface is split into two main areas:

Right: Leaflet map

  • 🔍 Zoom and pan on the map to locate your monitoring site of interest.

  • 🔵 Click on a blue circle to select a site.

Left: Controls, plots and site information

  • Site Selected: Displays the name of the chosen site.

    • e.g., Barratta Creek at Northcote

  • Water Level Location: Displays the station ID and full name.

    • e.g., 119101A - Barratta Creek at Northcote (WMIP)

Noting not all water quality monitoring sites are equiped with in situ hydrographic monitoring equipment (i.e. water level sensors). In such cases WQI opt to utilise the closest most appropriate water level source as a proxy, primarily for sample timing and decision making processes.

It also provides valuable context while interpreting concentrations. Take care when interpreting charts utilising water level from alternate locations.

  • Select Pesticides for Graphical Display: Choose which pesticides to show in plots.

    • Plots will generate at the bottom of the left panel and stack vertically as more are added.

  • Select Date Range: Choose the time period for plotting data.

    • Selecting large time periods will result in longer load times.

Once a site is selected and parameters are chosen, the plots on the left load (scroll down). Use the instructions below to explore the charts.

📊 Plotly Help Fact Sheet

Interactive charts in this web app utilise the Plotly graphing library. This guide explains how to interact with Plotly charts and quickly find the information you need.

For more detailed walk-through, see the Plotly documentation: Zoom, Pan, and Hover Controls.

✅ Quick Reference

  • 🔍 Zoom: Click & drag
  • ✋ Pan: Hand tool
  • ↔︎️ Reset: Double-click / Autoscale
  • ✨ Hover: Move mouse over points
  • 🎯 Select: Box / Lasso
  • 📑 Export: Camera icon

🔍 Zoom & Pan

  • Zoom: Click and drag inside the plot area
  • Pan: Use the hand tool in the toolbar
  • Reset view: Double-click anywhere

✨ Hover Tooltips

  • Hover over points, lines, or bars to see details
    • Where no hover information appears against a ‘line’, the chart may be interpolating between points where a data gap exists.
  • Tooltips often show labels, values, and units

🎯 Highlighting & Selection

  • Use box select or lasso select tools to highlight points

↔︎️ Autoscale & Reset

  • After zooming, click Autoscale in the toolbar to return to full view
    • Or just double-click the plot
  • Can also be applied to individual axis by hovering over and double clicking
    • Similarly, you may click and drag to manipulate the axis as required

📑 Export Options

  • Click the 📷 camera icon in the toolbar to save as PNG
  • Export respects zoom, pan, and selections
    • Screen resolution and zooming in your browser can affect how the charts are displayed.
    • If you find things are overlaying incorrectly or legends/titles are being cut off in export, try adjusting your zoom settings in your browser.

🎬 Example Usage Video

Watch this short demo of how to interact with the app:

Please note:

  • This video has no sound

  • Auto-scaling is handled by double-click (not shown well in the video).