title: Sharepoint : Google webchart not appearing from list?
body: <p>I got sharepoint online working under O365, In our home page we need a chart showing the summary of our list data</p>
  <p>I am trying to follow the below steps in my list
  <a href="https://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/" rel="nofollow noreferrer">https://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/</a></p>
  <pre><code>&amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
  &amp;lt;script src=&quot;https://www.gstatic.com/charts/loader.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;lt;/script&amp;gt;
  &amp;lt;script src=&quot;https://code.jquery.com/jquery-3.0.0.min.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;lt;/script&amp;gt;
  &amp;lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;lt;/script&amp;gt;
  &amp;lt;script language=&quot;javascript&quot;&amp;gt;
  var returnedItems = null;
  function loadGoogleLibAndDraw(){
  google.charts.load('current', {'packages':['bar','line']});
  google.charts.setOnLoadCallback(visualizeData);
  }
  function visualizeData() {
  var context = new SP.ClientContext();
  var list = context.get_web().get_lists().getByTitle(document.getElementById('Project Issues').value);
  var caml = new SP.CamlQuery();
  caml.set_viewXml(&quot;&amp;lt;View&amp;gt;&amp;lt;/View&amp;gt;&quot;);
   
  returnedItems = list.getItems(caml);
  context.load(returnedItems);
  context.executeQueryAsync(onSucceededCallback, onFailedCallback);
  }
  function onSucceededCallback(sender, args) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Status');
  data.addColumn('number', 'PercentComplete');
  var enumerator = returnedItems.getEnumerator();
  var markup = '';
  while (enumerator.moveNext()) {
  var row = [];
  var listItem = enumerator.get_current();
  row.push(listItem.get_item('Status'));
  row.push(listItem.get_item('PercentComplete'));
  data.addRow(row);
  }
  var options = {
  chart: {
  title: 'Sales Trend',
  },
  bars: 'vertical'
  };
  var barChart = new google.charts.Bar(document.getElementById('BarChart'));
  barChart.draw(data, options);
   
  var lineChart = new google.charts.Line(document.getElementById('LineChart'));
  lineChart.draw(data, options);
  }
   
  function onFailedCallback(sender, args) {
  var markup = '&amp;lt;p&amp;gt;The request failed: &amp;lt;br&amp;gt;';
  markup += 'Message: ' + args.get_message() + '&amp;lt;br&amp;gt;';
  displayDiv.innerHTML = markup;
  }
  &amp;lt;/script&amp;gt;
  &amp;lt;/head&amp;gt;
   
  &amp;lt;body onload=&quot;loadGoogleLibAndDraw()&quot;&amp;gt;
  &amp;lt;form name=&quot;metricsform&quot; id=&quot;metricsform&quot;&amp;gt;
  &amp;lt;input id=&quot;customListName&quot; name=&quot;customListName&quot; value=&quot;Project Issues&quot; type=&quot;hidden&quot;/&amp;gt;
  &amp;lt;/form&amp;gt;
  &amp;lt;div&amp;gt;
  &amp;lt;div id=&quot;displayDiv&quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div id=&quot;BarChart&quot; style=&quot;width: 900px; height: 500px;&quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div id=&quot;LineChart&quot; style=&quot;width: 900px; height: 500px;&quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
  &amp;lt;/body&amp;gt;
  &amp;lt;/html&amp;gt;
  </code></pre>
  <p>I embeded the above script to my sharepoint page , replacing listname,column names but its not showing any chart from my list but giving an error as below
  <a href="https://i.stack.imgur.com/lxLRX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lxLRX.jpg" alt="enter image description here" /></a></p>
  <p>Thank you</p>