When loading a particular dashboard on a mobile phone, this happens:
-
What Grafana version and what operating system are you using?
Cloud, latest version -
What are you trying to achieve?
View dashboards on a mobile phone -
How are you trying to achieve it?
Navigate to dashboard URL using Chrome on a Samsung Galaxy S9 -
What happened?
It constantly resizes as per attached GIF. -
What did you expect to happen?
It resizes once to adapt to the size of the mobile phone screen -
Can you copy/paste the configuration(s) that you are having problems with?
See end of this post -
Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
No -
Did you follow any online instructions? If so, what is the URL?
Couldn’t find any
Configuration:
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"gnetId": null,
"graphTooltip": 0,
"id": 13,
"links": [
{
"asDropdown": true,
"icon": "external link",
"tags": [ ],
"title": "Dashboards",
"type": "dashboards"
}
],
"liveNow": false,
"panels": [
{
"datasource": null,
"description": "",
"gridPos": {
"h": 4,
"w": 5,
"x": 0,
"y": 0
},
"id": 9,
"options": {
"content": "# Demo Plant - Production Statistics\nProvides batch statistics and totals\nover different shifts and product types\n ",
"mode": "markdown"
},
"pluginVersion": "8.2.1-37459",
"targets": [
{
"columns": [],
"csv_options": {
"columns": "",
"comment": "",
"delimiter": ",",
"relax_column_count": false,
"skip_empty_lines": false,
"skip_lines_with_error": false
},
"data": "",
"filters": [],
"format": "table",
"global_query_id": "",
"refId": "A",
"root_selector": "",
"source": "url",
"type": "json",
"url": "",
"url_options": {
"data": "",
"method": "GET"
}
}
],
"type": "text"
},
{
"datasource": "-- Dashboard --",
"fieldConfig": {
"defaults": {
"color": {
"fixedColor": "#0022ff61",
"mode": "palette-classic",
"seriesBy": "last"
},
"custom": {
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
}
},
"mappings": [],
"min": 0,
"unit": "locale"
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 4,
"x": 5,
"y": 0
},
"id": 17,
"options": {
"displayLabels": [
"percent",
"name",
"value"
],
"legend": {
"displayMode": "hidden",
"placement": "bottom",
"values": []
},
"pieType": "pie",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "/^Products \\(sum\\)$/",
"values": true
},
"tooltip": {
"mode": "single"
}
},
"pluginVersion": "8.1.7",
"targets": [
{
"columns": [],
"csv_options": {
"columns": "",
"comment": "",
"delimiter": ",",
"relax_column_count": false,
"skip_empty_lines": false,
"skip_lines_with_error": false
},
"data": "",
"filters": [],
"format": "table",
"global_query_id": "",
"panelId": 14,
"refId": "A",
"root_selector": "",
"source": "url",
"type": "json",
"url": "",
"url_options": {
"data": "",
"method": "GET"
}
}
],
"title": "Shift Totals",
"transformations": [
{
"id": "groupBy",
"options": {
"fields": {
"Day": {
"aggregations": [],
"operation": null
},
"Hour": {
"aggregations": [],
"operation": null
},
"Products": {
"aggregations": [
"sum"
],
"operation": "aggregate"
},
"Shift": {
"aggregations": [],
"operation": "groupby"
},
"Time": {
"aggregations": [],
"operation": null
}
}
}
},
{
"id": "organize",
"options": {}
}
],
"type": "piechart"
},
{
"datasource": "-- Dashboard --",
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"align": "auto",
"displayMode": "auto"
},
"mappings": [],
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "red",
"value": null
},
{
"color": "orange",
"value": 3000
},
{
"color": "yellow",
"value": 6000
},
{
"color": "green",
"value": 10000
}
]
}
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "Batch Size (mean)"
},
"properties": [
{
"id": "custom.displayMode",
"value": "gradient-gauge"
}
]
}
]
},
"gridPos": {
"h": 8,
"w": 5,
"x": 9,
"y": 0
},
"id": 20,
"options": {
"showHeader": true
},
"pluginVersion": "8.2.1-37459",
"targets": [
{
"columns": [],
"csv_options": {
"columns": "",
"comment": "",
"delimiter": ",",
"relax_column_count": false,
"skip_empty_lines": false,
"skip_lines_with_error": false
},
"data": "",
"filters": [],
"format": "table",
"global_query_id": "",
"panelId": 5,
"refId": "A",
"root_selector": "",
"source": "url",
"type": "json",
"url": "",
"url_options": {
"data": "",
"method": "GET"
}
}
],
"title": "Batch Size by Product",
"transformations": [
{
"id": "groupBy",
"options": {
"fields": {
"Batch Size": {
"aggregations": [
"mean"
],
"operation": "aggregate"
},
"Product Name": {
"aggregations": [],
"operation": "groupby"
}
}
}
}
],
"type": "table"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"align": "auto",
"displayMode": "auto",
"filterable": true
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
}
]
}
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "Product Type"
},
"properties": [
{
"id": "mappings",
"value": [
{
"options": {
"1": {
"color": "yellow",
"index": 0,
"text": "Macaroni Cheese"
},
"2": {
"color": "green",
"index": 1,
"text": "Apple Crumble"
},
"3": {
"color": "red",
"index": 2,
"text": "Beef Stroganoff"
},
"4": {
"color": "orange",
"index": 3,
"text": "Butter Chicken"
},
"5": {
"color": "purple",
"index": 4,
"text": "Blackberry Pie"
}
},
"type": "value"
}
]
},
{
"id": "custom.displayMode",
"value": "color-background"
}
]
},
{
"matcher": {
"id": "byName",
"options": "Batch Size"
},
"properties": [
{
"id": "custom.displayMode",
"value": "gradient-gauge"
},
{
"id": "thresholds",
"value": {
"mode": "absolute",
"steps": [
{
"color": "dark-blue",
"value": null
},
{
"color": "super-light-blue",
"value": 0
}
]
}
},
{
"id": "max",
"value": 15000
}
]
},
{
"matcher": {
"id": "byName",
"options": "Duration"
},
"properties": [
{
"id": "unit",
"value": "ms"
}
]
}
]
},
"gridPos": {
"h": 13,
"w": 10,
"x": 14,
"y": 0
},
"id": 5,
"options": {
"showHeader": true
},
"pluginVersion": "8.2.1-37459",
"targets": [
{
"columns": [
{
"selector": "StartTime",
"text": "Start Time",
"type": "timestamp"
},
{
"selector": "EndTime",
"text": "End Time",
"type": "timestamp"
},
{
"selector": "Size",
"text": "Batch Size",
"type": "number"
},
{
"selector": "ProductType",
"text": "Product Type",
"type": "number"
},
{
"selector": "ProductTypeStr",
"text": "Product Name",
"type": "string"
}
],
"csv_options": {
"columns": "",
"comment": "",
"delimiter": ",",
"relax_column_count": false,
"skip_empty_lines": false,
"skip_lines_with_error": false
},
"data": "",
"filters": [],
"format": "table",
"global_query_id": "",
"refId": "A",
"root_selector": "",
"source": "url",
"type": "json",
"url": "https://cncdsiot-visualflowcreatorhttp.eu1.mindsphere.io/public/cncdsiot/cncnz/demoplant1?key=[REMOVED]&from=${__from}&to=${__to}&site=plant1&dashboard=production&panel=batchsummary",
"url_options": {
"data": "",
"method": "GET"
}
}
],
"title": "Completed Batches",
"transformations": [
{
"id": "calculateField",
"options": {
"alias": "Duration",
"binary": {
"left": "End Time",
"operator": "-",
"reducer": "sum",
"right": "Start Time"
},
"mode": "binary",
"reduce": {
"reducer": "sum"
}
}
},
{
"id": "organize",
"options": {
"excludeByName": {
"Product Name": true
},
"indexByName": {},
"renameByName": {}
}
}
],
"type": "table"
},
{
"datasource": "-- Dashboard --",
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
}
]
},
"unit": "locale"
},
"overrides": []
},
"gridPos": {
"h": 4,
"w": 5,
"x": 0,
"y": 4
},
"id": 16,
"options": {
"colorMode": "background",
"graphMode": "none",
"justifyMode": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
"sum"
],
"fields": "/^Products$/",
"values": false
},
"text": {},
"textMode": "auto"
},
"pluginVersion": "8.2.1-37459",
"targets": [
{
"columns": [],
"csv_options": {
"columns": "",
"comment": "",
"delimiter": ",",
"relax_column_count": false,
"skip_empty_lines": false,
"skip_lines_with_error": false
},
"data": "",
"filters": [],
"format": "table",
"global_query_id": "",
"panelId": 14,
"refId": "A",
"root_selector": "",
"source": "url",
"type": "json",
"url": "",
"url_options": {
"data": "",
"method": "GET"
}
}
],
"title": "Total Products",
"type": "stat"
},
{
"datasource": "-- Dashboard --",
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"fixedColor": "purple",
"mode": "fixed",
"seriesBy": "last"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "purple",
"value": null
}
]
},
"unit": "short"
},
"overrides": []
},
"gridPos": {
"h": 5,
"w": 14,
"x": 0,
"y": 8
},
"id": 18,
"options": {
"displayMode": "basic",
"orientation": "auto",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "/^\\$__cell_0$/",
"values": true
},
"showUnfilled": false,
"text": {}
},
"pluginVersion": "8.2.1-37459",
"targets": [
{
"columns": [],
"csv_options": {
"columns": "",
"comment": "",
"delimiter": ",",
"relax_column_count": false,
"skip_empty_lines": false,
"skip_lines_with_error": false
},
"data": "",
"filters": [],
"format": "table",
"global_query_id": "",
"panelId": 14,
"refId": "A",
"root_selector": "",
"source": "url",
"type": "json",
"url": "",
"url_options": {
"data": "",
"method": "GET"
}
}
],
"title": "Hourly Totals",
"transformations": [
{
"id": "groupBy",
"options": {
"fields": {
"Day": {
"aggregations": [],
"operation": null
},
"Hour": {
"aggregations": [],
"operation": "groupby"
},
"Products": {
"aggregations": [
"sum"
],
"operation": "aggregate"
},
"Shift": {
"aggregations": [],
"operation": null
},
"Time": {
"aggregations": [
"lastNotNull"
],
"operation": null
}
}
}
},
{
"id": "organize",
"options": {
"excludeByName": {},
"indexByName": {},
"renameByName": {
"Hour": "",
"Products (sum)": "$__cell_0"
}
}
}
],
"type": "bargauge"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"fixedColor": "#0022ff61",
"mode": "fixed",
"seriesBy": "last"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 100,
"gradientMode": "opacity",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineStyle": {
"fill": "solid"
},
"lineWidth": 10,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "purple",
"value": null
}
]
},
"unit": "locale"
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 14,
"x": 0,
"y": 13
},
"id": 14,
"options": {
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltip": {
"mode": "single"
}
},
"pluginVersion": "8.1.7",
"targets": [
{
"columns": [
{
"selector": "Day",
"text": "Day",
"type": "string"
},
{
"selector": "Shift",
"text": "Shift",
"type": "string"
},
{
"selector": "hour",
"text": "Hour",
"type": "number"
},
{
"selector": "Value",
"text": "Products",
"type": "number"
},
{
"selector": "_time",
"text": "Time",
"type": "timestamp"
}
],
"csv_options": {
"columns": "",
"comment": "",
"delimiter": ",",
"relax_column_count": false,
"skip_empty_lines": false,
"skip_lines_with_error": false
},
"data": "",
"filters": [],
"format": "table",
"global_query_id": "",
"refId": "A",
"root_selector": "",
"source": "url",
"type": "json",
"url": "https://cncdsiot-visualflowcreatorhttp.eu1.mindsphere.io/public/cncdsiot/cncnz/demoplant1?key=[REMOVED]&from=${__from}&to=${__to}&site=plant1&dashboard=production&panel=totals_per_hour",
"url_options": {
"data": "",
"method": "GET"
}
}
],
"title": "Daily Totals",
"transformations": [
{
"id": "groupBy",
"options": {
"fields": {
"Day": {
"aggregations": [],
"operation": "groupby"
},
"Hour": {
"aggregations": [],
"operation": null
},
"Products": {
"aggregations": [
"sum"
],
"operation": "aggregate"
},
"Shift": {
"aggregations": [],
"operation": null
},
"Time": {
"aggregations": [
"lastNotNull"
],
"operation": "aggregate"
}
}
}
}
],
"type": "timeseries"
},
{
"datasource": "-- Dashboard --",
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"fixedColor": "orange",
"mode": "fixed"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"axisSoftMin": 0,
"fillOpacity": 100,
"gradientMode": "hue",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineWidth": 1
},
"mappings": [],
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
}
]
},
"unit": "locale"
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 10,
"x": 14,
"y": 13
},
"id": 12,
"options": {
"barWidth": 0.97,
"groupWidth": 0.7,
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"orientation": "auto",
"showValue": "auto",
"stacking": "none",
"text": {},
"tooltip": {
"mode": "single"
}
},
"pluginVersion": "8.1.7",
"targets": [
{
"panelId": 5,
"refId": "A"
}
],
"title": "Product Totals",
"transformations": [
{
"id": "groupBy",
"options": {
"fields": {
"Batch Count": {
"aggregations": [
"sum"
],
"operation": "aggregate"
},
"Batch Size": {
"aggregations": [
"sum"
],
"operation": "aggregate"
},
"Product Name": {
"aggregations": [],
"operation": "groupby"
},
"Product Type": {
"aggregations": [],
"operation": null
}
}
}
}
],
"type": "barchart"
}
],
"refresh": false,
"schemaVersion": 31,
"style": "dark",
"tags": [],
"templating": {
"list": []
},
"time": {
"from": "now-30d",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "Microwave Meal Plant - Production",
"uid": "Ex-6q2V7k",
"version": 24
}
