energylink/data/dashboards/graph-styles.json

{
  "title": "Graph styles",
  "services": {
    "filter": {
      "list": [],
      "time": {
        "from": "now-15m",
        "to": "now"
      }
    }
  },
  "rows": [
    {
      "title": "Simple graph",
      "height": "250px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "short",
            "short"
          ],
          "grid": {
            "max": null,
            "min": 0,
            "threshold1": null,
            "threshold2": null,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": true,
          "fill": 0,
          "linewidth": 1,
          "points": false,
          "pointradius": 5,
          "bars": false,
          "stack": false,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": false,
            "max": false,
            "current": false,
            "total": false,
            "avg": false
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "connected",
          "steppedLine": false,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "aliasByNode(scaleToSeconds(apps.backend.*.counters.requests.count,1),2)"
            }
          ],
          "aliasColors": {
            "web_server_04": "#E24D42",
            "web_server_03": "#508642",
            "web_server_02": "#EAB839",
            "web_server_01": "#EF843C"
          },
          "aliasYAxis": {},
          "title": "Simple graph",
          "datasource": null,
          "renderer": "flot",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Simple graph\n- Click on the title and select edit to open edit mode\n- The display styles tab allows you change line width, fill, stacking, and more\n- You can change a series color by clicking the colored line in the legend ",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    },
    {
      "title": "Stacked Graph",
      "height": "250px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "short",
            "short"
          ],
          "grid": {
            "max": null,
            "min": 0,
            "threshold1": null,
            "threshold2": null,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": true,
          "fill": 2,
          "linewidth": 2,
          "points": false,
          "pointradius": 5,
          "bars": false,
          "stack": true,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": false,
            "max": false,
            "current": false,
            "total": false,
            "avg": true
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "connected",
          "steppedLine": false,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "aliasByNode(scaleToSeconds(apps.fakesite.*.counters.requests.count,1),2)"
            }
          ],
          "aliasColors": {
            "web_server_04": "#E24D42",
            "web_server_03": "#EF843C",
            "web_server_02": "#EAB839",
            "web_server_01": "#F2C96D"
          },
          "aliasYAxis": {},
          "title": "Stacked lines",
          "datasource": null,
          "renderer": "flot",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Stacked graph\n- This graph shows stacked series, with area fill and 2px line width\n- We have also added legend values. These can be enabled in the Grid & Axes tab in edit mode. \n- Legend values can be Min, Max, Total, Current and Average",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    },
    {
      "title": "Staircase line",
      "height": "250px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "ms",
            "short"
          ],
          "grid": {
            "max": null,
            "min": 0,
            "threshold1": null,
            "threshold2": null,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": true,
          "fill": 1,
          "linewidth": 2,
          "points": false,
          "pointradius": 5,
          "bars": false,
          "stack": true,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": false,
            "max": false,
            "current": false,
            "total": false,
            "avg": true
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "connected",
          "steppedLine": true,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "aliasByNode(statsd.fakesite.timers.ads_timer.upper_90,4)"
            },
            {
              "target": "aliasByNode(statsd.fakesite.timers.ads_timer.upper_90,4)"
            }
          ],
          "aliasColors": {
            "upper_75": "#EAB839",
            "upper_50": "#7EB26D",
            "upper_25": "#BA43A9"
          },
          "aliasYAxis": {},
          "title": "Staircase line",
          "datasource": null,
          "renderer": "flot",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Staircase & Y-Axis format\n- In display styles tab you can switch to staircase line \n- In Axes & Grid tab you can change to different Y units & formats.\n",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    },
    {
      "title": "Right Y-Axis",
      "height": "300px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "bytes",
            "none"
          ],
          "grid": {
            "max": null,
            "min": 0,
            "threshold1": null,
            "threshold2": null,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": true,
          "fill": 0,
          "linewidth": 2,
          "points": false,
          "pointradius": 5,
          "bars": false,
          "stack": false,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": true,
            "max": false,
            "current": true,
            "total": false,
            "avg": false
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "connected",
          "steppedLine": false,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "alias(scale(scaleToSeconds(apps.fakesite.web_server_01.counters.requests.count,1),1000000),'memory')"
            },
            {
              "target": "alias(scaleToSeconds(apps.fakesite.web_server_02.counters.requests.count,1),'cpu')"
            }
          ],
          "aliasColors": {
            "cpu": "#E24D42"
          },
          "aliasYAxis": {
            "cpu": 2
          },
          "title": "Memory / CPU",
          "datasource": null,
          "renderer": "flot",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Second Y-Axis\n- Click on the series legend color line to open the color selector\n- In the series color selector popup you can also move the series to the Right-Y axis\n- Multiple Y-Axis are great for showing to related series that have different magnitudes ",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    },
    {
      "title": "test",
      "height": "250px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "none",
            "short"
          ],
          "grid": {
            "max": null,
            "min": 0,
            "threshold1": null,
            "threshold2": null,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": true,
          "fill": 1,
          "linewidth": 2,
          "points": false,
          "pointradius": 5,
          "bars": false,
          "stack": false,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": false,
            "max": false,
            "current": false,
            "total": false,
            "avg": true
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "null",
          "steppedLine": false,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "aliasByNode(apps.fakesite.web_server_01.counters.request_status.code_404.count,4)"
            }
          ],
          "aliasColors": {
            "upper_75": "#EAB839",
            "upper_50": "#7EB26D",
            "upper_25": "#BA43A9"
          },
          "aliasYAxis": {},
          "title": "Null point mode",
          "datasource": null,
          "renderer": "flot",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Null point mode\n- This option under Display styles tab controls how null values are handled\n- The graph to left shows how the default \"null\" looks. \n- __null__   null values are left null and this leaves empty spaces in the graph\n- __null as zero__   null values are drawn as zero values\n- __connected__   null values are ignored and the line jumps directly to the next value.",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    },
    {
      "title": "Thresholds",
      "height": "250px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "none",
            "short"
          ],
          "grid": {
            "max": 700,
            "min": 0,
            "threshold1": 400,
            "threshold2": 600,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": true,
          "fill": 0,
          "linewidth": 2,
          "points": false,
          "pointradius": 5,
          "bars": false,
          "stack": false,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": false,
            "max": false,
            "current": false,
            "total": true,
            "avg": false
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "connected",
          "steppedLine": false,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "aliasByNode(apps.fakesite.web_server_01.counters.requests.count,4)"
            }
          ],
          "aliasColors": {
            "upper_75": "#EAB839",
            "upper_50": "#7EB26D",
            "upper_25": "#BA43A9",
            "requests": "#6ED0E0"
          },
          "aliasYAxis": {},
          "title": "Thresholds",
          "datasource": null,
          "renderer": "flot",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Thresholds\n- You can define thresholds in the Grid & Axes tab in edit mode \n- You can define one or two thresholds, color is also changeable. \n- You can have lower bound thresholds as well. ",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    },
    {
      "title": "Bars",
      "height": "250px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "ms",
            "short"
          ],
          "grid": {
            "max": null,
            "min": 0,
            "threshold1": null,
            "threshold2": null,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": false,
          "fill": 1,
          "linewidth": 2,
          "points": false,
          "pointradius": 5,
          "bars": true,
          "stack": true,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": false,
            "max": false,
            "current": false,
            "total": false,
            "avg": true
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "connected",
          "steppedLine": true,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "aliasByNode(statsd.fakesite.timers.ads_timer.*,4)"
            }
          ],
          "aliasColors": {
            "upper_75": "#EAB839",
            "upper_50": "#7EB26D",
            "upper_25": "#BA43A9"
          },
          "aliasYAxis": {},
          "title": "Bars",
          "datasource": null,
          "renderer": "flot",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Bars\n- In display styles tab you can switch from line to bars\n- The width of the bar is relative to the pixel width between two values\n",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    },
    {
      "title": "Graphite PNG",
      "height": "250px",
      "editable": true,
      "collapse": false,
      "collapsable": true,
      "panels": [
        {
          "span": 6,
          "editable": true,
          "type": "graphite",
          "x-axis": true,
          "y-axis": true,
          "scale": 1,
          "y_formats": [
            "ms",
            "short"
          ],
          "grid": {
            "max": null,
            "min": 0,
            "threshold1": null,
            "threshold2": null,
            "threshold1Color": "rgba(216, 200, 27, 0.27)",
            "threshold2Color": "rgba(234, 112, 112, 0.22)"
          },
          "resolution": 100,
          "lines": false,
          "fill": 1,
          "linewidth": 2,
          "points": false,
          "pointradius": 2,
          "bars": false,
          "stack": true,
          "spyable": true,
          "options": false,
          "legend": {
            "show": true,
            "values": true,
            "min": false,
            "max": false,
            "current": false,
            "total": false,
            "avg": true
          },
          "interactive": true,
          "legend_counts": true,
          "timezone": "browser",
          "percentage": false,
          "zerofill": true,
          "nullPointMode": "connected",
          "steppedLine": false,
          "tooltip": {
            "value_type": "cumulative",
            "query_as_alias": true
          },
          "targets": [
            {
              "target": "aliasByNode(apps.backend.*.counters.requests.count,2)"
            }
          ],
          "aliasColors": {
            "upper_75": "#EAB839",
            "upper_50": "#7EB26D",
            "upper_25": "#BA43A9"
          },
          "aliasYAxis": {},
          "title": "Graphite PNG",
          "datasource": null,
          "renderer": "png",
          "annotate": {
            "enable": false
          }
        },
        {
          "error": false,
          "span": 6,
          "editable": true,
          "type": "text",
          "loadingEditor": false,
          "mode": "markdown",
          "content": "#### Graphite PNG support\n- You can switch from client side rendering to graphite's server side PNG rendering\n- You cannot click and drag to zoom in in this render mode.\n",
          "style": {},
          "title": "Description"
        }
      ],
      "notice": false
    }
  ],
  "editable": true,
  "failover": false,
  "panel_hints": true,
  "style": "dark",
  "pulldowns": [
    {
      "type": "filtering",
      "collapse": false,
      "notice": false,
      "enable": false
    },
    {
      "type": "annotations",
      "enable": false
    }
  ],
  "nav": [
    {
      "type": "timepicker",
      "collapse": false,
      "notice": false,
      "enable": true,
      "status": "Stable",
      "time_options": [
        "5m",
        "15m",
        "1h",
        "6h",
        "12h",
        "24h",
        "2d",
        "7d",
        "30d"
      ],
      "refresh_intervals": [
        "5s",
        "10s",
        "30s",
        "1m",
        "5m",
        "15m",
        "30m",
        "1h",
        "2h",
        "1d"
      ],
      "now": true
    }
  ],
  "loader": {
    "save_gist": false,
    "save_elasticsearch": true,
    "save_local": true,
    "save_default": true,
    "save_temp": true,
    "save_temp_ttl_enable": true,
    "save_temp_ttl": "30d",
    "load_gist": false,
    "load_elasticsearch": true,
    "load_elasticsearch_size": 20,
    "load_local": false,
    "hide": false
  },
  "refresh": false,
  "tags": [
    "showcase",
    "annotations"
  ],
  "timezone": "browser"
}