CartThrob Forums | Order Reporting - Charts w/ Google Visualization API

1 of 2

Order Reporting - Charts w/ Google Visualization API

Rob Sanchez

Posted: 01 December 2010 05:57 PM

[ Ignore ]

Administrator

Total Posts: 3369

Joined 2009-05-29

Many of you have asked for order reports. Here are a few templates you could use with the Google Visualization API to create charts using your order data.

NOTE: Make sure to replace windowDOTlocation with window.location in the script below. (this is necessary to get around forum filtering)

order_reports/index

<html>
    <head>
        < script type="text/javascript" src="http://www.google.com/jsapi" ></ script >
        < script type="text/javascript" >
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Month');
                data.addColumn('number', 'Gross');
                var rows = 0;
                {exp:weblog:month_links weblog="orders" limit="9999"}rows++;{/exp:weblog:month_links}
                    data.addRows(rows);
                {exp:weblog:month_links weblog="orders" limit="9999" parse="inward"}
        
                data.setFormattedValue(--rows, 0, "{month_short} '{year_short}");
                data.setValue(rows, 0, '{month_num}{year}');
                data.setValue(rows, 1,  {exp:cartthrob:order_totals dynamic="off" year="{year}" month="{month_num}" prefix="" thousands_sep="" decimal="."});{/exp:weblog:month_links}
        
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 600, height: 400, title: 'Sales'});
                google.visualization.events.addListener(chart, 'select', function(){
                    selection = chart.getSelection();
                    value = data.getValue(selection[0].row, 0);
                    windowDOTlocation.href = '{path=order_reports/month}' + value.substring(2) + '/' + value.substring(0, 2);
                });
            }
        < /script >
    </head>

    <body>
        <div id="chart_div"></div>
    </body>
</html> 

[ Edited: 03 December 2010 02:32 PM by Chris Newton ]

Profile

Rob Sanchez

Posted: 01 December 2010 06:00 PM

[ Ignore ] [ # 1 ]

Administrator

Total Posts: 3369

Joined 2009-05-29

order_reports/month (PHP enabled on Input)

NOTE: Make sure to replace windowDOTlocation with window.location in the script below. (this is necessary to get around forum filtering)

<?php global $IN; ?>
<html>
  <head>
    < script type="text/javascript" src="http://www.google.com/jsapi" >< /script >
    < script type="text/javascript" >
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Day');
        data.addColumn('number', 'Gross');
    var rows = <?php echo cal_days_in_month(CAL_GREGORIAN, $IN->fetch_uri_segment(4), $IN->fetch_uri_segment(3)); ?>;
        data.addRows(rows);

<?php for ($i = cal_days_in_month(CAL_GREGORIAN, $IN->fetch_uri_segment(4), $IN->fetch_uri_segment(3)); $i > 0; $i--) : ?>
        data.setFormattedValue(--rows, 0, '<?php echo date('D ', mktime (0, 0, 0, $IN->fetch_uri_segment(3), $IN->fetch_uri_segment(4), $i)).$i; ?>');
        data.setValue(rows, 0, '<?php echo $i; ?>');
        data.setValue(rows, 1,  {exp:cartthrob:order_totals dynamic="off" year="{segment_3}" month="{segment_4}" day="<?php echo $i; ?>" prefix="" thousands_sep="" decimal="."});
<?php endfor; ?>
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 1000, height: 300, title: 'Sales'});
    google.visualization.events.addListener(chart, 'select', function(){
        selection = chart.getSelection();
        value = data.getValue(selection[0].row, 0);
        windowDOTlocation.href = '{path=order_reports/day/{segment_3}/{segment_4}}' + value;
    });
      }
    < /script >
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html> 

[ Edited: 03 December 2010 02:32 PM by Chris Newton ]

Profile

Rob Sanchez

Posted: 01 December 2010 06:00 PM

[ Ignore ] [ # 2 ]

Administrator

Total Posts: 3369

Joined 2009-05-29

order_reports/day (PHP enabled on Output)

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Day');
        data.addColumn('number', 'Gross');
    var rows = 0;
{exp:weblog:entries weblog="orders" year="{segment_3}" month="{segment_4}" day="{segment_5}" dynamic="off"}
    <?php if ({count} == 1) : ?>
    var rows = {total_results};
    data.addRows(rows);
    <?php endif; ?>
    if ({count} == 1) { var rows = {total_results}; data.addRows(rows); }
    data.setValue(--rows, 0, '{entry_date format="%g:%i%a"}');
        data.setValue(rows, 1,  {exp:cartthrob:view_formatted_number number="{order_total}" prefix="" thousands_sep="" decimal="."});
{/exp:weblog:entries}
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 1000, height: 300, title: 'Sales'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html> 

Profile

Chris Newton

Posted: 01 December 2010 07:38 PM

[ Ignore ] [ # 3 ]

Administrator

Total Posts: 8342

Joined 2008-09-29

Nice. I started implementing that on one of our client sites (wordsfromthesea.com). I’ll update it with this code though.

Signature

NOTE: If I say “I will look into x” and you PM me information, please do not hesitate to contact me again about it, if I do not respond in several hours, or at most a day. Please feel free to remind me as you see fit

Profile

xenowebdev

Posted: 02 December 2010 11:06 PM

[ Ignore ] [ # 4 ]

Has a Great Personality

Total Posts: 41

Joined 2010-05-21

Legends!

Profile

johndwells

Posted: 03 December 2010 03:20 PM

[ Ignore ] [ # 5 ]

Wallflower

Total Posts: 5

Joined 2010-08-22

Hey, now these are mighty clever. Thanks Rob!

Profile

Thomas Kroell

Posted: 15 February 2011 06:34 PM

[ Ignore ] [ # 6 ]

Has a Great Personality

Total Posts: 47

Joined 2010-12-30

Getting the following error when accessing the monthly report:

Warning: cal_days_in_month() [function.cal-days-in-month]: invalid date. in /home/king56/public_html/dcc/system/core/core.functions.php(663) : eval()‘d code on line 12

Any ideas?

Signature

King Kroell | Website Design Durban

Profile

Rob Sanchez

Posted: 15 February 2011 06:38 PM

[ Ignore ] [ # 7 ]

Administrator

Total Posts: 3369

Joined 2009-05-29

What is the url when you get that error?

Profile

Thomas Kroell

Posted: 15 February 2011 06:41 PM

[ Ignore ] [ # 8 ]

Has a Great Personality

Total Posts: 47

Joined 2010-12-30

../order_reports/month

[ Edited: 15 February 2011 06:55 PM by Thomas Kroell ]

Signature

King Kroell | Website Design Durban

Profile

Rob Sanchez

Posted: 15 February 2011 06:44 PM

[ Ignore ] [ # 9 ]

Administrator

Total Posts: 3369

Joined 2009-05-29

You need to supply a 4 digit year as the 3rd url segment and a two digit month as the 4th url segment, as in /order_reports/month/2011/02

Profile

Thomas Kroell

Posted: 15 February 2011 06:54 PM

[ Ignore ] [ # 10 ]

Has a Great Personality

Total Posts: 47

Joined 2010-12-30

Ah, that makes sense. thanks for the quick response.

Signature

King Kroell | Website Design Durban

Profile

wreford

Posted: 09 May 2011 05:53 PM

[ Ignore ] [ # 11 ]

Wallflower

Total Posts: 14

Joined 2010-08-17

Just a reminder to folks if you’re cutting and pasting the above code: remove the spaces in the < script> tags in the index and month templates. Took me half an hour to notice that.

Profile

Chris Newton

Posted: 09 May 2011 06:04 PM

[ Ignore ] [ # 12 ]

Administrator

Total Posts: 8342

Joined 2008-09-29

D’oh.

Signature

Profile

Steven Grant

Posted: 17 May 2011 06:51 AM

[ Ignore ] [ # 13 ]

Is a Really Great Dancer

Total Posts: 63

Joined 2010-04-08

Why would the index report return blank? I’ve taken care to ensure I’ve replaced WindowsDOTLocation and also removed spaces from script tags.

Profile

Chris Newton

Posted: 17 May 2011 08:03 AM

[ Ignore ] [ # 14 ]

Administrator

Total Posts: 8342

Joined 2008-09-29

Check the HTML source. I’d bet SOME of it is rendering…. but the weblog entries might not be. If the page is COMPLETELY blank, then it’s a PHP error or other parsing issue. If parts are rendered in the source code… then it’s a weblog issue (like… if you use custom statuses beyond open and closed.

Signature

Profile

Steven Grant

Posted: 17 May 2011 09:08 AM

[ Ignore ] [ # 15 ]

Is a Really Great Dancer

Total Posts: 63

Joined 2010-04-08

good shout on the statuses, that’s at least giving me something http://praisegathering.org.uk/order-reports/ but no sales being reported. I’m guessing if there were sales showing I could drill down to the other templates?

Profile

1 of 2

‹‹ Setting the shipping countries Generate Totals ››