Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: hashcube/charting
base: 7050cf3111
...
head fork: hashcube/charting
compare: 24da547cd0
Checking mergeability… Don't worry, you can still create the pull request.
  • 3 commits
  • 5 files changed
  • 0 commit comments
  • 1 contributor
Showing with 267 additions and 259 deletions.
  1. +5 −2 Db.php
  2. +1 −0  README
  3. +16 −12 Utils.php
  4. +226 −0 js/chart.js
  5. +19 −245 templates/index.html
View
7 Db.php
@@ -152,6 +152,7 @@ public function payingUsersLTVQuery()
public function executeQuery($query, $id)
{
+ $x = $y = $result = array();
if($id == '800') {
$uids = $this->getPayingUsers();
$query = preg_replace('/var/',"$uids", $query);
@@ -162,8 +163,10 @@ public function executeQuery($query, $id)
$x[]=$row['x'];
$y[]=$row['y'];
}
- $result['x'] = $x;
- $result['y'] = $y;
+ if(!empty($x)) {
+ $result['x'] = $x;
+ $result['y'] = $y;
+ }
return $result;
}
View
1  README
@@ -1 +1,2 @@
This project will help to visualize data from mysql
+Setup timezone from here - http://dev.mysql.com/doc/refman/5.5/en/time-zone-support.html
View
28 Utils.php
@@ -6,10 +6,12 @@ public static function formatDates($data)
{
foreach($data as $id=>$charts){
foreach($charts['charts'] as $i=>$chart_details){
- foreach($chart_details['result']['x'] as $j=>$value){
- if(self::is_date($value)){
- $value = date("d D M", strtotime($value));
- $data[$id]['charts'][$i]['result']['x'][$j] = $value;
+ if(!empty($chart_details['result'])) {
+ foreach($chart_details['result']['x'] as $j=>$value){
+ if(self::is_date($value)){
+ $value = date("d D M", strtotime($value));
+ $data[$id]['charts'][$i]['result']['x'][$j] = $value;
+ }
}
}
}
@@ -27,7 +29,7 @@ public static function is_date($str)
$year = date( 'Y', $stamp );
if (checkdate($month, $day, $year))
return TRUE;
- return FALSE;
+ return FALSE;
}
public static function fixMissingDates($data)
@@ -35,14 +37,16 @@ public static function fixMissingDates($data)
/* specifying for which charts missing dates are to be filled */
foreach($data as $id=>$charts) {
foreach($charts['charts'] as $i=>$chart_details) {
- $x = $chart_details['result']['x'];
- $y = $chart_details['result']['y'];
- if($id!=1 && $id!=2 && $id!=290 && $id!=350 && $id!=320 && $id!=330) {
- $res = self::fillMissingDates($x, $y, '2011-10-21', date("Y-m-d"));
- $data[$id]['charts'][$i]['result']['x'] = $res['x'];
- $data[$id]['charts'][$i]['result']['y'] = $res['y'];
+ if(!empty($chart_details['result'])) {
+ $x = $chart_details['result']['x'];
+ $y = $chart_details['result']['y'];
+ if($id!=1 && $id!=2 && $id!=290 && $id!=350 && $id!=320 && $id!=330) {
+ $res = self::fillMissingDates($x, $y, '2011-10-21', date("Y-m-d"));
+ $data[$id]['charts'][$i]['result']['x'] = $res['x'];
+ $data[$id]['charts'][$i]['result']['y'] = $res['y'];
+ }
}
- }
+ }
}
return $data;
}
View
226 js/chart.js
@@ -0,0 +1,226 @@
+Array.prototype.min = function() {
+ var min = this[0];
+ for(var i=0; i < this.length; i++){
+ if(this[i] < min)
+ min = this[i];
+ }
+ return min;
+}
+
+Array.prototype.max = function() {
+ var max = this[0];
+ for(var i=0; i < this.length; i++){
+ if(this[i] > max)
+ max = this[i];
+ }
+ return max;
+}
+
+$(document).ready(function() {
+
+ _.each(data, function(chart) {
+ var chartid = chart.title;
+ $('#chart_selector').append("<option>"+chartid+"</option>");
+ chartel_id = createDiv(chartid);
+ if(chart.chart_type == "pie")
+ createPieChart(chartel_id, chart);
+ else
+ createChart(chartel_id, chart);
+ //createChart(chartel_id, chart);
+ });
+
+ $("#chart_selector").change(function() {
+ var chart = $('#chart_selector option:selected').text();
+ top.location.href = "#"+chart;
+ });
+ if(ltv) {
+ writeLTVData();
+ }
+});
+
+function createDiv(chartid) {
+ var chartel_id = chartid;
+ var el = $("<div></div>");
+ el.attr('id',chartel_id);
+ el.css('margin', '20px');
+ $('body').append(el);
+ return chartel_id;
+}
+
+function createPieChart(el, data) {
+ var chart0_info = data.charts[0];
+ var series_data = Array();
+ _.each(data.charts, function(d){
+ var obj = {
+ type : "pie",
+ name: d.y_axis
+ };
+ var vals = Array();
+ if(d.result.x == null)
+ return;
+ var max_pies = (d.result.x.length>20) ? 20 : d.result.x.length;
+ for(var i=0; i<max_pies; i++){
+ vals[i] = Array(chart0_info.result.x[i],
+ d.result.y[i]);
+ }
+ obj.data = vals;
+ series_data.push(obj);
+ });
+ var chartid = new Highcharts.Chart({
+ chart: {
+ renderTo: el
+ },
+ title: {
+ text: data.title
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
+ }
+ },
+ plotOptions: {
+ pie: {
+ allowPointSelect: true,
+ cursor: 'pointer',
+ dataLabels: {
+ enabled: true,
+ formatter: function() {
+ return '<b>'+ this.point.name +'</b>: '+ this.point.y;
+ }
+ }
+ }
+ },
+ series: series_data
+ });
+ return chartid;
+}
+
+function createChart(el, data) {
+ var chart0_info = data.charts[0];
+ var series_data = Array();
+ _.each(data.charts, function(d) {
+ var obj = {
+ name: d.y_axis,
+ data: _.values(d.result.y),
+ type: d.type
+ };
+ if(d.type!=null && d.type.search(/stack/) >= 0){
+ obj.type= '';
+ var i = d.type.search(/=/);
+ obj.stack = d.type.slice(i+1);
+ }
+ //obj.pointStart = Date.UTC(2011,10,21);
+ //obj.pointInterval = 24*3600*1000;
+ series_data.push(obj);
+ });
+
+ var chartoptions = {
+ chart: {
+ renderTo: el,
+ alignTicks: false,
+ zoomType: 'x',
+ events : {
+ selection: function(event) {
+ //this.toolbar.remove('alltime');
+ if(event.yAxis) {
+ var min = event.yAxis[0].min;
+ var max = event.yAxis[0].max;
+ console.log(event.yAxis[0]);
+ console.log(event.xAxis[0]);
+ //min = findMin(series_data);
+ this.yAxis[0].setExtremes(min, max);
+ }
+ },
+ load: function(event) {
+ var max = this.xAxis[0].getExtremes().dataMax;
+ var min = (max-31>0) ? max-31 : 0;
+ this.xAxis[0].setExtremes(min, max);
+ var chart = this;
+ var remove = function() {
+ chart.xAxis[0].setExtremes(null,null);
+ //chart.toolbar.remove('alltime');
+ };
+ //this.toolbar.add('alltime','All Time','reset zoom', remove);
+ }
+ },
+ type: data.chart_type
+ },
+ title: {
+ text: data.title
+ },
+ xAxis: {
+ title: {
+ text: data.x_axis
+ },
+ categories: _.values(chart0_info.result.x),
+ //type: 'datetime',
+ //tickInterval: 24*3600*1000,
+ labels: {
+ rotation: -45,
+ align: "right"
+ }
+ },
+ yAxis: {
+ startOnTick: false,
+ endOnTick: false,
+ maxPadding: '0.3',
+ title: {
+ text: data.y_axis
+ }
+ },
+ series: series_data
+ };
+
+ if(data.chart_type == 'stack column') {
+ chartoptions.plotOptions = {
+ column: {
+ stacking: 'normal'
+ }
+ };
+ chartoptions.tooltip = {
+ formatter: function() {
+ return '<b>'+ this.x +'</b><br/>'+
+ this.series.name +': '+ this.y +'<br/>'+
+ 'Total: '+ this.point.stackTotal + '<br/>'+
+ '%: '+ this.point.percentage.toFixed(2) +'%';
+ }
+ };
+ chartoptions.chart.type = 'column';
+ }
+ else if(data.chart_type == 'combination') {
+ chartoptions.chart.type = '';
+ }
+ var chartid = new Highcharts.Chart(chartoptions);
+
+ return chartid;
+}
+
+function findMin(series){
+ var Min = series[0].data.min();
+ _.each(series, function(obj){
+ if(obj.data.min() < Min) {
+ Min = obj.data.min();
+ }
+ });
+ return Min;
+}
+function findMax(series){
+ var Max = series[0].data.max();
+ _.each(series, function(obj){
+ if(obj.data.max() > Max) {
+ Max = obj.data.max();
+ }
+ });
+ return Max;
+}
+
+function writeLTVData(){
+ $('body').append("<div id='ltv'></div>");
+ $('#ltv').html('<br>Gold | LTV | uid | Country | Gender | Source | Starttime | Lasttime | MaxMilestone<br><br>');
+ _.each(ltv, function(entry){
+ _.each(entry, function(vals){
+ $('#ltv').append(vals+" | ");
+ });
+ $('#ltv').append('<br>');
+ });
+}
View
264 templates/index.html
@@ -1,247 +1,21 @@
<html>
-<head>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
-<script src="js/underscore.js" type="text/javascript"></script>
-<script src="js/highcharts.src.js" type="text/javascript"></script>
-<title>Charting</title>
-</head>
-<body>
-<script type='text/javascript'>
-Array.prototype.min = function() {
- var min = this[0];
- for(var i=0; i < this.length; i++){
- if(this[i] < min)
- min = this[i];
- }
- return min;
-}
-
-Array.prototype.max = function() {
- var max = this[0];
- for(var i=0; i < this.length; i++){
- if(this[i] > max)
- max = this[i];
- }
- return max;
-}
-</script>
-
-<script type="text/javascript">
-var data = <?php echo $json_data; ?>;
-var ltv = <?php if($LTV_data)
- echo json_encode($LTV_data);
- else
- echo 'undefined';?>;
-$(document).ready(function() {
-
- _.each(data, function(chart) {
- var chartid = chart.title;
- $('#chart_selector').append("<option>"+chartid+"</option>");
- chartel_id = createDiv(chartid);
- if(chart.chart_type == "pie")
- createPieChart(chartel_id, chart);
- else
- createChart(chartel_id, chart);
- //createChart(chartel_id, chart);
- });
-
- $("#chart_selector").change(function() {
- var chart = $('#chart_selector option:selected').text();
- top.location.href = "#"+chart;
- });
- if(ltv) {
- writeLTVData();
- }
-});
-
-function createDiv(chartid) {
- var chartel_id = chartid;
- var el = $("<div></div>");
- el.attr('id',chartel_id);
- el.css('margin', '20px');
- $('body').append(el);
- return chartel_id;
-}
-
-function createPieChart(el, data) {
- var chart0_info = data.charts[0];
- var series_data = Array();
- _.each(data.charts, function(d){
- var obj = {
- type : "pie",
- name: d.y_axis
- };
- var vals = Array();
- if(d.result.x == null)
- return;
- var max_pies = (d.result.x.length>20) ? 20 : d.result.x.length;
- for(var i=0; i<max_pies; i++){
- vals[i] = Array(chart0_info.result.x[i],
- d.result.y[i]);
- }
- obj.data = vals;
- series_data.push(obj);
- });
- var chartid = new Highcharts.Chart({
- chart: {
- renderTo: el
- },
- title: {
- text: data.title
- },
- tooltip: {
- formatter: function() {
- return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
- }
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- cursor: 'pointer',
- dataLabels: {
- enabled: true,
- formatter: function() {
- return '<b>'+ this.point.name +'</b>: '+ this.point.y;
- }
- }
- }
- },
- series: series_data
- });
- return chartid;
-}
-
-function createChart(el, data) {
- var chart0_info = data.charts[0];
- var series_data = Array();
- _.each(data.charts, function(d) {
- var obj = {
- name: d.y_axis,
- data: _.values(d.result.y),
- type: d.type
- };
- if(d.type!=null && d.type.search(/stack/) >= 0){
- obj.type= '';
- var i = d.type.search(/=/);
- obj.stack = d.type.slice(i+1);
- }
- //obj.pointStart = Date.UTC(2011,10,21);
- //obj.pointInterval = 24*3600*1000;
- series_data.push(obj);
- });
-
- var chartoptions = {
- chart: {
- renderTo: el,
- alignTicks: false,
- zoomType: 'x',
- events : {
- selection: function(event) {
- //this.toolbar.remove('alltime');
- if(event.yAxis) {
- var min = event.yAxis[0].min;
- var max = event.yAxis[0].max;
- console.log(event.yAxis[0]);
- console.log(event.xAxis[0]);
- //min = findMin(series_data);
- this.yAxis[0].setExtremes(min, max);
- }
- },
- load: function(event) {
- var max = this.xAxis[0].getExtremes().dataMax;
- var min = (max-31>0) ? max-31 : 0;
- this.xAxis[0].setExtremes(min, max);
- var chart = this;
- var remove = function() {
- chart.xAxis[0].setExtremes(null,null);
- //chart.toolbar.remove('alltime');
- };
- //this.toolbar.add('alltime','All Time','reset zoom', remove);
- }
- },
- type: data.chart_type
- },
- title: {
- text: data.title
- },
- xAxis: {
- title: {
- text: data.x_axis
- },
- categories: _.values(chart0_info.result.x),
- //type: 'datetime',
- //tickInterval: 24*3600*1000,
- labels: {
- rotation: -45,
- align: "right"
- }
- },
- yAxis: {
- startOnTick: false,
- endOnTick: false,
- maxPadding: '0.3',
- title: {
- text: data.y_axis
- }
- },
- series: series_data
- };
-
- if(data.chart_type == 'stack column') {
- chartoptions.plotOptions = {
- column: {
- stacking: 'normal'
- }
- };
- chartoptions.tooltip = {
- formatter: function() {
- return '<b>'+ this.x +'</b><br/>'+
- this.series.name +': '+ this.y +'<br/>'+
- 'Total: '+ this.point.stackTotal + '<br/>'+
- '%: '+ this.point.percentage.toFixed(2) +'%';
- }
- };
- chartoptions.chart.type = 'column';
- }
- else if(data.chart_type == 'combination') {
- chartoptions.chart.type = '';
- }
- var chartid = new Highcharts.Chart(chartoptions);
-
- return chartid;
-}
-
-function findMin(series){
- var Min = series[0].data.min();
- _.each(series, function(obj){
- if(obj.data.min() < Min) {
- Min = obj.data.min();
- }
- });
- return Min;
-}
-function findMax(series){
- var Max = series[0].data.max();
- _.each(series, function(obj){
- if(obj.data.max() > Max) {
- Max = obj.data.max();
- }
- });
- return Max;
-}
-
-function writeLTVData(){
- $('body').append("<div id='ltv'></div>");
- $('#ltv').html('<br>Gold | LTV | uid | Country | Gender | Source | Starttime | Lasttime | MaxMilestone<br><br>');
- _.each(ltv, function(entry){
- _.each(entry, function(vals){
- $('#ltv').append(vals+" | ");
- });
- $('#ltv').append('<br>');
- });
-}
-</script>
-<select id="chart_selector" style="position:fixed;top:20;right:20;z-index:10;">
-</select>
-</body>
+ <head>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
+ <script src="js/underscore.js" type="text/javascript"></script>
+ <script src="js/highcharts.src.js" type="text/javascript"></script>
+ <script src="js/chart.js" type="text/javascript"></script>
+ <title>Charting</title>
+ </head>
+ <body>
+ <script type="text/javascript">
+ var data = <?php echo $json_data; ?>;
+ var ltv = <?php if($LTV_data)
+ echo json_encode($LTV_data);
+ else
+ echo 'undefined';?>;
+
+ </script>
+ <select id="chart_selector" style="position:fixed;top:20;right:20;z-index:10;">
+ </select>
+ </body>
</html>

No commit comments for this range

Something went wrong with that request. Please try again.