Skip to content

Instantly share code, notes, and snippets.

@cgcardona

cgcardona/php array into protovis api

Created December 13, 2010 04:31
Show Gist options
  • Save cgcardona/738656 to your computer and use it in GitHub Desktop.
Save cgcardona/738656 to your computer and use it in GitHub Desktop.
Download ZIP
making php arrays play nice with the protovis api
Raw
php array into protovis api
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Visualizing Data as a Bar Graph</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/protovis-r3.2.js"></script>
<style>
*{
font-family:helvetica;
font-weight:200;
}
.x_axis_text{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
color:#000;
float:left;
margin-top:20%;
}
.y_axis_text{
color:#000;
margin-left:20%;
}
</style>
</head>
<body>
<h1>Visualizing Data as a Bar Graph</h1>
<?php
$input1 = array(
array("Date","Quarter 1","Quarter 2", "Quarter 3"),
array(201001,4543.00,6542.00,5433.00),
array(201002,3214.00,5432.00,6544.00),
array(201003,2346.00,6541.00,6543.00),
array(201004,4327.00,3125.00,9863.00),
array(201005,8764.00,4321.00,5432.00),
array(201006,4321.00,5436.00,2345.00),
array(201007,1532.00,5431.00,9834.00),
array(201008,5437.00,5432.00,3452.00),
array(201009,4327.00,4326.00,3456.00),
array(201010,7652.00,4325.00,3456.00),
array(201011,3245.00,1234.00,2346.00),
array(201012,2341.00,4325.00,4329.00)
);
$input2 = array(
"width_pixels" => "400",
"height_pixels" => "450",
"top_pixels" => "5",
"left_pixels" => "20",
"bottom_pixels" => "20",
"right_pixels" => "10",
"upper_number" => "10000",
"bar_fill_color" => "#f00",
"value_label_color" => "#000",
"value_label_position" => "right",
"variable_label_position" => "left",
"variable_label_text_align" => "right",
"x_axis_base_tick_color" => "#000",
"x_axis_tick_color" => "#fff",
"x_axis_tick_total_count" => "10",
"x_axis_text" => "Quarter 1",
"y_axis_text" => "Dollars",
"column_to_visualize" => "Quarter 1"
);
$input3 = array(
"width_pixels" => "400",
"height_pixels" => "450",
"top_pixels" => "5",
"left_pixels" => "20",
"bottom_pixels" => "20",
"right_pixels" => "10",
"upper_number" => "10000",
"bar_fill_color" => "#0f0",
"value_label_color" => "#000",
"value_label_position" => "right",
"variable_label_position" => "left",
"variable_label_text_align" => "right",
"x_axis_base_tick_color" => "#000",
"x_axis_tick_color" => "#fff",
"x_axis_tick_total_count" => "10",
"x_axis_text" => "Quarter 2",
"y_axis_text" => "Dollars",
"column_to_visualize" => "Quarter 2"
);
$input4 = array(
"width_pixels" => "400",
"height_pixels" => "450",
"top_pixels" => "5",
"left_pixels" => "20",
"bottom_pixels" => "20",
"right_pixels" => "10",
"upper_number" => "10000",
"bar_fill_color" => "#00f",
"value_label_color" => "#000",
"value_label_position" => "right",
"variable_label_position" => "left",
"variable_label_text_align" => "right",
"x_axis_base_tick_color" => "#000",
"x_axis_tick_color" => "#fff",
"x_axis_tick_total_count" => "10",
"x_axis_text" => "Quarter 3",
"y_axis_text" => "Dollars",
"column_to_visualize" => "Quarter 3"
);
function h5_graph($a_input, $a_format) {
$width_pixels = $a_format["width_pixels"];
$height_pixels = $a_format["height_pixels"];
$top_pixels = $a_format["top_pixels"];
$bottom_pixels = $a_format["bottom_pixels"];
$left_pixels = $a_format["left_pixels"];
$right_pixels = $a_format["right_pixels"];
$upper_number = $a_format["upper_number"];
$bar_fill_color = $a_format["bar_fill_color"];
$value_label_color = $a_format["value_label_color"];
$value_label_position = $a_format["value_label_position"];
$variable_label_position = $a_format["variable_label_position"];
$variable_label_text_align = $a_format["variable_label_text_align"];
$x_axis_base_tick_color = $a_format["x_axis_base_tick_color"];
$x_axis_tick_color = $a_format["x_axis_tick_color"];
$x_axis_tick_total_count = $a_format["x_axis_tick_total_count"];
$x_axis_text = $a_format["x_axis_text"];
$y_axis_text = $a_format["y_axis_text"];
$name = $a_format["column_to_visualize"];
$headers = array_shift($a_input);
$index = array_search($name, $headers);
if ($index === false) return;
$term = array();
foreach($a_input as $element) { $term[] = $element[$index]; }
$length_of_array = count($term);
$term = implode(', ', $term);
echo "<p class='x_axis_text'>$x_axis_text</p>
<script type=\"text/javascript+protovis\">
// Sizing and scales
var x = pv.Scale.linear(0, $upper_number).range(0, $width_pixels),
y = pv.Scale.ordinal(pv.range($length_of_array)).splitBanded(0, $height_pixels, 4/5);
// The root panel
var vis = new pv.Panel()
.width($width_pixels)
.height($height_pixels)
.bottom($bottom_pixels)
.left($left_pixels)
.right($right_pixels)
.top($top_pixels);
// The bars
var bar = vis.add(pv.Bar)
.data([$term])
.top(function() y(this.index))
.height(y.range().band)
.left(0)
.fillStyle(\"$bar_fill_color\")
.width(x);
// The value label
bar.anchor(\"$value_label_position\").add(pv.Label)
.textStyle(\"$value_label_color\")
.text(function(d) d.toFixed(1));
// The variable label
bar.anchor(\"$variable_label_position\").add(pv.Label)
.textMargin(5)
.textAlign(\"$variable_label_text_align\")
.text(function() \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".charAt(this.index));
// X axis ticks
vis.add(pv.Rule)
.data(x.ticks($x_axis_tick_total_count))
.left(x)
.strokeStyle(function(d) d ? \"$x_axis_tick_color\" : \"$x_axis_base_tick_color\")
.add(pv.Rule)
.bottom(0)
.height(5)
.strokeStyle(\"#000\")
.anchor(\"bottom\").add(pv.Label)
.text(x.tickFormat);
// Visualize the goodness
vis.render();
</script>
<p class='y_axis_text'>$y_axis_text</p>";
}
h5_graph($input1, $input2);
h5_graph($input1, $input3);
h5_graph($input1, $input4);
?>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment