<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Country of death</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="highcharts/js/highcharts.js"></script>
    
    <!-- 1a) Optional: add a theme file -->
    <!--
      <script type="text/javascript" src="highcharts/js/themes/dark-blue.js"></script>
    -->
    
    <!-- 1b) Optional: the exporting module -->
    <script type="text/javascript" src="highcharts/js/modules/exporting.js"></script>
      
    <!-- 2. Add the JavaScript to initialize the chart on document ready -->
    <script type="text/javascript">
      $(document).ready(function() {

        <?php 
          
// Build the SPARQL query
          // Note that, because we need to perform a cross-domain POST, we need to do this in a scripting language
          // as we run into the cross-domain restriction if we use javascript.
          
$sparql '
            PREFIX awm:<http://muse.aucklandmuseum.com/databases/cenotaph#>

            SELECT *
            WHERE
            {
               {
                  SELECT ?namePosition (COUNT(?namePosition) AS ?numberDied)
                  WHERE {
                    ?person awm:diedAt_country ?diedAt .
                    ?diedAt awm:addressConstitutedOf ?addressConstitutedOf .
                    ?addressConstitutedOf awm:namePosition ?namePosition .
                  }
                  GROUP BY ?namePosition
                  HAVING (COUNT(?namePosition) > 3)
                  ORDER BY DESC(?numberDied) ?namePosition
               }
            UNION
               {
                  SELECT ?namePosition (COUNT(?numberDied) as ?numberDied)
                  WHERE
                  {
                     SELECT ?namePosition (COUNT(?namePosition) AS ?numberDied)
                     WHERE {
                       ?person awm:diedAt_country ?diedAt .
                       ?diedAt awm:addressConstitutedOf ?addressConstitutedOf .
                       ?addressConstitutedOf awm:namePosition ?nameOfPosition .
                       BIND ( "Other" AS ?namePosition)
                     }
                     GROUP BY ?nameOfPosition ?namePosition
                     HAVING (COUNT(?namePosition) <= 3)
                     ORDER BY DESC(?numberDied) ?namePosition
                  }
                  GROUP BY ?namePosition
               }
            }'
;

          
// retrieve the results of the SPARQL query.
          
include 'retrieve_sparql.php';
        
?>
 
        /* We need to translate something like the following results returned by our triplestore...
        var dataset = {
          "head": {
            "vars": [ "namePosition", "numberDied" ]
          }, 
          "results": {
            "bindings": [
              {
                "namePosition": { "type": "literal", "value": "Turkey_Gallipoli" }, 
                "numberDied": { "type": "typed-literal", "datatype": "http:\/\/www.w3.org\/2001\/XMLSchema#integer", "value": "4" }
              }, 
              {
                "namePosition": { "type": "literal", "value": "United Kingdom" }, 
                "numberDied": { "type": "typed-literal", "datatype": "http:\/\/www.w3.org\/2001\/XMLSchema#integer", "value": "1" }
              }
            ]
          }
        }
        */
        
        /* ... to something like this:
        var series = {
          data: [
            ['mother',   5],
            {
              name: 'father',    
              y: 9,
              sliced: true,
              selected: true
            },
            ['wife',    4],
            ['sister',   1]
          ] 
        };
        */ 

        var series = {
          data: [
          ]
        };

        /* find the largest data value */
        var biggest = 0;
        var biggestItemNo = 0;
        $.each(dataset.results.bindings, function(itemNo, item) {
          if (parseInt(item['numberDied'].value) > biggest) {
            biggest = parseInt(item['numberDied'].value);
            biggestItemNo = itemNo;
          }
        });

        /* load the data values into the array */
        $.each(dataset.results.bindings, function(itemNo, item) {
          if (itemNo == biggestItemNo) {
            series.data.push({name: item['namePosition'].value, y : parseInt(item['numberDied'].value), sliced: true, selected: true});
          } else {
            series.data.push([item['namePosition'].value, parseInt(item['numberDied'].value)]);
          }
        });

        /* set the options and create the chart */
        var options = {
          chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
          },
          title: {
            text: 'Country of death'
          },
          tooltip: {
            formatter: function() {
              return '<b>'+ this.point.name +'</b>: '+ this.point.y + ' personnel (' + Math.round(this.percentage * 100) / 100 +' %)';
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: true
              },
              showInLegend: true
            }
          },
          series: [{
            type: 'pie',
            name: 'Country of death',
            data: series.data
          }]
        };

        var chart = new Highcharts.Chart(options);
    });        
    </script>

    <!-- http://www.adipalaz.com/experiments/jquery/expand.html -->
    <script type="text/javascript" src="scripts/expand.js"></script>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    $(function() {
        // --- Using the default options:
        $("h2.expand").toggler();
        // --- Other options:
        //$("h2.expand").toggler({method: "toggle", speed: 0});
        //$("h2.expand").toggler({method: "toggle"});
        //$("h2.expand").toggler({speed: "fast"});
        //$("h2.expand").toggler({method: "fadeToggle"});
        //$("h2.expand").toggler({method: "slideFadeToggle"});    
        $("#content").expandAll({trigger: "h2.expand", ref: "div.demo", localLinks: "p.top a"});
    });
    //--><!]]>
    </script>    

  </head>
  <body>
    <div id="content">
      <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
      <h2 class="expand">Query</h2>
      <div class="collapse" id="query">
        <?php
          
// load the SPARQL query into a div for the user to see.
          
$sparqlEscaped preg_replace('/</''&lt;'$sparql);
          
$sparqlEscaped preg_replace('/>/''&gt;'$sparqlEscaped);
          echo 
"<pre>$sparqlEscaped</pre>";
        
?>      
      </div>
      <h2 class="expand">Results</h2>
      <div class="collapse" id="results">
        <?php
          
// load the SPARQL query results into a div for the user to see.
          
echo "<pre>$contents</pre>"
        
?>
      </div>
      <p class="home"><a href="../">Home</a></p>
    </div>
  </body>
</html>