Deluxe Graphing (Indigo Plugin)

Deluxe Graphing is an Indigo plugin that provides a simple local web app for viewing historical Indigo device state data as charts (from a PostgreSQL-backed history table). It can also generate PNGs on demand, making it ideal for wall/tablet dashboards and Indigo Control Pages.

It’s designed to work well with dashboard apps such as Kiosk Home:

• Use the Web URL for a live/refreshing view (ideal for an iFrame / “Go to External URL”)
• Use the Render PNG URL when you want an image file updated on demand (ideal for Indigo Control Pages and image-based dashboards)

Screenshots

Single graph (one device + one state)

Multi graph (multiple devices/states on one chart)

Multi graphs let you combine several device states into a single chart (for example, multiple “watts” states on the same chart, or a left/right axis pairing such as temperature + power).

Indigo Control Page example (PNG refresh)

This shows how to use the Render PNG URL inside the Indigo Control Page editor so the image can be refreshed on a schedule (or by an Indigo action/trigger).

Features

Live web graphs

• Local web UI for selecting a device/state and chart options
• Shareable Web URL (bookmarkable)
• Auto-refreshing graph view for dashboards

Presets (optional)

Presets provide defaults only (colors, chart options, etc.). Your URL options always win, so existing links won’t break.

Multi Device/State graphs (optional)

Create a saved “multi graph” definition that combines multiple device states into a single chart: - each series can have its own label and color - series can be assigned to different axes (for example left/right)

The builder page (shown in MainMulti.png) makes it easy to add multiple series and save them as a named multi graph. The multi graph viewer then displays them together (see Example_multi.png).

PNG rendering (for image-based dashboards)

Deluxe Graphing can render charts to PNG files and also return the PNG image directly.

This is especially useful when: - your dashboard prefers images rather than embedded web pages - you want to use Indigo Control Pages (see Controlpage.png) - you want a single image file updated on demand (for example, via a schedule)

For multi graphs, the builder page shows a ready-to-copy render URL at the bottom once you have saved a multi graph (see MainMultiPng.png).

Requirements

• Indigo 2025.x (plugin runs inside Indigo’s Python runtime)
• PostgreSQL configured with the expected history tables (configured in plugin preferences)

For PNG rendering only - Playwright + Chromium browser download (one-time)

Getting Started

1. Install and enable the plugin in Indigo.
2. Configure your database settings in plugin preferences.
3. Start the plugin (the web server starts automatically).

Your Indigo log will show the local address to open in a browser.

How to use

1) Single graph

1. Open the main web UI (shown in MainScreen.png).
2. Select a device and the state you want to graph.
3. Copy the Shareable Web URL for dashboards, or the Render PNG URL for image-based use.
4. Open the URL in your dashboard app (Kiosk Home, browser shortcut, etc.).

The resulting chart looks like Example.png.

2) Multi Device/State graph

1. From the main UI, click Multiple Device/State Graphing.
2. In the multi graph builder (shown in MainMulti.png), add multiple device+state series.
3. Optionally choose a preset, then Save the multi graph.
4. Click View Multi Graph to open it (example shown in Example_multi.png).
5. If you want PNG output, copy the render URL shown at the bottom (shown in MainMultiPng.png).

3) Indigo Control Page (PNG refresh approach)

If you’re building an Indigo Control Page and want the chart to appear as an image:

• Use the Render PNG URL as the image source (shown in Controlpage.png).
• Trigger refreshes on a schedule or via Indigo actions (the URL overwrites the saved PNG file and returns the image).

This gives you a reliable “always show latest chart image” workflow inside Indigo.

Presets (JSON)

Presets let you save a named set of defaults for how graphs look and behave. You manage presets using the built-in Preset Manager page (no manual file editing required).

A preset has three main sections:

• uiDefaults “Simple” defaults that match the same options the UI normally puts into URLs (hours, chart type, colors, fill, stats, font).

• chartJsOverrides (optional JSON object) Advanced Chart.js options overrides. This is where you can change legend position, grid/tick styling, tooltip styling, animations, interaction mode, etc.

• datasetOverrides (optional JSON object) Advanced per-series dataset settings (line width, points, dashed lines, stepped lines, etc.). For multi graphs, these overrides are applied to every series.

Notes: - URL parameters still override preset defaults (presets are “defaults”, not hard locks). - If you’re not seeing changes, add a “smoking gun” override like a chart title (example below) to confirm the preset is being applied.

Using the Preset Manager

1. Open the main Deluxe Graphing page.
2. Click Manage Presets.
3. Create a preset name.
4. Set any uiDefaults using the form.
5. (Optional) Paste JSON into:
   • chartJsOverrides (advanced Chart.js options)
   • datasetOverrides (advanced dataset styling)
6. Click Save Preset.

Example JSON you can paste into the Preset Manager

You can paste this into chartJsOverrides:

{
  "aspectRatio": 3.2,
  "animation": {
    "duration": 1800,
    "easing": "easeInOutQuart"
  },
  "plugins": {
    "title": {
      "display": true,
      "text": "PRESET APPLIED",
      "color": "#ff00ff",
      "font": {
        "size": 18,
        "weight": "bold"
      },
      "padding": {
        "top": 6,
        "bottom": 10
      }
    },
    "legend": {
      "display": true,
      "position": "bottom",
      "labels": {
        "color": "#00ff00",
        "font": {
          "size": 16,
          "weight": "bold"
        }
      }
    },
    "tooltip": {
      "enabled": true,
      "animation": false,
      "backgroundColor": "rgba(0,0,0,0.95)",
      "titleColor": "#ff00ff",
      "bodyColor": "#00ff00",
      "borderColor": "#ff00ff",
      "borderWidth": 2
    }
  },
  "scales": {
    "x": {
      "grid": { "color": "rgba(255,0,255,0.25)" },
      "ticks": { "color": "#ff00ff" }
    },
    "y": {
      "grid": { "color": "rgba(0,255,0,0.18)" },
      "ticks": { "color": "#00ff00" }
    }
  }
}

And paste this into datasetOverrides:

{
  "borderWidth": 6,
  "pointRadius": 7,
  "pointHoverRadius": 10,
  "borderDash": [10, 6]
}

Quick reference: common keys

uiDefaults (simple / UI-aligned)

• hours — default time window (e.g. 24, 48)
• type — chart type: line, bar, scatter
• tension — line smoothing (0 = angular, 0.4 = smooth)
• bg — page background color (hex, e.g. #0f1220)
• line — default accent/line color (hex)
• fill — fill under the line (true/false)
• fillColor — fill color (hex)
• stats — show/hide stat cards (true/false)
• font — CSS font-family string

chartJsOverrides (advanced Chart.js options)

These merge into the Chart.js options object.

• plugins.legend.position — move legend: top, bottom, left, right
• plugins.legend.labels.color — legend text color
• plugins.legend.labels.font.size / weight — legend font styling
• plugins.tooltip.* — tooltip colors, borders, enabled/disabled
• plugins.title.* — add a title (useful as a visual confirmation the preset is applied)
• scales.x.grid.color / scales.y.grid.color — grid line colors
• scales.x.ticks.color / scales.y.ticks.color — tick label colors
• animation.duration / animation.easing — animation tuning
• interaction.mode / interaction.intersect — how hovering/tooltip selection behaves

datasetOverrides (advanced per-series dataset options)

These merge into each dataset (series).

• borderWidth — line thickness
• borderDash — dashed line pattern, e.g. [10, 6]
• pointRadius — point size (0 hides points)
• pointHoverRadius — point size on hover
• stepped — stepped-line behavior (true, "before", "after") for on/off style states

Security / Token (optional)

If you set an access token in plugin preferences, the web UI will include it automatically in generated URLs.