grandrew / Plotti.co
Programming Languages
layout: default
{::options parse_block_html="true" /}
Live plotting that just works
and helps you fight with machines.
Plottico is a microservice that generates live-streaming SVG-image plots to be embedded as an <object> tag.
Now introducing Plottico Tracker website-to-website live plotting browser extension
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.svg" type="image/svg+xml"/>
where YOUR_HASH.svg is the hash you chose for your stream, .svg is optional. We will use it in the following example to feed the data.
here it is:
You may also use a <img src="http://plotti.co/YOUR_HASH.svg"/> but in this case you won't get live updates, just a pre-cached plot with latest data.
Feeding the data to the image programmatically
Just a simple GET to the same hash with an argument d:
http://plotti.co/YOUR_HASH.svg?d=<value>,<value>,...
You can try it by clicking here:
http://plotti.co/YOUR_HASH.svg?d=,,2
Feeding the data from external website
Use Plottico Tracker Pro to send updates from websites to your favorite mission control dashboard using Chrome Web Browser. No coding required.
Your browser does not support the video tag.Get your data back
You can get latest submitted data by doing a GET to https://plotti.co/YOUR_HASH/last. Alternatively, you can use EventSource API directly to get the data in real-time, as it arrives.
Here are bash and python examples. It is extremely simple.
Quick examples
Server CPU load on plottico
#!/bin/sh
while true; do
wget -O /dev/null -q http://plotti.co/lock/plottycocpu?d=`mpstat -P ALL 1 1 | awk '/Average:/ && $2 ~ /[0-9]/ {print $3}' | sort -r -g | xargs | sed s/\ /,/g`\%cpuload
done
Bitcoin price
Fed using Plottico Tracker Pro from preev.com with 5-minute update interval.
More examples
More examples like linux network load, linux open sockets and many other integrations like python feed - can be found in the plottico copy-paste snippets portal.
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.8,mbps" -O /dev/null
the format of the request is
?d=[value_blue],[value_red],...
Where each [value_X] is a separate line drawn on the plot. You may optionally append units as short string to the list or 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="https://plotti.co/YOUR_HASH/WIDTHxHEIGHT.svg" type="image/svg+xml"></object>
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 relevant <img> tags to <object>. You can also embed as iframe with the same result.
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.
Alternatively, plottico supports &k=KEY request parameter to lock to specified key. Use as wget -q -O /dev/null "http://plotti.co/YOUR_HASH?d=1,2,3&k=YOUR_KEY".
For all the requests I recommend using encrypted connection using HTTPS.
Limitations
- Your cached data will be deleted after about 1 day of idling (no updates or views)
- The server will drop IP address locks on restart
- There are some known bugs in plottico and in tracker
Terms of service and privacy
The service is provided as-is. However we use our best efforts to make sure the service delivers best possible response times. By using Plottico Tracker Pro you agree to be responsible for any damages to third parties in case of violating their licenses.
There are currenlty no plans to collect any personal information.
These terms are subject to change. Please follow me on twitter to be notified of any planned changes.
Pricing
Plotti.co microservice and Plotti.co Tracker Pro chrome extension are 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.
Donate Bitcoins<script src="https://www.coinbase.com/assets/button.js" type="text/javascript"></script>
Author
Andrew Gryaznov (in/GitHub/Twitter).
You can send any feedback and suggestions to [email protected]
License
AGPLv3 License for the microservice and GPLv3 License for the tracker.
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<script> my_hash=Math.random()*100000000; // document.getElementById("live1").setAttribute("data", "https://plotti.co/"+my_hash+"/plot.svg"); y1=0 y2=0 y3=0 function pushData() { y1+=Math.random()*2-1; y2+=Math.random()*2-1; y3+=Math.random()*2-1; if(y1<0)y1=0; if(y2<0)y2=0; if(y3<0)y3=0; var myImage = new Image(1, 1); myImage.src = "https://plotti.co/"+my_hash+"?d="+y1+"rand,"+y2+","+y3; //console.log(myImage); } function makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 6; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } YH = makeid(); document.getElementById("yhimg").setAttribute("data", "https://plotti.co/"+YH+"/plot.svg"); document.getElementById("yhref").innerHTML="http://plotti.co/"+YH+".svg?d=,,2"; document.getElementById("yhref2").innerHTML="http://plotti.co/"+YH+".svg?d=,,,,,,1.0"; function feed() { var myImage = new Image(1, 1); myImage.src = "https://plotti.co/"+YH+"?d=,,2&h="+makeid(); //console.log(myImage); return false; } function feed2() { var myImage = new Image(1, 1); myImage.src = "https://plotti.co/"+YH+"?d=,,,,,,1.0&h="+makeid(); //console.log(myImage); return false; } $(".s").each(function () { $(this).html( $(this).html().replace("YOUR_HASH", YH) ); }); $(".highlighter-rouge").each(function () { $(this).html( $(this).html().replace("YOUR_HASH", YH) ); }); window.addEventListener("load", function load(event) { window.removeEventListener("load", load, false); setInterval(function() { var limg = document.getElementsByTagName("IMG"); var r = new RegExp("^(http:|https:|)\/\/plotti.co"); for(var il=0; il <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-75121462-1', 'auto'); ga('send', 'pageview'); </script> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>