Untitled

<?php

        //graphdata1,2,3,4,5 contain all the appropriate data but removed for privacy.

        $title1 = "Total Calls";
        $size1 = sizeof($graphdata1);

        $title2 = "Impressions";
        $size2 = sizeof($graphdata2);

        $title3 = "Clicks";
        $size3 = sizeof($graphdata3);

        $title4 = "Media Cost (£)";
        $size4 = sizeof($graphdata4);

        $title5 = "Unanswered Calls";
        $size5 = sizeof($graphdata5);

        $color = "0F9DDD";
        $width = "500";
        $height = "300";

        ?>


        <html>
  <head>
  <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.

      function drawChart() {
          drawChart1();
          drawChart2();
          drawChart3();
          drawChart4();
          drawChart5();

      }


      function drawChart1() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Client');
        data.addColumn('number', 'Total Calls');
        data.addRows([

        <?php
        for($x=0;$x<$size1-1;$x++) {

            echo "['".$graphdata1[$x][0]."', ".$graphdata1[$x][1]."],";

        }

        echo "['".$graphdata1[$size1-1][0]."', ".$graphdata1[$size1-1][1]."]";
        echo "]);";


        ?>

        // Set chart options
        var options1 = {'title':'<?php echo $title1; ?>',
                       'width':<?php echo $width; ?>,
                       'height':<?php echo $height; ?>,
                       'legend': { position: 'none' },
                       'colors': ['<?php echo $color; ?>'],
                       'fontName': 'Myriad Web Pro',
                       'chma' : '20,15,20,20',
                       'chartArea': { left: 150, width: 400}


                       };

        // Instantiate and draw our chart, passing in some options.
        var chart1 = new google.visualization.BarChart(document.getElementById('1g'));
        chart1.draw(data, options1);
      }


       function drawChart2() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Client');
        data.addColumn('number', 'Impressions');
        data.addRows([

        <?php
        for($x=0;$x<$size2-1;$x++) {

            echo "['".$graphdata2[$x][0]."', ".$graphdata2[$x][1]."],";

        }

        echo "['".$graphdata2[$size2-1][0]."', ".$graphdata2[$size2-1][1]."]";
        echo "]);";


        ?>

        // Set chart options
        var options2 = {'title':'<?php echo $title2; ?>',
                       'width':<?php echo $width; ?>,
                       'height':<?php echo $height; ?>,
                       'legend': { position: 'none' },
                       'colors': ['<?php echo $color; ?>'],
                       'fontName': 'Myriad Web Pro',
                       'chma' : '20,15,20,20',
                       'chartArea': { left: 150, width: 400}


                       };

        // Instantiate and draw our chart, passing in some options.
        var chart2 = new google.visualization.BarChart(document.getElementById('2g'));
        chart2.draw(data, options2);
      }


               function drawChart3() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Client');
        data.addColumn('number', 'Clicks');
        data.addRows([

        <?php
        for($x=0;$x<$size3-1;$x++) {

            echo "['".$graphdata3[$x][0]."', ".$graphdata3[$x][1]."],";

        }

        echo "['".$graphdata3[$size3-1][0]."', ".$graphdata3[$size3-1][1]."]";
        echo "]);";


        ?>

        // Set chart options
        var options3 = {'title':'<?php echo $title3; ?>',
                       'width':<?php echo $width; ?>,
                       'height':<?php echo $height; ?>,
                       'legend': { position: 'none' },
                       'colors': ['<?php echo $color; ?>'],
                       'fontName': 'Myriad Web Pro',
                       'chma' : '20,15,20,20',
                       'chartArea': { left: 150, width: 400}


                       };

        // Instantiate and draw our chart, passing in some options.
        var chart3 = new google.visualization.BarChart(document.getElementById('3g'));
        chart3.draw(data, options3);
      }


               function drawChart4() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Client');
        data.addColumn('number', 'Media Cost');
        data.addRows([

        <?php
        for($x=0;$x<$size4-1;$x++) {

            echo "['".$graphdata4[$x][0]."', ".$graphdata4[$x][1]."],";

        }

        echo "['".$graphdata4[$size4-1][0]."', ".$graphdata4[$size4-1][1]."]";
        echo "]);";


        ?>
        var formatter = new google.visualization.NumberFormat({
            prefix: '£'
        });
        formatter.format(data,1);

        // Set chart options
        var options4 = {'title':'<?php echo $title4; ?>',
                       'width':<?php echo $width; ?>,
                       'height':<?php echo $height; ?>,
                       'legend': { position: 'none' },
                       'colors': ['<?php echo $color; ?>'],
                       'fontName': 'Myriad Web Pro',
                       'chma' : '20,15,20,20',
                       'chartArea': { left: 150, width: 400}


                       };

        // Instantiate and draw our chart, passing in some options.
        var chart4 = new google.visualization.BarChart(document.getElementById('4g'));
        chart4.draw(data, options4);
      }


               function drawChart5() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Client');
        data.addColumn('number', 'Unanswered Calls');
        data.addRows([

        <?php
        for($x=0;$x<$size5-1;$x++) {

            echo "['".$graphdata5[$x][0]."', ".$graphdata5[$x][1]."],";

        }

        echo "['".$graphdata5[$size5-1][0]."', ".$graphdata5[$size5-1][1]."]";
        echo "]);";


        ?>

        // Set chart options
        var options5 = {'title':'<?php echo $title5; ?>',
                       'width':<?php echo $width; ?>,
                       'height':<?php echo $height; ?>,
                       'legend': { position: 'none' },
                       'colors': ['<?php echo $color; ?>'],
                       'fontName': 'Myriad Web Pro',
                       'chma' : '20,15,20,20',
                       'chartArea': { left: 150, width: 400}


                       };

        // Instantiate and draw our chart, passing in some options.
        var chart5 = new google.visualization.BarChart(document.getElementById('5g'));
        chart5.draw(data, options5);
      }


    </script>
  </head>

  <body style="background:transparent">
    <!--Div that will hold the pie chart-->
    <div id="1"><div id="1g"></div></div>
    <div id="2"><div id="2g"></div></div>
    <div id="3"><div id="3g"></div></div>
    <div id="4"><div id="4g"></div></div>
    <div id="5"><div id="5g"></div></div>

  </body>
</html>