OOCharts monthly timeline

Question

I'm using Oocharts.com's API and I'm doing a 12 month timeline chart, but it displays a daily data point for each day instead of combining them into a monthly amount. So, instead of displaying 1 visit per day, I want it to show 30 visits for the month. How can I do that?

Here's a link to their documentation, I read the entire thing and don't see how to do this. I even changed my date range from 1y to 12m and it didn't do anything.

http://docs.oocharts.com/

Answer 1

I solved this by using an oocharts query + google's visualization API. Here's my code for displaying filtered results for the last 12 months:

// What's our months?
$months = array();
for ($i = -12; $i < 0; $i++)
{
    $month_time = strtotime($i . ' months');
    $months[] = date('F Y', $month_time);
}

// Add js code to get unique page views for last year on a timeline chart
$oocharts_js .= '
    oo.load(function(){
        var query = new oo.Query("' . $this->config->item('oocharts_profile_id') . '", "13m");
        query.addMetric("ga:uniquePageviews");
        query.addDimension("ga:nthMonth");
        query.setFilter("' . $oochart_filter . '");
        query.setIndex(2);
        query.execute(function(data){
            console.log(data.rows);
            google.load("visualization", "1", {packages:["corechart"]});

            var dataTable = google.visualization.arrayToDataTable([
                ["Month", "Page Visits"],
';
foreach ($months as $key => $value)
{
    $oocharts_js .= '["' . $value . '", data.rows[' . $key . '][1]],';
}
$oocharts_js .= '
            ]);

            var options = {
                chartArea: {top: 10, left: 30, height: "60%"},
                hAxis: {
                    slantedText: true,
                },
                vAxis: {
                    viewWindow:{
                        min:0,
                    },
                },
                pointSize: 5,
                lineWidth: 3,
            };

            var chart = new google.visualization.LineChart(document.getElementById("chart_' . $business->business_id . '"));
            chart.draw(dataTable, options);
        });
    });
';