v2 Guide

Currently OOcharts supports 4 types of plugins. OOcharts also provides a Query object for more detailed interaction with our service. You will need to know the Analytics Profile Id for the site you are monitoring.

Metric

A Metric shows the total metric value over a date range (total visits, total bounces, ect.)

Construct a Metric using your Google Analytics Profile Id, a Date to start from, and a Date to end at. Here is a quick example:

        var m = new oo.Metric("123456789", new Date("1/1/2012"), new Date("1/30/2012"));
    

Next, set the metrics you want to display. Using setMetric(), The only argument is the metric name.

        var m = new oo.Metric("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        m.setMetric('ga:pageviews');
    

Now, it's a simple draw call. The first argument is the Id of the Html element that the numeric metric value will be written to. The second argument is optional, in which you can specify a callback function when the chart has been loaded and drawn.

        var m = new oo.Metric("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        m.setMetric('ga:pageviews');
        m.draw('met-h1');
    

Example Html:

        <h1 id="met-h1"></h1>
        <h3>Page Views</h3>
    

The header in this case (with the id of 'met-h1') will be filled with the result:

Timeline

A Timeline shows a series of metrics over a date range by date using a line chart.

Construct a Timeline using your Google Analytics Profile Id, a Date to start from, and a Date to end at. Here is a quick example:

        var tl = new oo.Timeline("123456789", new Date("1/1/2012"), new Date("1/30/2012"));
    

Next, add the metrics you want to display. Each metric will show up as another line on the chart. Below, we add two metrics for visits and new visits. Using addMetric(), the first argument is the metric name, the second is the label we wish to show on the legend.

        var tl = new oo.Timeline("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        tl.addMetric('ga:visitors', 'Visits');
        tl.addMetric('ga:newVisits', 'New Visits');
    

We could just draw the chart at this point. But let's do a little more. The underlying library that is drawing the chart is Google Visualization. We can use the setOption method to interact with the chart colors, titles, ect. by setting the Google Chart options for a line chart. Take a look at the Google Line Chart Documentation. Let's go ahead and set a title and the colors for our chart. The setOption function takes the first argument as the option name, and the second as the option value.

        var tl = new oo.Timeline("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        tl.addMetric('ga:visitors', 'Visits');
        tl.addMetric('ga:newVisits', 'New Visits');

        tl.setOption('title', 'Visits Chart');
        tl.setOption('colors', ['red', 'black', '#0072c6']);
    

Now that we set out metrics and options, we can finish up with a simple draw(). The first argument should be the Id of the div element you wish to draw the timeline within. The second argument is optional, in which you can specify a callback function when the chart has been loaded and drawn. This is handy for animations.

        var tl = new oo.Timeline("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        tl.addMetric('ga:visitors', 'Visits');
        tl.addMetric('ga:newVisits', 'New Visits');

        tl.setOption('title', 'Visits Chart');
        tl.setOption('colors', ['orange', 'green', '#0072c6']);

        tl.draw("timeline-div");
    

Example Html:

        <div id="timeline-div"></div>
    

Pie

A Pie chart shows a perctange of metric values by a dimension.

Construct a Pie chart using your Google Analytics Profile Id, a Date to start from, and a Date to end at. Here is a quick example:

        var p = new oo.Pie("123456789", new Date("1/1/2012"), new Date("1/30/2012"));
    

Next, set the metric you want to display. Using setMetric(), The first argument is the metric name, and the second argument is the label to show.

        var p = new oo.Pie("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        p.setMetric('ga:visitors');
    

Then, set the dimension you want by using the setDimension() function. The only argument is the dimension name.

        var p = new oo.Pie("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        p.setMetric('ga:visitors', 'Visits');
        p.setDimension('ga:browser');
    

We could just draw the chart at this point. However, like above with the Timeline, there is one more thing we can manage. The underlying library that is drawing the chart is Google Visualization. We can use the setOption method to interact with the chart colors, titles, ect. by setting the Google Chart options for a pie chart. Take a look at the Google Pie Chart Documentation. The setOption function works just as it does with the Timeline: first argument is the string name of the option, second is the object representing the value for the option.

But let's keep it simple and just draw the chart. We can finish up with a simple draw(). The first argument should be the Id of the div element you wish to draw the pie chart within. The second argument is optional, in which you can specify a callback function when the chart has been loaded and drawn. This is handy for animations. Let's go ahead an specify a callback function to alert us when the data is done loading and the chart is drawn.

        var p = new oo.Pie("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        p.setMetric('ga:visitors', 'Visits');
        p.setDimension('ga:browser');

        p.draw('pie-div', pieDone);

        function pieDone(){
            alert('Pie was drawn');
        }
    

Example Html:

        <div id="pie-div"></div>
    

Table

A Table displays metrics and dimensions in a sortable table.

Construct a Table using your Google Analytics Profile Id, a Date to start from, and a Date to end at. Here is a quick example:

        var t = new oo.Table("123456789", new Date("1/1/2012"), new Date("1/30/2012"));
    

Next, add the metrics you want to display. Using addMetric(), The first argument is the metric name, and the second argument is the label to show in the header column. Call addMetric() for each metric you would like to display:

        var t = new oo.Table("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        t.addMetric('ga:visitors', 'Visits');
        t.addMetric('ga:bounces', 'Bounces');
    

Then, add the dimensions you want by using the addDimension() function. The first argument is the dimension name, and the second argument is the label to show in the header column. Call addDimension() for each dimension you would like to display:

        var t = new oo.Table("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        t.addMetric('ga:visitors', 'Visits');
        t.addMetric('ga:bounces', 'Bounces');

        t.addDimension('ga:country', 'Country');
        t.addDimension('ga:city', 'City');
    

We could just draw the chart at this point. However, like above with the Timeline, there is one more thing we can manage. The underlying library that is drawing the chart is Google Visualization. We can use the setOption method to interact with the table colors, titles, ect. by setting the Google Chart options for a table. Take a look at the Google Table Documentation. The setOption function works just as it does with the Timeline: first argument is the string name of the option, second is the object representing the value for the option.

But let's keep it simple and just draw the table. We can finish up with a simple draw(). The first argument should be the Id of the div element you wish to draw the pie chart within. The second argument is optional, in which you can specify a callback function when the chart has been loaded and drawn. This is handy for animations.

        var t = new oo.Table("123456789", new Date("1/1/2012"), new Date("1/30/2012"));

        t.addMetric('ga:visitors', 'Visits');
        t.addMetric('ga:bounces', 'Bounces');

        t.addDimension('ga:country', 'Country');
        t.addDimension('ga:city', 'City');

        t.draw('table');
    

Example Html:

        <div id="table"></div>
    

The Table columns will be in the order of dimensions, in the order you set them, then metrics, in the order you set them.

Query

We also provide an object that allows you complete control of a query to our server. This can be used for more customized data and charts.

                            var q = new oo.Query("123456789", 
                                new Date("1/1/2012"), new Date("1/20/2012"));
                        

                            q.addDimension('ga:date');
                        

                            q.addMetric('ga:visitors');
                        

                            q.execute(print);

                            function print(data)
                            {
                                alert(data);
                            }
                        

                            q.setAId('123456789');
                        

                            q.setAutoParse(false);
                        

                            q.setEndDate(new Date('1/1/2012'));
                        

                            q.setFilter('ga:visitors>0');
                        

                            q.setMaxResults(500);
                        

                            q.setSort('ga:country,ga:browser');
                        

                            q.setStartDate(new Date('1/1/2012'));
                        

Simple example

An easy Query:

                var q = new oo.Query("1234567", new Date("7/1/2012"),
                    new Date("7/30/2012"));

                //Metrics
                q.addMetric('ga:visitors');

                //Dimension
                q.addDimension('ga:date');

                q.execute(function (data) {
                    alert(data);
                });