How to make scatter chart like github punch card
REQUEST: would some like to do a demo of a scatter chart like this: github punch card, email me a link and I’ll add you to the tutorials page
All colours taken from http://github.com/why/potion/graphs/punch_card website.
Download scatter chart PHP5 example file by WebASP
Download ofc_charts_scatter lib/OFC/Charts/OFC_Charts_Scatter.php file by WebASP
Download scatter chart JSON data file file by WebASP
Here is sample demo page for show case: Demo of github style punch card graph
You have to add new method in lib/OFC/Charts/OFC_Charts_Scatter.php
function set_default_dot_style( $style )
{
$this->{'dot-style'}= $style;
}
PHP code for github punch card style
require_once('OFC/OFC_Chart.php');
$chart = new OFC_Chart();
$title = new OFC_Elements_Title( "github punch card" );
$chart->set_title( $title );
$scatter = new OFC_Charts_Scatter( '#333333', 2 );
$scatter->set_default_dot_style(array("type"=>"solid-dot", "dot-size"=> 2,"tip"=>"#size# Commit"));
$x_data = "0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23";
$y_data= "0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6";
$size_data = "1,2,0,0,0,0,1,0,2,0,0,0,5,2,6,2,3,2,0,0,1,5,4,1,3,1,0,0,0,0,0,1,1,3,5,4,13,4,3,7,3,0,0,1,3,9,14,5,4,0,0,0,0,1,1,4,2,6,6,10,1,4,11,11,6,0,1,3,4,7,9,13,2,0,0,0,0,0,0,6,7,4,5,6,2,2,3,4,6,1,3,2,2,8,5,7,5,2,2,3,0,0,4,9,2,9,5,6,3,3,4,4,7,4,2,0,3,8,7,9,6,0,2,0,0,0,0,6,3,4,3,4,1,2,5,3,2,0,0,0,2,3,6,5,2,4,0,0,0,0,2,6,8,5,2,1,3,0,1,4,1,1,1,0,1,1,6,3";
$x_data = explode(",",$x_data);
$y_data = explode(",",$y_data);
$size_data = explode(",",$size_data);
for($i=0;$i
$value[] = new OFC_Charts_Scatter_Value( $x_data[$i], $y_data[$i],$size_data[$i] );
}
$scatter->set_values($value);
$chart->add_element( $scatter );
$x = new OFC_Elements_Axis_X();
$x->set_colours(”#707070″,”#EFEFEF”);
$x_lable = “12am|1|2|3|4|5|6|7|8|9|10|11|12pm|1|2|3|4|5|6|7|8|9|10|11″;
$x_lable = explode(”|”,$x_lable);
$x->set_labels_from_array( $x_lable );
$chart->set_x_axis( $x );
$y = new OFC_Elements_Axis_Y();
$y->set_colours(”#707070″,”#EFEFEF”);
$y_label = ‘Sat,Fri,Thu,Wed,Tue,Mon,Sun’;
$y_label = explode(”,”,$y_label);
$y->set_labels( $y_label );
$y->set_offset(1);
$chart->add_y_axis( $y );
$chart->set_bg_colour(”#EFEFEF”);
echo $chart->toPrettyString();
?>
Sample JSON data:
{
"elements": [
{
"type": "scatter",
"colour": "#333333",
"dot-style": {"type": "solid-dot", "dot-size": 2,"tip":"#size# Commit"},
"values": [
{"dot-size":1,"x":0,"y":0},{"dot-size":2,"x":1,"y":0},{"dot-size":0,"x":2,"y":0},{"dot-size":0,"x":3,"y":0},{"dot-size":0,"x":4,"y":0},{"dot-size":0,"x":5,"y":0},{"dot-size":1,"x":6,"y":0},{"dot-size":0,"x":7,"y":0},{"dot-size":2,"x":8,"y":0},{"dot-size":0,"x":9,"y":0},{"dot-size":0,"x":10,"y":0},{"dot-size":0,"x":11,"y":0},{"dot-size":5,"x":12,"y":0},{"dot-size":2,"x":13,"y":0},{"dot-size":6,"x":14,"y":0},{"dot-size":2,"x":15,"y":0},{"dot-size":3,"x":16,"y":0},{"dot-size":2,"x":17,"y":0},{"dot-size":0,"x":18,"y":0},{"dot-size":0,"x":19,"y":0},{"dot-size":1,"x":20,"y":0},{"dot-size":5,"x":21,"y":0},{"dot-size":4,"x":22,"y":0},{"dot-size":1,"x":23,"y":0},{"dot-size":3,"x":0,"y":1},{"dot-size":1,"x":1,"y":1},{"dot-size":0,"x":2,"y":1},{"dot-size":0,"x":3,"y":1},{"dot-size":0,"x":4,"y":1},{"dot-size":0,"x":5,"y":1},{"dot-size":0,"x":6,"y":1},{"dot-size":1,"x":7,"y":1},{"dot-size":1,"x":8,"y":1},{"dot-size":3,"x":9,"y":1},{"dot-size":5,"x":10,"y":1},{"dot-size":4,"x":11,"y":1},{"dot-size":13,"x":12,"y":1},{"dot-size":4,"x":13,"y":1},{"dot-size":3,"x":14,"y":1},{"dot-size":7,"x":15,"y":1},{"dot-size":3,"x":16,"y":1},{"dot-size":0,"x":17,"y":1},{"dot-size":0,"x":18,"y":1},{"dot-size":1,"x":19,"y":1},{"dot-size":3,"x":20,"y":1},{"dot-size":9,"x":21,"y":1},{"dot-size":14,"x":22,"y":1},{"dot-size":5,"x":23,"y":1},{"dot-size":4,"x":0,"y":2},{"dot-size":0,"x":1,"y":2},{"dot-size":0,"x":2,"y":2},{"dot-size":0,"x":3,"y":2},{"dot-size":0,"x":4,"y":2},{"dot-size":1,"x":5,"y":2},{"dot-size":1,"x":6,"y":2},{"dot-size":4,"x":7,"y":2},{"dot-size":2,"x":8,"y":2},{"dot-size":6,"x":9,"y":2},{"dot-size":6,"x":10,"y":2},{"dot-size":10,"x":11,"y":2},{"dot-size":1,"x":12,"y":2},{"dot-size":4,"x":13,"y":2},{"dot-size":11,"x":14,"y":2},{"dot-size":11,"x":15,"y":2},{"dot-size":6,"x":16,"y":2},{"dot-size":0,"x":17,"y":2},{"dot-size":1,"x":18,"y":2},{"dot-size":3,"x":19,"y":2},{"dot-size":4,"x":20,"y":2},{"dot-size":7,"x":21,"y":2},{"dot-size":9,"x":22,"y":2},{"dot-size":13,"x":23,"y":2},{"dot-size":2,"x":0,"y":3},{"dot-size":0,"x":1,"y":3},{"dot-size":0,"x":2,"y":3},{"dot-size":0,"x":3,"y":3},{"dot-size":0,"x":4,"y":3},{"dot-size":0,"x":5,"y":3},{"dot-size":0,"x":6,"y":3},{"dot-size":6,"x":7,"y":3},{"dot-size":7,"x":8,"y":3},{"dot-size":4,"x":9,"y":3},{"dot-size":5,"x":10,"y":3},{"dot-size":6,"x":11,"y":3},{"dot-size":2,"x":12,"y":3},{"dot-size":2,"x":13,"y":3},{"dot-size":3,"x":14,"y":3},{"dot-size":4,"x":15,"y":3},{"dot-size":6,"x":16,"y":3},{"dot-size":1,"x":17,"y":3},{"dot-size":3,"x":18,"y":3},{"dot-size":2,"x":19,"y":3},{"dot-size":2,"x":20,"y":3},{"dot-size":8,"x":21,"y":3},{"dot-size":5,"x":22,"y":3},{"dot-size":7,"x":23,"y":3},{"dot-size":5,"x":0,"y":4},{"dot-size":2,"x":1,"y":4},{"dot-size":2,"x":2,"y":4},{"dot-size":3,"x":3,"y":4},{"dot-size":0,"x":4,"y":4},{"dot-size":0,"x":5,"y":4},{"dot-size":4,"x":6,"y":4},{"dot-size":9,"x":7,"y":4},{"dot-size":2,"x":8,"y":4},{"dot-size":9,"x":9,"y":4},{"dot-size":5,"x":10,"y":4},{"dot-size":6,"x":11,"y":4},{"dot-size":3,"x":12,"y":4},{"dot-size":3,"x":13,"y":4},{"dot-size":4,"x":14,"y":4},{"dot-size":4,"x":15,"y":4},{"dot-size":7,"x":16,"y":4},{"dot-size":4,"x":17,"y":4},{"dot-size":2,"x":18,"y":4},{"dot-size":0,"x":19,"y":4},{"dot-size":3,"x":20,"y":4},{"dot-size":8,"x":21,"y":4},{"dot-size":7,"x":22,"y":4},{"dot-size":9,"x":23,"y":4},{"dot-size":6,"x":0,"y":5},{"dot-size":0,"x":1,"y":5},{"dot-size":2,"x":2,"y":5},{"dot-size":0,"x":3,"y":5},{"dot-size":0,"x":4,"y":5},{"dot-size":0,"x":5,"y":5},{"dot-size":0,"x":6,"y":5},{"dot-size":6,"x":7,"y":5},{"dot-size":3,"x":8,"y":5},{"dot-size":4,"x":9,"y":5},{"dot-size":3,"x":10,"y":5},{"dot-size":4,"x":11,"y":5},{"dot-size":1,"x":12,"y":5},{"dot-size":2,"x":13,"y":5},{"dot-size":5,"x":14,"y":5},{"dot-size":3,"x":15,"y":5},{"dot-size":2,"x":16,"y":5},{"dot-size":0,"x":17,"y":5},{"dot-size":0,"x":18,"y":5},{"dot-size":0,"x":19,"y":5},{"dot-size":2,"x":20,"y":5},{"dot-size":3,"x":21,"y":5},{"dot-size":6,"x":22,"y":5},{"dot-size":5,"x":23,"y":5},{"dot-size":2,"x":0,"y":6},{"dot-size":4,"x":1,"y":6},{"dot-size":0,"x":2,"y":6},{"dot-size":0,"x":3,"y":6},{"dot-size":0,"x":4,"y":6},{"dot-size":0,"x":5,"y":6},{"dot-size":2,"x":6,"y":6},{"dot-size":6,"x":7,"y":6},{"dot-size":8,"x":8,"y":6},{"dot-size":5,"x":9,"y":6},{"dot-size":2,"x":10,"y":6},{"dot-size":1,"x":11,"y":6},{"dot-size":3,"x":12,"y":6},{"dot-size":0,"x":13,"y":6},{"dot-size":1,"x":14,"y":6},{"dot-size":4,"x":15,"y":6},{"dot-size":1,"x":16,"y":6},{"dot-size":1,"x":17,"y":6},{"dot-size":1,"x":18,"y":6},{"dot-size":0,"x":19,"y":6},{"dot-size":1,"x":20,"y":6},{"dot-size":1,"x":21,"y":6},{"dot-size":6,"x":22,"y":6},{"dot-size":3,"x":23,"y":6}
]
}
],
“title”: {
“text”: “github punch card”
},
“x_axis”: {
“labels”: { “labels”: [ "12am","1","2","3","4","5","6","7","8","9","10","11","12pm","1","2","3","4","5","6","7","8","9","10","11" ] },
“colour”: “#707070″,
“grid-colour”: “#EFEFEF”
},
“y_axis”: {
“offset”: 1,
“colour”: “#707070″,
“grid-colour”: “#EFEFEF”,
“labels”: [ "Sat", "Fri", "Thu", "Wed", "Tue", "Mon","Sun" ]
},
“bg_colour”:”#EFEFEF”
}
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
sweeeet! thanks. looks good