|
@@ -50,16 +50,15 @@
|
|
activeClients: <?= json_encode($activeClients) ?>,
|
|
activeClients: <?= json_encode($activeClients) ?>,
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- initClientsWePaidToAcquire: function() {
|
|
|
|
- var data = this.clientsWePaidToAcquire;
|
|
|
|
|
|
+ dateValueDataObjectBarGraph: function (data, dateLabel, valueLabel, chartID, yAxisLegend){
|
|
var dates = [];
|
|
var dates = [];
|
|
var values = [];
|
|
var values = [];
|
|
for(var i = 0; i < data.length; i++){
|
|
for(var i = 0; i < data.length; i++){
|
|
var d = data[i];
|
|
var d = data[i];
|
|
- dates.push(d.date_trunc);
|
|
|
|
- values.push(d.count);
|
|
|
|
|
|
+ dates.push(d[dateLabel]);
|
|
|
|
+ values.push(d[valueLabel]);
|
|
}
|
|
}
|
|
- var elementID = "#clientsWePaidToAcquire";
|
|
|
|
|
|
+ var elementID = chartID;
|
|
var myData = {};
|
|
var myData = {};
|
|
|
|
|
|
myData.x = 'x';
|
|
myData.x = 'x';
|
|
@@ -68,7 +67,7 @@
|
|
myX = dates;
|
|
myX = dates;
|
|
myY = values;
|
|
myY = values;
|
|
myX.splice(0, 0, 'x');
|
|
myX.splice(0, 0, 'x');
|
|
- myY.splice(0, 0, 'Clients we paid to acquire');
|
|
|
|
|
|
+ myY.splice(0, 0, yAxisLegend);
|
|
myData.columns = [];
|
|
myData.columns = [];
|
|
myData.columns.push(myX);
|
|
myData.columns.push(myX);
|
|
myData.columns.push(myY);
|
|
myData.columns.push(myY);
|
|
@@ -97,52 +96,14 @@
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ initClientsWePaidToAcquire: function() {
|
|
|
|
+ var data = this.clientsWePaidToAcquire;
|
|
|
|
+ this.dateValueDataObjectBarGraph(data, 'date_trunc', 'count', '#clientsWePaidToAcquire', 'Clients we paid to acquire');
|
|
|
|
+
|
|
|
|
+ },
|
|
initActiveClients: function() {
|
|
initActiveClients: function() {
|
|
var data = this.activeClients;
|
|
var data = this.activeClients;
|
|
- var dates = [];
|
|
|
|
- var values = [];
|
|
|
|
- for(var i = 0; i < data.length; i++){
|
|
|
|
- var d = data[i];
|
|
|
|
- dates.push(d.date_trunc);
|
|
|
|
- values.push(d.count);
|
|
|
|
- }
|
|
|
|
- var elementID = "#activeClients";
|
|
|
|
- var myData = {};
|
|
|
|
-
|
|
|
|
- myData.x = 'x';
|
|
|
|
- myData.xFormat = "%Y-%m-%d";
|
|
|
|
- myData.type = 'bar';
|
|
|
|
- myX = dates;
|
|
|
|
- myY = values;
|
|
|
|
- myX.splice(0, 0, 'x');
|
|
|
|
- myY.splice(0, 0, 'Active Clients');
|
|
|
|
- myData.columns = [];
|
|
|
|
- myData.columns.push(myX);
|
|
|
|
- myData.columns.push(myY);
|
|
|
|
- var chart = c3.generate({
|
|
|
|
- bindto: elementID,
|
|
|
|
- data: myData,
|
|
|
|
- size: {
|
|
|
|
- height: 480,
|
|
|
|
- width: 400,
|
|
|
|
- },
|
|
|
|
- bar: {
|
|
|
|
- width: {
|
|
|
|
- ratio: 0.5 // this makes bar width 50% of length between ticks
|
|
|
|
- }
|
|
|
|
- // or
|
|
|
|
- //width: 100 // this makes bar width 100px
|
|
|
|
- },
|
|
|
|
- axis: {
|
|
|
|
- x: {
|
|
|
|
- type: 'timeseries',
|
|
|
|
- tick: {
|
|
|
|
- format: "%b-%d"
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ this.dateValueDataObjectBarGraph(data, 'date_trunc', 'count', '#activeClients', 'Active Clients');
|
|
},
|
|
},
|
|
init: function() {
|
|
init: function() {
|
|
this.initClientsWePaidToAcquire();
|
|
this.initClientsWePaidToAcquire();
|