!!This module is NOT developed any longer, please fork it if you want to fix it!!
This an extension for the MagicMirror².
This Module adds graphs to your mirror using a URL JSON source(s).
Three instanses of the module with multiple graphs in traditional MagicMirror colors (click for short video of graphs updaing):
Module two line graphs in traditional MM colors:
Module two line graphs in non traditional MM colors:
Module two filled graphs and a regular line graph in non traditional MM colors:
Another preview with three instanses of the module in non traditional MagicMirror colors (click for short video of graphs updaing):
The same preview in traditional MagicMirror colors (click for short video of graphs updaing):
In your terminal, go to your MagicMirror's Module folder:
cd ~/MagicMirror/modules
Clone this repository:
git clone https://github.com/Snille/MMM-Chart.git
Run npm install:
cd MMM-Chart
npm install
See some examples below.
There are ALOT of configuration options for this module. See below.
OBS: You have to set the width of the graph (with your graph name) in the custom.css file, otherwise you will not see anything!
Like so:
.my-chart {
width: 355px;
}Here are two examples using JSON tables with two graphs each. A JSON table like this is used: [["2017-04-21 15:58:00",8.3,95.5],["2017-04-21 14:55:00",9.3,90.5],["2017-04-21 12:56:00",10.7,87.7],["2017-04-21 11:53:00",10.5,87.7],["2017-04-21 11:01:00",10.6,88.8]]... I'm pulling this table form a database every minute.
{
module: 'MMM-Chart',
position: 'middle_center',
header: 'Inside temprature over 24 hours',
config: {
name: "inside",
url: "http://10.0.0.20/housedata/index2.php?id=3,5&max=24&sort=desc",
xaxisLabelTicks: true,
maintainAspectRatio: false,
graphLabel0: "Inside Temp C",
graphLineColor0: "rgba(200, 200, 200, 1)",
graphTickColor0: "rgba(200, 200, 200, 0.8)",
graphFillColor0: "rgba(200, 200, 200, 0.4)",
graphLabel1: "Inside Humid %",
graphLineColor1: "rgba(100, 100, 100, 1)",
graphTickColor1: "rgba(100, 100, 100, 0.8)",
graphFillColor1: "rgba(100, 100, 100, 0.4)",
xaxisTimeUnit: "hour",
xaxisTimeFormatLabels: "HH:mm",
}
},
{
module: 'MMM-Chart',
position: 'middle_center',
header: 'Outside temprature over 24 hours',
config: {
name: "outside",
url: "http://10.0.0.20/housedata/index2.php?id=9,10&max=24&sort=desc",
graphStyle: "line",
xaxisLabelTicks: true,
maintainAspectRatio: false,
graphLabel0: "Out Temp C",
graphLineColor0: "rgba(200, 200, 200, 1)",
graphTickColor0: "rgba(200, 200, 200, 0.8)",
graphFillColor0: "rgba(200, 200, 200, 0.4)",
graphLabel1: "Out Humid %",
graphLineColor1: "rgba(100, 100, 100, 1)",
graphTickColor1: "rgba(100, 100, 100, 0.8)",
graphFillColor1: "rgba(100, 100, 100, 0.4)",
xaxisTimeUnit: "hour",
xaxisTimeFormatLabels: "HH:mm",
}
},Here is an example using a JSON source with three graph lines for realtime graphs. The JSON data looks like this: [["2017-04-21 15:58:00",48.3,95.5,31]] It's refreshed every other second from the firewall.
{
module: 'MMM-Chart',
position: 'middle_center',
header: 'Traffic on Firewall WAN Interface Last minute',
config: {
name: "firewall",
url: "http://10.0.0.20/housedata/firewall.php?interface=wan&in=1&out=1&delay=1",
graphStyle: "line",
additiveGraph: true,
updateInterval: 2000,
xaxisLabelTicks: false,
xaxisTimeUnit: "second",
graphPoints: 30,
graphLabel0: "In kbps",
graphFill0: true,
graphTicksZero0: true,
graphLineColor0: "rgba(200, 200, 200, 1)",
graphTickColor0: "rgba(200, 200, 200, 0.8)",
graphFillColor0: "rgba(200, 200, 200, 0.4)",
graphLabel1: "Out kbps",
graphFill1: true,
graphTicksZero1: true,
graphLineColor1: "rgba(100, 100, 100, 1)",
graphTickColor1: "rgba(100, 100, 100, 0.8)",
graphFillColor1: "rgba(100, 100, 100, 0.4)",
graphLabel2: "Delay ms",
graphLineColor2: "rgba(80, 80, 80, 1)",
graphTickColor2: "rgba(80, 80, 80, 0.8)",
graphFillColor2: "rgba(80, 80, 80, 0.4)",
}
},And to set the size, add in your custom.css file for the above graphs.
.inside {
width: 1060px;
height: 180px;
}
.outside {
width: 1060px;
height: 180px;
}
.firewall {
width: 355px;
}| Option | Description |
|---|---|
url |
Required The URL to the graph JSON data source. You HAVE to set this! Default value: none |
name |
Graph CSS class ID (name) Needs to be uniqe if you want to be able to set different sizes / module instance. Default value: my-chart |
maintainAspectRatio |
Maintain aspect ratio or not. If set to false you have to provide both width and height in the custome.css (otherwise only width). Default value: true |
updateInterval |
How long in millisecs between updates. Default value: 60000 (one minute) |
fadeSpeed |
Animation speed. Default value: 1000 |
graphStyle |
Type of graph. Warning, I have only really tested with "line" and "bar" graphs! For mor information checkout: Chartjs.org Default value: line |
xaxisTimeUnit |
X Axis time unit the graphs should be ploted in. Default value: hour |
xaxisTimeFormatLabels |
Format for the unit above. Checkout momentjs.com for more information. Default value: H |
xaxisType |
Available: "category", "linear", "logarithmic", "time", "radialLinear" (you have to use one that works with your data). Chartjs.org for more information. Default value: time |
xaxisLabelTicks |
Display X-Axis ticks. Default value: true |
xaxisLabelsPosition |
Position of the horizontal scale labels (top, left, bottom and right). Default value: bottom |
additiveGraph |
Add to the graph continuously. Set to true if you want a "real time" updateing graph. Your JSON source should look something like this: [["2017-04-21 15:58:00",48.3,95.5,31]] Default value: false |
graphPoints |
Max number of graph data points. If you use a "real time" graph, you should define how many points you want to see in the graph. If you update once every 5 second and you want 5 minutes of data to be shown it's 60. (60 secs * 5 minutes / 5 secs) :) Default value: 10000 |
showGraphLabels |
Show information lables. Default value: true |
showGraphLabelsPosition |
Position of information lables (top, left, bottom and right). Default value: top |
boxFontColorBox before text. R G B Weight.Default value: rgba(153, 153, 153, 0.6) |
|
boxWidth |
Width of the box (before the label). Default value: 2 |
xaxisColor |
Axis color. R G B Weight. Default value: rgba(255, 255, 255, 0.1) |
lineTension |
Default line bezier curve tension (recommended 0 - 0.4). Set to 0 for no bezier curves. Default value: 0.2 |
tooltipEnabeld |
Tooltips enebeld/disabeld (displays if hoovering over tha graph points). Default value: true |
tooltipBackgroundColor |
Tooltip background. R G B Weight. Default value: rgba(0, 0, 0, 0.8) |
tooltipBodyFontColor |
Tooltip body font color. R G B Weight. Default value: rgba(255, 255, 255, 1) |
tooltipTitleFontColor |
Tooltip title font color. R G B Weight. Default value: rgba(255, 255, 255, 1) |
tooltipDisplayColorsBoxes |
Display color boxes infront of the tooltip text. Default value: true |
Default in the config I have "pre defined" 4 "Dummy Graph lines". If you don't specify antthing, that information will be used. However, I recomend you to specify your own "look". :)
The four pre defined graph lines is not a "limit", just examples. You can if you want (re)define more graph lines, just add on to the number behind the option.
All graph lines uses this set of configureation options. It's only the number at the end of each option that changes for the "next" graph line.
| Graph line x | Options description |
|---|---|
graphGridColor0 |
Dummy Graph 1 Grid color. R G B Weight. Default value: rgba(255, 255, 255, 0.1) |
graphTickColor0 |
Dummy Graph 1 Tick color (text on the "sides"). R G B Weight. Default value: rgba(120, 120, 255, 0.8) |
graphLineColor0 |
Dummy Graph 1 Line color. R G B Weight. Default value: rgba(80, 80, 255, 1) |
graphFillColor0 |
Dummy Graph 1 Fill color. R G B Weight. Default value: rgba(80, 80, 255, 0.4) |
graphFill0 |
Fill Graph 1 or not. Default value: false |
graphBorderWidth0 |
Line border width. Default value: 2 |
graphScalePos0 |
Scale position (ticks) "left" or "right". Default value: left |
graphLabelTicks0 |
Display Y-Axis ticks. Default value: true |
graphScaleStepSize0 |
Size of the value steps on the scale (ticks) (0 = Auto). Default value: 0 |
graphTicksZero0 |
Always begin ticks at zero. Default value: false |
graphLabel0 |
Text after the graph example box. Default value: Dummy A |
graphShowScaleLabel0 |
Show vertical side label on the scale (beside the ticks). Default value: false |
graphTextScaleLabel0 |
The text on the vertical label. Default value: Dummy A |
graphstacked0 |
Stack the graphs. Default value: false |
The dummy graph lines has just minor differences in the options, ex. color, where to put the ticks (left or right) and the labels. You have to configure the set of options for each graph line that you want to use for your graph.