grafana/data/dashboards/graph-styles.json
2014-08-08 12:35:15 +02:00

796 lines
21 KiB
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"
}