Difference between revisions of "Web Element: Data"


Line 184: Line 184:
 
https://docs.google.com/spreadsheets/d/1YUqF27YsO2tVdFL1R6Oxu5BT5itjA_ozZDrekzfFclk/edit?usp=sharing
 
https://docs.google.com/spreadsheets/d/1YUqF27YsO2tVdFL1R6Oxu5BT5itjA_ozZDrekzfFclk/edit?usp=sharing
  
<html lang="en" dir="ltr">
+
<html>
 
<head>
 
<head>
      <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v7edd884088d642c108fc8ea1bd75617f2dc0af2fd196f78fa8668ffffb81a7bc/developers/css/app.css">
+
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script async="" src="https://www.gstatic.com/devrel-devsite/prod/v7edd884088d642c108fc8ea1bd75617f2dc0af2fd196f78fa8668ffffb81a7bc/js/app_loader.js"></script><script>
+
     <script type="text/javascript"></script>
      (function(){
+
</head>
        window.framebox=window.framebox||function(){(window.framebox.q=window.framebox.q||[]).push(arguments)};
+
<body>
                var a={},b=function(){(window.framebox.dq=window.framebox.dq||[]).push(arguments)};
+
<div id="chart_div_3"></div>
        ['getUrl','handleLinkClicksInParent','initAutoSize','navigate','pushState','replaceState',
+
</body>
        'requestQueryAndFragment','sendEvent','updateSize'].forEach(function(x){a[x]=function(){
+
</html>
          b(x,arguments)}});
 
        window.devsite={framebox:{AutoSizeClient:a}};
 
      })();
 
            (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i;
 
        t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0];
 
        E.parentNode.insertBefore(t,E);})(window, document, 'script',
 
        'https://www.gstatic.com/devrel-devsite/prod/v7edd884088d642c108fc8ea1bd75617f2dc0af2fd196f78fa8668ffffb81a7bc/js/app_loader.js', '[1,"en",null,"/js/devsite_app.js","https://www.gstatic.com/devrel-devsite/prod/v7edd884088d642c108fc8ea1bd75617f2dc0af2fd196f78fa8668ffffb81a7bc","https://www.gstatic.com/devrel-devsite/prod/v7edd884088d642c108fc8ea1bd75617f2dc0af2fd196f78fa8668ffffb81a7bc/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,1,null,1]')
 
            </script>
 
      <script src="https://www.gstatic.com/devrel-devsite/prod/v7edd884088d642c108fc8ea1bd75617f2dc0af2fd196f78fa8668ffffb81a7bc/js/webcomponents-lite.js"></script><script src="https://www.gstatic.com/devrel-devsite/prod/v7edd884088d642c108fc8ea1bd75617f2dc0af2fd196f78fa8668ffffb81a7bc/developers/js/devsite_app.js"></script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/47/loader.js"></script><link id="load-css-0" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/47/css/core/tooltip.css"><link id="load-css-1" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/47/css/util/util.css"><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/47/js/jsapi_compiled_format_module.js"></script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/47/js/jsapi_compiled_default_module.js"></script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/47/js/jsapi_compiled_ui_module.js"></script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/47/js/jsapi_compiled_corechart_module.js"></script><script type="text/javascript" src="https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&amp;headers=1&amp;tq=SELECT%20A%2C%20H%2C%20O%2C%20Q%2C%20R%2C%20U%20LIMIT%205%20OFFSET%208&amp;tqx=reqId%3A0"></script></head>
 
     <body style="height: auto; overflow: hidden; padding: 20px;">
 
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
  <script type="text/javascript">
 
    google.charts.load('current', {packages: ['corechart']});
 
    google.charts.setOnLoadCallback(drawGID);
 
 
 
    // [START gid]
 
    function drawGID() {
 
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
 
 
 
      var query = new google.visualization.Query(
 
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
 
      query.send(handleQueryResponse);
 
    }
 
 
 
    function handleQueryResponse(response) {
 
      if (response.isError()) {
 
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 
        return;
 
      }
 
 
 
      var data = response.getDataTable();
 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
 
      chart.draw(data, { height: 400 });
 
    }
 
    // [END gid]
 
 
 
    // [START sheet_name]
 
    function drawSheetName() {
 
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
 
 
 
      var query = new google.visualization.Query(
 
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
 
      query.send(handleSampleDataQueryResponse);
 
    }
 
 
 
    function handleSampleDataQueryResponse(response) {
 
      if (response.isError()) {
 
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 
        return;
 
      }
 
 
 
      var data = response.getDataTable();
 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
 
      chart.draw(data, { height: 400 });
 
    }
 
    // [END sheet_name]
 
  </script>
 
 
 
 
 
  <div id="chart_div"><div style="position: relative;"><div dir="ltr" style="position: relative; width: 856px; height: 400px;"><div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="856" height="400" aria-label="A chart." style="overflow: hidden;"><defs id="_ABSTRACT_RENDERER_ID_0"><clipPath id="_ABSTRACT_RENDERER_ID_1"><rect x="137" y="77" width="582" height="247"></rect></clipPath><filter id="_ABSTRACT_RENDERER_ID_2"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="1" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.1"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><rect x="0" y="0" width="856" height="400" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="733" y="77" width="109" height="124" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g column-id="H"><rect x="733" y="77" width="109" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="766" y="88.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">corn meal</text></g><rect x="733" y="77" width="28" height="14" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g column-id="O"><rect x="733" y="100" width="109" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="766" y="111.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">pound cake</text></g><rect x="733" y="100" width="28" height="14" stroke="none" stroke-width="0" fill="#dc3912"></rect></g><g column-id="Q"><rect x="733" y="123" width="109" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="766" y="134.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">Milk</text></g><rect x="733" y="123" width="28" height="14" stroke="none" stroke-width="0" fill="#ff9900"></rect></g><g column-id="R"><rect x="733" y="146" width="109" height="32" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="766" y="157.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">evaporated</text><text text-anchor="start" x="766" y="175.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">milk (can)</text></g><rect x="733" y="146" width="28" height="14" stroke="none" stroke-width="0" fill="#109618"></rect></g><g column-id="U"><rect x="733" y="187" width="109" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="766" y="198.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">eggs</text></g><rect x="733" y="187" width="28" height="14" stroke="none" stroke-width="0" fill="#990099"></rect></g></g><g><rect x="137" y="77" width="582" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/spreadsheets_f5d9dfcd2809a70bf53d0168ba236b298f0ebd665e830bd4881c3e18d6078edb.frame#_ABSTRACT_RENDERER_ID_1)"><g><rect x="137" y="323" width="582" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="137" y="274" width="582" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="137" y="225" width="582" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="137" y="175" width="582" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="137" y="126" width="582" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="137" y="77" width="582" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="137" y="298" width="582" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="137" y="249" width="582" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="137" y="200" width="582" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="137" y="151" width="582" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="137" y="102" width="582" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect></g><g><rect x="160" y="320" width="13" height="3" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="276" y="80" width="13" height="243" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="392" y="248" width="14" height="75" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="508" y="281" width="14" height="42" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="624" y="305" width="14" height="18" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="174" y="322.7128" width="14" height="0.7871999999999844" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="290" y="248" width="14" height="75" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="407" y="278" width="13" height="45" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="523" y="317" width="13" height="6" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="639" y="317" width="14" height="6" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="189" y="298" width="13" height="25" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="305" y="280" width="14" height="43" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="421" y="283" width="14" height="40" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="537" y="314" width="14" height="9" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="654" y="285" width="13" height="38" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="203" y="287" width="14" height="36" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="320" y="302" width="13" height="21" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="436" y="260" width="13" height="63" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="552" y="317" width="14" height="6" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="668" y="266" width="14" height="57" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="218" y="321.53200000000004" width="14" height="1.967999999999961" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="334" y="196" width="14" height="127" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="450" y="278" width="14" height="45" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="567" y="317" width="13" height="6" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="683" y="308" width="13" height="15" stroke="none" stroke-width="0" fill="#990099"></rect></g><g><rect x="137" y="323" width="582" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="middle" x="195.6" y="344.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">calcium</text></g><g><text text-anchor="middle" x="311.8" y="344.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">iron</text></g><g><text text-anchor="middle" x="428" y="344.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">A</text></g><g><text text-anchor="middle" x="544.2" y="344.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">B1</text></g><g><text text-anchor="middle" x="660.4" y="344.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">B2</text></g><g><text text-anchor="end" x="123" y="328.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="123" y="279.2" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">20</text></g><g><text text-anchor="end" x="123" y="230" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">40</text></g><g><text text-anchor="end" x="123" y="180.8" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">60</text></g><g><text text-anchor="end" x="123" y="131.6" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">80</text></g><g><text text-anchor="end" x="123" y="82.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">100</text></g></g></g><g></g></svg><div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"><table><thead><tr><th>LinearOptimizationSheet</th><th>corn meal</th><th>pound cake</th><th>Milk</th><th>evaporated milk (can)</th><th>eggs</th></tr></thead><tbody><tr><td>calcium</td><td>1.7</td><td>0.4</td><td>10.5</td><td>15.1</td><td>1</td></tr><tr><td>iron</td><td>99</td><td>31</td><td>18</td><td>9</td><td>52</td></tr><tr><td>A</td><td>30.9</td><td>18.9</td><td>16.8</td><td>26</td><td>18.6</td></tr><tr><td>B1</td><td>17.4</td><td>2.8</td><td>4</td><td>3</td><td>2.8</td></tr><tr><td>B2</td><td>7.9</td><td>3</td><td>16</td><td>23.5</td><td>6.5</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 410px; left: 866px; white-space: nowrap; font-family: Arial; font-size: 14px; font-weight: bold;">99</div><div></div></div></div>
 
 
 
 
 
 
 
 
 
</body></html>
 

Revision as of 12:53, 28 April 2020


https://docs.google.com/spreadsheets/d/1YUqF27YsO2tVdFL1R6Oxu5BT5itjA_ozZDrekzfFclk/edit?usp=sharing