Live plotting that just works.
Plottico is a microservice that generates live-streaming SVG-image plots to be embedded as an tag of your web page. That simple.
Usage
Including live image in your page
To include a live plot on your webpage, you just need to put in an SVG image:
<object data="http://plotti.co/YOUR_HASH/plot.svg" type="image/svg+xml">
where YOUR_HASH
is the hash you chose for your stream. We will use it in the following example to feed the data.
here it is:
Feeding the data to the image
You can try it by clicking here:
http://plotti.co/YOUR_HASH?d=,,2
Explanation
To feed some data into the stream, you just create a GET
request of the following form:
$ wget "http://plotti.co/YOUR_HASH?d=1.5,3.6,7.8mbps" -O /dev/null
the format of the request is
?d=[value_red],[value_blue],...
Where each [value_X]
is a separate line drawn on the plot. You may optionally append units as short string to any of the data values to show it as “y” axis units or just as a general message.
Choosing size
You can specify image size that you want your SVG to advertise:
<object data="http://plotti.co/YOUR_HASH/WIDTHxHEIGHT.svg" type="image/svg+xml">
where WIDTH
and HEIGHT
are width and height of the image respectively. Using a specified size makes any styling in the embedding document unnessessary.
Choosing color
The microservice supports up to 9 inputs, each can be omitted at any time and each has its own color:
.src0 {
stroke: #5DA5DA; /* (blue) */
}
.src1 {
stroke: #F15854; /* (red) */
}
.src2 {
stroke: #DECF3F; /* (yellow) */
}
.src3 {
stroke: #B276B2; /* (purple) */
}
.src4 {
stroke: #B2912F; /* (brown) */
}
.src5 {
stroke: #F17CB0; /* (pink) */
}
.src6 {
stroke: #60BD68; /* (green) */
}
.src7 {
stroke: #FAA43A; /* (orange) */
}
.src8 {
stroke: #4D4D4D; /* (gray) */
}
for example, to use color green
you only provide the 7th input: http://plotti.co/YOUR_HASH?d=,,,,,,1.0
No OBJECT tag
There are cases where the environment that you use does support images in documents but does not support object
tags. In case you are allowed to add javascript to documents, here is the snippet that will convert all appropriate
tags to :
window.addEventListener("load", function load(event) {
window.removeEventListener("load", load, false);
var limg=document.getElementsByTagName("IMG");
for(var il=0;il<limg.length;il++) {
var s=limg[il].getAttribute("src");
if(s.startsWith("http://plotti.co/")) {
limg[il].outerHTML='<object data="'+s+'" type="image/svg+xml">';
}
}
},false);
Security
Locking the single feeder
If you want to lock a single host IP address as a feeder of the data so that no other IP can send to your hash – you can use the path http://plotti.co/lock/YOUR_HASH?d=1,2,3
. After executing this request the sender will be locked for this hash. The hash locks get dropped eventually, so keep using this address to continue holding the lock.
HTTPS
HTTPS coming soon.
Pricing
Plotti.co microservice is free of charge; but if you like it and want to continue using on a regular basis please consider donating to support development and service uptime.
The recommended donations are
- $0.50 per month to show your interest in continued development and features
- $3 per month if you estimate to have 100 clients watching the stream during the month
- $10 per month if your data update rate exceeds 1 update/second for your 100 clients
- $50 per month to ensure high-volume traffic is handled well by plotti.co
Roadmap
The features on the roadmap include storing some points in advance to be able to serve meaningful up-to-date plots in
tags, https, more interaction, more types of plots (pie,log,hist,gauges), more beauty, etc.
Keep updated with github issues!
Author
Andrew Gryaznov (in/GitHub/Twitter).
You can send any feedback and suggestions to ag@vrayo.com or realgrandrew@gmail.com
License
Original URL: http://feedproxy.google.com/~r/feedsapi/BwPx/~3/DDJbXr0xAQg/