Untitled

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

  $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "ChartData.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('Pie').each(function() {
                    var sTitle = $(this).find('Title').text();
                    var sValue = $(this).find('Value').text();

                    alert (sTitle + sValue);
                });
            },
            error: function() {
                alert("An error occurred while processing XML file.");
            }
        });
    });

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

<title>My Read</title>
</head>

<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

<?xml version="1.0" encoding="utf-8" ?>
    <Chart>
      <Pie>
         <Title>Work</Title>
         <Value>11</Value>
      </Pie>
      <Pie>
         <Title>Eat</Title>
         <Value>2</Value>
      </Pie>
      <Pie>
         <Title>Commute</Title>
         <Value>2</Value>
      </Pie>
      <Pie>
         <Title>Watch TV</Title>
         <Value>2</Value>
      </Pie>
      <Pie>
         <Title>Sleep</Title>
         <Value>7</Value>
      </Pie>
    </Chart>