High resolution charts based on Piwik data

Piwik is a great replacement to Google Analytics. Based on my Piwik data, I wanted to generate a chart for a presentation, showing the evolution of the number of visitors and visits over time. Piwik provides such a chart, of course, however it’s not customizable. For instance, the height is fixed and small, and so it didn’t look good in the presentation.

Therefore, I hacked a tool that generated this chart in high resolution. Of course this should be packaged, for instance as a Piwik plugin, or even integrated in the main line, but for now it’s good enough for me. Based on the JQPlot documentation, you can tweak it to your own needs.

You just have to set “url” and token_auth below to fit your own Piwik installation. You will of course need JQPlot, which is however already included in Piwik.

Here is example of the output:
piwik-jqplot

<!DOCTYPE html>

<html>
<head>
	
    <title>Piwik statistics</title>

    <link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
  
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="jquery.min.js"></script>
   
    <script class="include" type="text/javascript" src="jquery.jqplot.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
    <script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
    <script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>   
</head>
<body>

<div id="chart1" style="height:700px; width:100%;">Loading...</div>

<script class="code" type="text/javascript">

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

$(document).ready(function(){

  var callback = function(data) {
  var jqdata = [];
  console.log(data);
  $.each(data, function(key, val) {
    var day = key.match(/\d{4}-\d{1,2}(-\d{1,2})?/)[0];
    var metrics = ["nb_uniq_visitors", "nb_visits"];
    for ( i = 0 ; i < metrics.length ; i++ ) {
      jqdata[i] = jqdata[i] || [];
      jqdata[i].push([day,val[metrics[i]]]);
    }
  });

  $('#chart1').empty();
  var plot1 = $.jqplot('chart1', jqdata, {
    title:'Statistics',
    axes:{
        xaxis:{
            renderer:$.jqplot.DateAxisRenderer,
        },
        yaxis:{
          min:0
        }
    },
    series:[
        {label:"Visiteurs uniques",
        lineWidth:4,
        markerOptions:{style:'square'}},
        {label:"Visites",
        lineWidth:4,
        markerOptions:{style:'square'}},
    ],
    highlighter: {
        show: true,
        sizeAdjust: 7.5
      },
    legend: {
        show: true,
    }
  });

};

  var url = "http://yoursite/piwik/index.php"; 
  var urlparams = {
    module:"API",
    method:"VisitsSummary.get",
    idSite:1,
    token_auth:"TBD...",
    format:"JSON"
  };

  if ( 	getUrlVars()["type"] == "week" ) {
    urlparams["period"] = "week";
    urlparams["date"] = "last70";
  }
  else {
    urlparams["period"] = "month";
    urlparams["date"] = "last26";
  }
  $.ajax({
    url: url,
    data:urlparams,
    dataType: 'json',
    success: callback
  });

});
</script>


</body>

</html>
Advertisements
This entry was posted in Web and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s