Giter VIP home page Giter VIP logo

mmm-chart's Introduction

MMM-Chart

!!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).

Screenshots

Three instanses of the module with multiple graphs in traditional MagicMirror colors (click for short video of graphs updaing):

MMM-Chart 3 Graphs

Module two line graphs in traditional MM colors:

MMM-Chart Line Graphs 1

Module two line graphs in non traditional MM colors:

MMM-Chart Line Graphs 2

Module two filled graphs and a regular line graph in non traditional MM colors:

MMM-Chart Filled Graphs

Another preview with three instanses of the module in non traditional MagicMirror colors (click for short video of graphs updaing):

MMM-Chart 3 smaller Graphs 1

The same preview in traditional MagicMirror colors (click for short video of graphs updaing):

MMM-Chart 3 smaller Graphs 2

Installation

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

Using the module

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;
}

Examples

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;
}

Configuration Options

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.

mmm-chart's People

Contributors

snille avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

vrhax ilem0n vader42 timofrenzel uayebforever dikkedimi luthustech jimphelps danielhabenicht nicholasjon lavve prandleman mikaelwt zharfanw

mmm-chart's Issues

Is it still working?

Hi,

I tried to get it working but failed. Is this project still active and working?

Dont work with more then one lines

Hi,
i have checkout your Modul.
But i can´t user more then 1 one line in a graph.
when i will more, i dont see lines in my chart.

My test data:

[[1585235344,22.1,24],[1585235317,22.2,24],[1585235284,22.2,24],[1585235258,22.2,24],[1585235225,22.2,24],[1585235196,22.1,24],[1585235137,22.1,24]]

only one chances i have make in your code, because i get now datetime, i get timestamps.
so, i convert the timestamps into dateTime

for(var i=0; i < payload.length;i++ ){ date = new Date(payload[i][0] * 1000); payload[i][0] = date.getFullYear() + '-' + (("0" + (date.getMonth() + 1)).slice(-2)) + '-' + (("0" + date.getDate()).slice(-2)) + ' ' + (("0" + date.getHours()).slice(-2)) + ':' + (("0" + date.getMinutes()).slice(-2)) + ':' + (("0" + date.getSeconds()).slice(-2)); }

it works when i use only

[[1585235344,22.1],[1585235317,22.2],[1585235284,22.2],[1585235258,22.2],[1585235225,22.2],[1585235196,22.1],[1585235137,22.1]]

my config:

{ module: 'MMM-Chart', //position: 'middle_center', position: 'lower_third', header: 'Wohnzimmer', config: { name: "inside", url: "http://192.168.1.23:3001/diagramm?channel=1", xaxisLabelTicks: true, maintainAspectRatio: false, graphLabel0: "Temperatur", graphBorderWidth0: 1, graphLineColor0: "rgba(204, 0, 0, 1)", graphTickColor0: "rgba(204, 0, 0, 0.8)", graphFillColor0: "rgba(204, 0, 0, 0.4)", graphFill0: true, graphLabel1: "Luftfeuchte %", graphLineColor1: "rgba(200, 100, 100, 1)", graphTickColor1: "rgba(200, 100, 100, 0.8)", graphFillColor1: "rgba(200, 100, 100, 0.4)", graphFill1: true, xaxisTimeUnit: "day", xaxisTimeFormatLabels: "DD:MM:YYYY", graphPoints: 1000 } },

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.