Show HN: Live streaming SVG plot microservice that “just works”

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

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

AGPLv3 License

Original article