Populate data into javascript data (e.g. json_encode)

The CMS Questions
1

Hi,

i’ve been looking for a good way to populate my javascript data (used for creating a chart) to e.g. create a summery of my sales during a certain timespan and couldn’t think of any good method to get it done in a smooth fashing.

as you’d expect from sales information each sale has a date, and values like amount or discount etc.

as far as i can understand i’d need adjust my data for for labels as well as values that i’ll be able to display for date thoughout (let’s say the last 30 days) and get the appropriate data, as well as doing that for all values…

I am kinda stuck adding all entries which are having same dates as well as getting it into the right format which can be used to output the data for label and values…

2

I can, I used to do this all the time via google analytics. The way I did was to use Google Analytics ecommerce extension to capture that transaction data (each product, each product price, each product ID, transaction ID, total basket value).

I then sucked this in to Google Sheets via the Analytics addon on and from there made fancy reports with charts and dancing unicorns. The neat thing about this is the sheet can be scheduled to update itself at a date/time frequency. I set up dynamic date ranges in mine so it generated a report monthly for the current month and also compare the data with the same month last year automatically.

3

thanks for the suggestion, but that way too complicated

i’d just need to be able to run though each order (which i can do already)
sort / group them by their dates, calculate all sums and output it compatible to chart.js … just like that.

shouldn’t be too hard but i spend quite some attempts and can’t think of something super straightfoward.

a result like that example
http://www.chartjs.org/samples/latest/scales/time/financial.html

since i have 3 diffrent payment options which can be filtered, i could also consider for a stacked bar
http://www.chartjs.org/samples/latest/charts/bar/stacked.html

// pseudocode
foreach(dates30daysback as $day){
 $sum = null;
  foreach($orders->filterBy('date', '==', $day) as $order){
     $sum += $order->total()->value();
  }

// e.g. making values compatible to javascript
// using json_encode or whatever...
array_push($json['date'], $day);
array_push($json['amount'], $sum);
}

so i could be able to echo dates for X and amounts for Y

4

The closest I got was modifying @texnixe spreadsheet plugin to add data attributes to that could be picked up by high charts table, but thats probably not quite what you want either. If you dump the data out as a CSV, you can go this route.

I struggled myself with chart.js despite really wanting to use it, and in the end gave up.

5

Maybe this is useful

6

The problem is not getting the data into json format, but to think about how you want to visualize your data and write some functions that then return that data for each visualization. This is way more important than picking a chart library or any such thing.

7

It sounds it but its not really, you just need to add the ecommerce extension to the page (easiest way is to use GA via google tag manager, then trap the data into a datalayer that GA picks up on.)

It will track at point of sale, so ideally put the datalayer on a “thanks for your purchase” page, and it wont help you with historical purchases, only new ones going forward.

I would seriously consider it. Once you get the data pumping into Google Sheets you can do all sorts of crazy stuff with the data. Its weirdly fun.

I’ve not done this on a kirby site, but i have done it on plenty of .NET ecommerce sites. The process should be pretty much the same, maybe an hours work.

8

as a starting point which seems to work but it’s quite messy and not the most sophisticated solution:

				<?php
				$data = array();
				$values = array();
				$json = array();
					foreach($pages->index()->filterBy('template','shop.order')->visible()->sortBy('date','asc') as $order){
						$json[$order->date('d.m.Y')]['sum'] += calcTotal($order->cart()->yaml())-$order->discount()->value();
					}
					foreach($json as $value => $key){
						array_push($data, '"'.$value.'"');
						array_Push($values, $key['sum']);
					}
				?>

at least i’m trying :confused:

well the result looks like this, i guess styling is not the problem there… it’s just the neatest way the turn content compatible with javascript…

for me it seems like javascript data always keeps messing with me…

testing
testing.jpg998×311 22.5 KB

9

Hi,
another way or workaround is to write your fields in invisible divs and than get the text from these through Javascript and write it in a variable.
I found your thread because I use actually also chart.js on a Kirby site. And i thought about to write first a jsonfile and use it inside chart.js.
But than I take the values directly from my datatable what I have also.