Untitled

<html>
<head>
<script src="Chart.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
var res = '<html><head></head>'
+ '<body><div>'
  + '<div name="DE.Tech.voice">'
    + '<ININ.Workgroup_NumberAvailableForACDInteractions>10</ININ.Workgroup_NumberAvailableForACDInteractions>'
    + '<ININ.Workgroup_InteractionsWaiting>9</ININ.Workgroup_InteractionsWaiting>'
    + '<ININ.Workgroup_OnInboundACDInteractions>10</ININ.Workgroup_OnInboundACDInteractions>'
  + '</div>'
  + '<div name="DE.Commercial.voice">'
    + '<ININ.Workgroup_NumberAvailableForACDInteractions>10</ININ.Workgroup_NumberAvailableForACDInteractions>'
    + '<ININ.Workgroup_InteractionsWaiting>9</ININ.Workgroup_InteractionsWaiting>'
    + '<ININ.Workgroup_OnInboundACDInteractions>10</ININ.Workgroup_OnInboundACDInteractions>'
  + '</div>'
  + '<div name="DE.Acq.Voice">'
    + '<ININ.Queue_Interval name="CurrentShift">'
      + '<ININ.Workgroup_InteractionsCompleted>12</ININ.Workgroup_InteractionsCompleted>'
      + '<ININ.Workgroup_InteractionsAnswered>11</ININ.Workgroup_InteractionsAnswered>'
    + '</ININ.Queue_Interval>'
  + '</div>'
  + '<div name="DE.Freischaltung.Voice">'
    + '<ININ.Queue_Interval name="CurrentShift">'
      + '<ININ.Workgroup_InteractionsCompleted>10</ININ.Workgroup_InteractionsCompleted>'
      + '<ININ.Workgroup_InteractionsAnswered>9</ININ.Workgroup_InteractionsAnswered>'
    + '</ININ.Queue_Interval>'
  + '</div>'
  + '<div name="DE.Aust.Tech.voice">'
    + '<ININ.Queue_Interval name="CurrentShift">'
      + '<ININ.Workgroup_InteractionsCompleted>8</ININ.Workgroup_InteractionsCompleted>'
      + '<ININ.Workgroup_InteractionsAnswered>7</ININ.Workgroup_InteractionsAnswered>'
    + '</ININ.Queue_Interval>'
  + '</div>'
  + '<div name="DE.Aust.Commercial.voice">'
    + '<ININ.Queue_Interval name="CurrentShift">'
      + '<ININ.Workgroup_InteractionsCompleted>6</ININ.Workgroup_InteractionsCompleted>'
      + '<ININ.Workgroup_InteractionsAnswered>5</ININ.Workgroup_InteractionsAnswered>'
    + '</ININ.Queue_Interval>'
  + '</div>'
  + '<div name="DE.Partner.Voice">'
    + '<ININ.Queue_Interval name="CurrentShift">'
      + '<ININ.Workgroup_InteractionsCompleted>4</ININ.Workgroup_InteractionsCompleted>'
      + '<ININ.Workgroup_InteractionsAnswered>3</ININ.Workgroup_InteractionsAnswered>'
    + '</ININ.Queue_Interval>'
  + '</div>'
  + '<div name="DE.PartnerCommercial.Voice">'
    + '<ININ.Queue_Interval name="CurrentShift">'
      + '<ININ.Workgroup_InteractionsCompleted>2</ININ.Workgroup_InteractionsCompleted>'
      + '<ININ.Workgroup_InteractionsAnswered>1</ININ.Workgroup_InteractionsAnswered>'
    + '</ININ.Queue_Interval>'
  + '</div>'
+ '</div></body></html>';

// ab hier

var myChart;

$(document).ready(function() {
  var ctx = document.getElementById("container");
  myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Tech", "Commercial", "Acq", "Freischaltung", "Aust.Tech", "Aust.Commercial", "Partner", "PartnerCommercial"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3, 3, 5],
        backgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)',
          'rgba(75, 192, 192, 0.7)',
          'rgba(153, 102, 255, 0.7)',
          'rgba(75, 192, 192, 0.7)',
          'rgba(153, 102, 255, 0.7)',
          'rgba(255, 159, 64, 0.7)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  });

  updateChart();
});

function find(array, string) {
  var result;
  Object.keys(array).forEach(function(key){
    if($(array[key])[0] && $(array[key])[0].localName === string.toLowerCase()) {
      result = array[key].innerHTML;
    }
  });
  return result;
}

function updateChart() {
  //$.get("http://cosnprccs5/IWP/Marquee/p/DE_Test1/proxy.ashx", function(res) {
  res = $(res);
  myChart.data.datasets[0].data[0] = find(res.find('[name="DE.Tech.voice"]').children(), 'ININ.Workgroup_InteractionsWaiting');
  myChart.data.datasets[0].data[1] = find(res.find('[name="DE.Commercial.voice"]').children(), 'ININ.Workgroup_OnInboundACDInteractions');
  myChart.data.datasets[0].data[2] = res.find('[name="DE.Acq.Voice"] [name="CurrentShift"]').children()[0].innerHTML;
  myChart.data.datasets[0].data[3] = res.find('[name="DE.Freischaltung.Voice"] [name="CurrentShift"]').children()[1].innerHTML;
  myChart.data.datasets[0].data[4] = res.find('[name="DE.Aust.Tech.voice"] [name="CurrentShift"]').children()[0].innerHTML;
  myChart.data.datasets[0].data[5] = res.find('[name="DE.Aust.Commercial.voice"] [name="CurrentShift"]').children()[0].innerHTML;
  myChart.data.datasets[0].data[6] = res.find('[name="DE.Partner.Voice"] [name="CurrentShift"]').children()[0].innerHTML;
  myChart.data.datasets[0].data[7] = res.find('[name="DE.PartnerCommercial.Voice"] [name="CurrentShift"]').children()[0].innerHTML;

  myChart.update();
  //});
}
setInterval(updateChart(), 5000);
</script>
</head>
<body>
<canvas id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></canvas>
</body>
</html>