title: How can I pass local Excel file data to Javascript array (for google charts)?
body: <p>I have a simple problem but I can't find a simple solution:</p>
  
  <p>I have an Excel file (always the same), with several WorkSheets that non-IT coworkers want to be able to update so that it also updates the Google Charts (or other chart API you can advise me) webpage.</p>
  
  <p>(By the way, I only need a certain part of each worksheet so if you know a way to extract only what I need that would be great :) )</p>
  
  <p>I would like to avoid having server-side operation but it's maybe not possible since I want to read a local file.</p>
  
  <p>I have looked at ways to convert to JSON, or to load as base64 string, using xlsx.js but I find nothing simple that my colleagues could easily use. </p>
  
  <p>Thank you very much.</p>
  
  <h1>Edit</h1>
  
  <p>I found a way to do exactly what I wanted so if it can help anyone:</p>
  
  <p>First, I put all the data I needed in one csv file.</p>
  
  <p>Then, I used HTML5 FileAPI to read the csv file that I loaded with a file input.</p>
  
  <p>Finally I used a cvstojson script to parse the file then passed it to th google graph dataTable the way I wanted.</p>
  
  <p>However, this allowed to load the data only once so I used a button-styled label for the file input that triggered a hidden "reset" button (actually cloning more than resetting) after the file was loaded so now it looks like a single button that allows to load the file multiple times after I changed the data in it.
  I also used jQuery's localStorage to populate my json.
  I know this is pretty messy so here's a code extract:</p>
  
  <pre><code>&lt;div id="load"&gt;
      &lt;button id="clear"&gt;Clear&lt;/button&gt;
      &lt;label id="forcvs" for="cvs" &gt; Load data &lt;/label&gt;
      &lt;input type="file" id="cvs" onchange="handleFiles(this.files);" accept=".csv"&gt;&lt;br/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The "handleFiles" fonction leads to the cvstojson script:</p>
  
  <pre><code>var json = JSON.parse(localStorage.getItem('json'))
  
  function handleFiles(files) {
      // Check for the various File API support.
      if (window.FileReader) {
          // FileReader are supported.
          getAsText(files[0]);
      } else {
          alert('FileReader are not supported in this browser.');
      }
  }
  
  function getAsText(fileToRead) {
      var reader = new FileReader();
      // Read file into memory as UTF-8      
      reader.readAsText(fileToRead);
      // Handle errors load
      reader.onload = loadHandler;
      reader.onerror = errorHandler;
  }
  
  function loadHandler(event) {
      var csv = event.target.result;
      processData(csv);          
  }
  
  function processData(csv) {
    object = $.csv.toObjects(csv, {separator:";"})
      drawOutput(object);
  }
  
  function errorHandler(evt) {
      if(evt.target.error.name == "NotReadableError") {
          alert("Canno't read file !");
      }
  }
  
  function drawOutput(object){
    json = object
    localStorage.setItem('json', JSON.stringify(json))
    drawChart()
    $( "#clear" ).trigger( "click" );
  }
  </code></pre>
  
  <p>and then before updating my data and drawing my chart I used:</p>
  
  <pre><code>json = JSON.parse(localStorage.getItem('json'))
  </code></pre>
  
  <p>Here's an extract of the jquery I used for that:</p>
  
  <pre><code>var load = $('#cvs')
  $('#clear').click(function () {
  load.replaceWith(load = load.clone(true))
  })
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#cvs, #clear {
    display: none;
  }
  
  
  #forcvs {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    line-height: 16px;
    padding: .2em .4em;
    margin: .2em;
  }
  </code></pre>
  
  <p>Hope it can help some one and thanks for the replies :)</p>