DEV Community

Tib
Tib

Posted on • Edited on

Simple live chart using Mojolicious

#perl #mojolicious #highcharts #javascript

Live

In this blog post, I will show how easy it is to write a live chart with Perl, Mojolicious::Lite and some javascript (mainly Highcharts).

Mojolicious

The code

The Mojolicious::Lite very small webapp. With routes and get/set urls:

use Mojolicious::Lite;

my $datfile = "/tmp/values.txt";

# Answer to /
get '/' => sub {
    my $c = shift;
    $c->render(template => 'live', format => 'html');
};

# Set value from GET call
get '/setvalue/:value' => sub { 
    my $c   = shift;
    my $value = $c->param('value');
    open(my $fh, '>', $datfile) or die "Could not open $datfile $!";
    print $fh "$value\n";
    close $fh;
    $c->render(text => "You set the value to $value");
};

# Get value from GET call
get '/getvalue' => sub { 
    my $c   = shift;
    open(my $fh, '<:encoding(UTF-8)', $datfile) or die "Could not open '$datfile' $!";
    my $value = <$fh>;
    chomp $value;
    $c->render(text => "$value");
};
Enter fullscreen mode Exit fullscreen mode

Right below, I start the application:

app->start;
Enter fullscreen mode Exit fullscreen mode

And open the __DATA__ section (where falls the template/view in Mojolicious::Lite applications):

__DATA__
Enter fullscreen mode Exit fullscreen mode

And the view, with jquery and highcharts to make it "live".... Yes it is a bit a big blob since there is all configs for the chart, but it's not that complicated !

The view is a big chunk of javascript and an almost empty piece of html (just one div to make room to chart):

@@ live.html.ep
<html lang="us">
<head>
  <meta charset="utf-8">
  <title>Dynamic Live Chart</title>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script>
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function() {

                        // set up the updating of the chart each second
                        var series = this.series[0];
                        var y = 0; 
                        setInterval(function() {
                            var x = (new Date()).getTime(); // current time
                            $.get('/getvalue', function(data) {
                              var oldy = y;
                              y = parseInt(data);
                              series.addPoint([x, y], true, true);
                            });
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Dynamic Chart live'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Values'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            plotOptions: {
                line: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Value',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: 0,
                        });
                    }
                    return data;
                })()
            }]
        });
    });
  </script>
</head>
<body> 
<div id="container"></div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

We have our application, now we are ready to feed and test 😃

Feed with random data

Feed me

As you can see, the data source is a flat /tmp/values.txt file that can be fed by http GET call or manually (this is what we will do right now):

$ while true; do echo `shuf -i 0-20 -n 1` > /tmp/values.txt; sleep 1; done
Enter fullscreen mode Exit fullscreen mode

Start it and test

I start it with development server morbo (but could be something else):

$ morbo live.pl
Enter fullscreen mode Exit fullscreen mode

We can access value with:

$ curl http://127.0.0.1:3000/getvalue
12
Enter fullscreen mode Exit fullscreen mode

Or set value to 100 for instance with the endpoint /setvalue/100:

$ curl http://127.0.0.1:3000/setvalue/100
You set the value to 100
Enter fullscreen mode Exit fullscreen mode

The result

Open your favorite browser and you will get this beautiful live chart:
Live

You can also get an overview here

Top comments (9)

Collapse
 
jonasbn profile image
Jonas Brømsø •

Great article

Both Mojolicious and Highcharts are awesome, we use both at work, but the license for Highcharts is a bit restricted. Recommendations for a freely distributable open source charting library would be most welcome... 😜

Collapse
 
robianc profile image
Roberto •

I use Apache Echarts
echarts.apache.org/en/index.html

Collapse
 
thibaultduponchelle profile image
Tib •

Thank you for the tip, Echarts looks very nice !! But can you create live charts with it ?

Thread Thread
 
robianc profile image
Roberto •

Here is an example from the documentation:
echarts.apache.org/examples/en/edi...

Collapse
 
jonasbn profile image
Jonas Brømsø •

Hi Roberto

I heard about echarts on a podcast, it just seemed a bit overkill compared to what I need to implement, I will give it a second look.

Take care

Thread Thread
 
robianc profile image
Roberto •

Hi,
In Mojolicious i have a html with echarts js code and I fill in the data variable and few others I need, through the stash. Very efficient in my use case.
By the way, in my opinion, Echarts can be an interesting solution for a Perl programmer to create high quality plots. Unfortunately a good/modern and complete plotting module is one of the things that Perl lacks.
Best regards

Thread Thread
 
jonasbn profile image
Jonas Brømsø •

Hi Roberto, you mean as in server side rendering. I must admit I am not to the approach your outline of having the rendering done by the client, having the Mojolicious (or similar) service only deliver the raw data.

Guess I have been in the MVC-sphere for too long :-)

Thread Thread
 
robianc profile image
Roberto •

No, no sorry :) I meant that I have a template I fill on server with data for Echarts. The data are then embedded in the html. So all is done server side and I serve a self standing html

Collapse
 
simeoreig profile image
Simeo Reig •

$ while true; do echo shuf -i 0-20 -n 1 > /tmp/values.txt; sleep 1; done

Should be

$ while true; do echo shuf -i 0-20 -n 1 >> /tmp/values.txt; sleep 1; done

Note double > (>>)