How do you title the X and Y axis?

Stuart Jones reporter

I decided to use a new chart package called chartjs/. Here is a screenshot of Atlasboard with the new graph package:

This installation tutorial assumes you have used my Google analytics tutorial: here

To install this graph package I did the following:

Download and unzip chartjs. * Copy and paste the folder into atlasboard/third-party/ - (for me this was /usr/libnode_modules/atlasboard/assets/third-party)

Include the javascript and CSS file in the dashboard.ejs file This can be found at atlasboard/templates/dashboard.ejs I then inserted this line of code into the <head> tags "<script src="/third-party/chart/Chart.min.js"></script>"

Now you have finished including the chartjs package you need to edit your job and widget files so they use it!

In the widget file (in this demonstration I am using googleanalytics.js)

Append a canvas to the content div and set the height and width depending on how big you need it to be. Parse through the data you grabbed using the job and change colour of line if need be. Make any option changes (e.g. change colour of font etc).

Full code:

widget = {
    onData: function(el, data) {

      if (data.title) { //sets the title
          $('h2', el).text(data.title);
      }

      var graph;
      $(".content", el).empty();  //clears the previous graph

      //add canvas to div
      $(".content", el).append('<canvas id="myChart" height="650" width="570"> </canvas>') ;


      console.log(data.xAxis); //remove "" from the integer array
      var y = data.yAxis;
      y = y.map(function (x) { 
          return parseInt(x, 10); 
      });
      //console.log(y);



      //Get context with jQuery - using jQuery's .get() method.
      var ctx = document.getElementById("myChart").getContext("2d");
      //This will get the first returned node in the jQuery collection.

      var data = {
        labels : data.xAxis,  //label data
        datasets : [
          {
            fillColor : "rgb(194,0,0)",
            strokeColor : "rgb(194,0,0)",
            data : y      //y axis data
          }
        ]
      }

      var options = { //customise the look of the graph
          scaleFontColor : "#fff",
          scaleFontFamily : "'Arial'",
          scaleFontSize: 15
      }

      new Chart(ctx).Bar(data,options); //draw the graph

    }
};

Edit the Google Analytics Job

I ran a simple function to grab todays date

 authorize(function(err, token) {
        if (!err) {
            // Query the number of total visits for a month
            var requestConfig = {
                'ids': '####projectid#####',
                'dimensions': 'ga:country',
                'metrics': 'ga:users',
                'sort': '-ga:users',
                'start-date': lastMonth,
                'end-date': thisMonth,
                'max-results': '10'
            };

            request({
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + token // Here is where we use the auth token
                },
                uri: 'https://www.googleapis.com/analytics/v3/data/ga?' + qs.stringify(requestConfig)
            }, function(error, resp, body) {

                var arrayX = [];
                var arrayY = [];
                var data = JSON.parse(body);
                json = data.rows;
                var country = json.map(function(a){return a[0]});   //sets the first position in the array to be the temp
                var views = json.map(function(a){return a[1]});
                var len = json.length;
                for (var i = 0; i < len; i++)   //loops over each of the values (co ordinates)
                {
                    arrayX.push(country[i]);
                    arrayY.push(views[i]);
                    //console.log("x:"+country[i]+", y:"+views[i])
                };
                config.xAxis = arrayX;
                config.yAxis = arrayY;

                job_callback(null, { 
                    title: config.widgetTitle,  //title of the graph which is defined in the config
                    xAxis: config.xAxis,    //the y and x axis which are defined in the config
                    yAxis: config.yAxis
                });
            });
        }
    });

This should then display a Google analytics graph using the new chart package.

If I have time over the summer I will try and create an official chart package with a better tutorial.

Hope this helps!

2014-05-29T08:10:09+00:00

Comments (2)