Login   Register  
PHP Classes
elePHPant
Icontem

File: demos/002.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Tom Schaefer  >  d3  >  demos/002.php  >  Download  
File: demos/002.php
Role: Example script
Content type: text/plain
Description: live bar chart
Class: d3
Output charts using D3.js JavaScript library
Author: By
Last change: update
Date: 2 years ago
Size: 4,332 bytes
 

Contents

Class file image Download
<?php 
include_once "../d3.classes.inc.php";
?>
<a href="http://mbostock.github.com/d3/tutorial/bar-1.html">
    A Bar Chart 1
</a>

<hr>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.2"></script>
<style>
.chart div {
   font: 10px sans-serif;
   background-color: steelblue;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
}
.chart rect {
   stroke: white;
      fill: steelblue;
}
</style>

<script>
// definition

<?php
  
# create data
  # hack, php has no literal object
  
$data d3::variable(
    
f3()->add(d3::concat("return "d3()->range(10)->map(
            
f3("i")->add(d3::concat("return "o3(array("x" => d3::concat("i","/"9) , "y"=> d3::unescape(Math()->random())))))
    ))), 
"data"
  
);

  echo 
$data;
?>

var d = data();
console.log(d);

<?php
  
  $data 
d3::variable(
    array(
4815162342)
                , 
'data'
  
);
  echo 
$data;
?>

<?php 
  
# create x
  
$x d3::variable(
      
d3()
        ->
scale(d3::property)
        ->
linear()
        ->
domain(array(0d3()->max($data->getVar())))
        ->
range(array(0,420))
      , 
"x"
  
);
  echo 
$x;
?>

<?php
  
# create y
  
$y d3::variable(
    
d3()
      ->
scale(d3::property)
      ->
ordinal()
      ->
domain($data->getVar())
      ->
rangeBands(array(0,120))
    , 
"y"
  
);
  echo 
$y;
  
?>


<?php   
  
# create hr element
   
echo d3()->select("body")->append("hr");
?>


<?php 
  
# first chart  
  
$d = new d3();
  
$d->select("body")
    ->
append("div")
    ->
attr("class""chart")
    ->
selectAll("div")
    ->
data($data->getVar())
    ->
enter()
    ->
append("div")
    ->
style("width", function ($d){ return $d 10 "px";})
    ->
text(function($d){ return $d;})
    ;
   echo 
$d;
  
?>

<?php   
  
# create hr element
   
echo d3()->select("body")->append("hr");
?>


<?php 
  
# second chart
  
echo d3()->select("body")
    ->
append("svg")
    ->
attr("class""chart")
    ->
attr("width"420)
    ->
attr("height"d3::concat(20,'*''data.length'))
    ->
selectAll("rect")->data($data->getVar())
    ->
enter()->append("rect")
    ->
attr("y", function ($d$i){ return $i 20;})
    ->
attr("width"$x->getVar())
    ->
attr("height"20)
    ;


?>


<?php   
  
# create hr element
   
echo d3()->select("body")->append("hr");
?>


<?php 
  
# third chart
  
$chart d3::variable(
          
d3()->select("body")
            ->
append("svg")
              ->
attr("class""chart")
              ->
attr("width"440)
              ->
attr("height"140)
              ->
style("margin-left""32px")
            
            ->
append("g")
              ->
attr("transform""translate(10,15)")
          , 
"chart"
  
);
  echo 
$chart;

?>


<?php

  
echo d3($chart->getVar())
            ->
selectAll("line")
              ->
datad3$x->getVar() )->ticks(10))
              ->
enter()->append("line")
                ->
attr("x1"$x->getVar())
                ->
attr("x2"$x->getVar())
                ->
attr("y1"0)
                ->
attr("y2"120)
                ->
attr("stroke""#ccc");
  
?>


<?php
               
  
echo d3($chart->getVar())                
            ->
selectAll(".rule")
              ->
datad3$x->getVar() )->ticks(10))
              ->
enter()->append("text")
              ->
attr("x"$x->getVar())
              ->
attr("y"0)
              ->
attr("dy", -3)
              ->
attr("text-anchor""middle")
              ->
text(d3::variable("String"));

?>


<?php
              
  
echo d3($chart->getVar())
            ->
selectAll("rect")
              ->
data($data->getVar())
              ->
enter()->append("rect")
                ->
attr("y"$y->getVar())
                ->
attr("width"$x->getVar())
                ->
attr("height"d3($y->getVar())->rangeBand() );
?>


<?php 

  
echo d3($chart->getVar())
      ->
selectAll(".bar")
        ->
data($data->getVar())
      ->
enter()->append("text")
        ->
attr("class""bar")
                ->
attr("x"$x->getVar())
                ->
attr("y", function($d) {return $y($d) + $y->rangeBand() / 2;})
                ->
attr("dx", -3)
                ->
attr("dy"".35em")
                ->
attr("text-anchor""end")
                ->
text(d3::variable("String"));

?>


<?php

echo d3($chart->getVar())                
              ->
append("line")
              ->
attr("y1"0)
              ->
attr("y2"120)
              ->
style("stroke""#000")
            ;


?>


</script>