Add js/rendercharts.js

js/rendercharts.js is JavaScript filter which renders <div> tag which has data-csv-props attribute.

js/rendercharts.js invoke Google Charts script for rendering.

"data-csv-props" attribute is custom properties for js/rendercharts.js.
Properties which has "csv" prefix are basic settings for js/rendercharts.js.

    "csvSrc" : Source CSV URL
    "csvGvType": Google Charts class name
    "csvGvPackage": Google Charts package name. See

Each Google Charts class document has "Loading" section

  - https://google-developers.appspot.com/chart/interactive/docs/gallery/table#Loading
  - https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart#Loading

In this section, you can find "class name" and "package name".

Other properties are "Configuration Options" for specific Google Charts class.
Each class document has "Configuration Options" section

  - https://google-developers.appspot.com/chart/interactive/docs/gallery/table#Configuration_Options
  - https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart#Configuration_Options

# CSV file format

Each column in CSV header (first) line must contain "type" suffix. Suffix format is "ColumnName:ColumnType".
"ColumnType" must be choosen from the type name { "string", "number", "boolean" }.

CSV example :

```
"Name:string","Salary:number","Full Time Employee:boolean"
Mike,10000,true
Jim,8000,false
Alice,12500,true
Bob,7000,true
```

2 files changed, 229 insertions, 77 deletions

diff --git a/js/rendercharts.js b/js/rendercharts.js
new file mode 100644
index 0000000..1fd3373
--- /dev/null
+++ b/js/rendercharts.js
@@ -0,0 +1,180 @@
+(function(window, document) {

+  // http://stackoverflow.com/a/1414175/2132223

+  var stringToBoolean = function (str) {

+    switch(str.toLowerCase()) {

+      case "true": case "yes": case "1": return true;

+      case "false": case "no": case "0": case null: return false;

+      default: return Boolean(str);

+    }

+  };

+

+  // http://stackoverflow.com/a/4981700/2132223

+  var getNestedObjectByName = function (strObjName) {

+    var parts = strObjName.split(".");

+    for (var i = 0, len = parts.length, obj = window; i < len; ++i) {

+      obj = obj[parts[i]];

+    }

+    return obj;

+  };

+

+  // Copyright 2012-2013 Daniel Tillin

+  //

+  // Permission is hereby granted, free of charge, to any person obtaining

+  // a copy of this software and associated documentation files (the

+  // "Software"), to deal in the Software without restriction, including

+  // without limitation the rights to use, copy, modify, merge, publish,

+  // distribute, sublicense, and/or sell copies of the Software, and to

+  // permit persons to whom the Software is furnished to do so, subject to

+  // the following conditions:

+  //

+  // The above copyright notice and this permission notice shall be

+  // included in all copies or substantial portions of the Software.

+  // 

+  // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

+  // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF

+  // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND

+  // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE

+  // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION

+  // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION

+  // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+  //

+  // csvToArray v2.1 (Unminifiled for development)

+  //

+  // For documentation visit:

+  // http://code.google.com/p/csv-to-array/

+  //

+  var csvToArray = function (csvStr, o) {

+      var od = {

+          'fSep': ',',

+          'rSep': '\r\n',

+          'quot': '"',

+          'head': false,

+          'trim': false

+      }

+      if (o) {

+          for (var i in od) {

+              if (!o[i]) o[i] = od[i];

+          }

+      } else {

+          o = od;

+      }

+      var a = [

+          ['']

+      ];

+      for (var r = f = p = q = 0; p < csvStr.length; p++) {

+          switch (c = csvStr.charAt(p)) {

+          case o.quot:

+              if (q && csvStr.charAt(p + 1) == o.quot) {

+                  a[r][f] += o.quot;

+                  ++p;

+              } else {

+                  q ^= 1;

+              }

+              break;

+          case o.fSep:

+              if (!q) {

+                  if (o.trim) {

+                      a[r][f] = a[r][f].replace(/^\s\s*/, '').replace(/\s\s*$/, '');

+                  }

+                  a[r][++f] = '';

+              } else {

+                  a[r][f] += c;

+              }

+              break;

+          case o.rSep.charAt(0):

+              if (!q && (!o.rSep.charAt(1) || (o.rSep.charAt(1) && o.rSep.charAt(1) == csvStr.charAt(p + 1)))) {

+                  if (o.trim) {

+                      a[r][f] = a[r][f].replace(/^\s\s*/, '').replace(/\s\s*$/, '');

+                  }

+                  a[++r] = [''];

+                  a[r][f = 0] = '';

+                  if (o.rSep.charAt(1)) {

+                      ++p;

+                  }

+              } else {

+                  a[r][f] += c;

+              }

+              break;

+          default:

+              a[r][f] += c;

+          }

+      }

+      if (o.head) {

+          a.shift()

+      }

+      if (a[a.length - 1].length < a[0].length) {

+          a.pop()

+      }

+      return a;

+  };

+  // end of http://code.google.com/p/csv-to-array/

+

+  var drawTable = function (gvCtor, gvOptions, csvUrl, tableEl) {

+    var r = new XMLHttpRequest();

+    r.open("GET", csvUrl, true);

+    r.onreadystatechange = function() {

+      if (this.readyState === 4 && this.status == 200) {

+        var csvAsArray = csvToArray(this.responseText);

+

+        var gvdt = new google.visualization.DataTable()

+        var csvHeaderLine = csvAsArray.shift();

+        for(var i = 0; i < csvHeaderLine.length; i++) {

+          var csvHeaderElement = csvHeaderLine[i].split(":");

+          var csvHeaderName = "?";

+          var csvHeaderType = "string";

+          if(csvHeaderElement.length > 0) {

+            csvHeaderName = csvHeaderElement[0];

+            if(csvHeaderElement.length > 1) {

+              csvHeaderType = csvHeaderElement[1].trim();

+            }

+          }

+          gvdt.addColumn(csvHeaderType, csvHeaderName);

+          for(var j = 0; j < csvAsArray.length; j++) {

+            switch(csvHeaderType) {

+              default:

+              case "string":  csvAsArray[j][i] = String(csvAsArray[j][i]); break;

+              case "number":  csvAsArray[j][i] = Number(csvAsArray[j][i]); break;

+              case "boolean": csvAsArray[j][i] = stringToBoolean(csvAsArray[j][i]); break;

+            }

+          }

+        }

+        gvdt.addRows(csvAsArray);

+        var ctor = getNestedObjectByName(gvCtor);

+        var table = new ctor (tableEl);

+        table.draw(gvdt, gvOptions);

+      }

+    }

+    r.send();

+  };

+

+  var foreachCsvElement = function(cb) {

+    var divEls = document.getElementsByTagName("div");

+    for (var i = 0, n = divEls.length; i < n; i++) {

+      var divEl = divEls[i];

+      var propsAttr = divEl.getAttribute("data-csv-props");

+      if(propsAttr !== null) {

+        cb(divEl, JSON.parse(propsAttr));

+      }

+    }

+  };

+

+  var packages = function() {

+    var gvPackageSet = [];

+    foreachCsvElement(function(csvEl, props) {

+      var gvPackageName = props["csvGvPackage"];

+      if(! gvPackageSet.hasOwnProperty(gvPackageName)) {

+        gvPackageSet.push(gvPackageName);

+      }

+    });

+    return gvPackageSet;

+  }();

+

+  google.load("visualization", "1", {"packages": packages});

+  google.setOnLoadCallback(function() {

+    foreachCsvElement(function(csvEl, props) {

+      var srcAttr = props["csvSrc"];

+      var gvCtorName = props["csvGvType"];

+      drawTable(gvCtorName, props, srcAttr, csvEl);

+    });

+  });

+})(window, document);

diff --git a/test.html b/test.html
index 1c855ba..a6c424f 100644
--- a/test.html
+++ b/test.html
@@ -17,81 +17,6 @@
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
-
-    <!-- Chart example -->
-    <script type="text/javascript" src="js/csvToArray.v2.1.js"></script>
-    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript">
-      // http://stackoverflow.com/a/3000784/2132223
-      function trim1 (str) {
-          return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
-      }
-
-      // http://stackoverflow.com/a/1414175/2132223
-      function stringToBoolean(str) {
-        switch(str.toLowerCase()) {
-          case "true": case "yes": case "1": return true;
-          case "false": case "no": case "0": case null: return false;
-          default: return Boolean(str);
-        }
-      }
-
-
-      function drawTable(gvCtor, gvOptions, csvUrl, tableId) {
-        var r = new XMLHttpRequest();
-        r.open("GET", csvUrl, true);
-        r.onreadystatechange = function() {
-          if (this.readyState === 4 && this.status == 200) {
-            var csvAsArray = this.responseText.csvToArray();
-
-            var gvdt = new google.visualization.DataTable()
-            var csvHeaderLine = csvAsArray.shift();
-            for(var i = 0; i < csvHeaderLine.length; i++) {
-              var csvHeaderElement = csvHeaderLine[i].split(":");
-              var csvHeaderName = "?";
-              var csvHeaderType = "string";
-              if(csvHeaderElement.length > 0) {
-                csvHeaderName = csvHeaderElement[0];
-                if(csvHeaderElement.length > 1) {
-                  csvHeaderType = trim1(csvHeaderElement[1]);
-                }
-              }
-              gvdt.addColumn(csvHeaderType, csvHeaderName);
-              for(var j = 0; j < csvAsArray.length; j++) {
-                switch(csvHeaderType) {
-                  default:
-                  case "string":  csvAsArray[j][i] = String(csvAsArray[j][i]); break;
-                  case "number":  csvAsArray[j][i] = Number(csvAsArray[j][i]); break;
-                  case "boolean": csvAsArray[j][i] = stringToBoolean(csvAsArray[j][i]); break;
-                }
-              }
-            }
-            gvdt.addRows(csvAsArray);
-
-            var table = new gvCtor (document.getElementById(tableId));
-            table.draw(gvdt, gvOptions);
-          }
-        }
-        r.send();
-      }
-
-      google.load("visualization", "1", {packages:["table", "corechart"]});
-      google.setOnLoadCallback(function() {
-        options = {
-          showRowNumber: true
-        };
-        drawTable(google.visualization.Table, options, "csv/sample1.csv", "table_div");
-
-        options = {
-          title : 'Monthly Coffee Production by Country',
-          vAxis: {title: "Cups"},
-          hAxis: {title: "Month"},
-          seriesType: "bars",
-          series: {5: {type: "line"}}
-        };
-        drawTable(google.visualization.ComboChart, options, "csv/sample2.csv", "table_2");
-      });
-    </script>
   </head>
   <body style="padding-top:0; padding-bottom:0; ">
     <nav class="navbar navbar-default">
@@ -251,10 +176,53 @@ The following versions compress data blocks using LZ4 compression algorithm in m
 * __Other__ : Mozilla Firefox, Bareos, GTKWave, Blosc, Facebook's Mercurial, Nippy, systemd
 
 ## Chart 1
-<div id="table_div"></div>
+<!--
+"data-csv-props" attribute is custom properties for js/rendercharts.js.
+Properties which has "csv" prefix are basic settings for js/rendercharts.js.
+
+    "csvSrc" : Source CSV URL
+    "csvGvType": Google Charts class name
+    "csvGvPackage": Google Charts package name. See 
+
+Each Google Charts class document has "Loading" section
+
+  - https://google-developers.appspot.com/chart/interactive/docs/gallery/table#Loading
+  - https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart#Loading
+
+In this section, you can find "class name" and "package name".
+
+Other properties are "Configuration Options" for specific Google Charts class.
+Each class document has "Configuration Options" section
+
+  - https://google-developers.appspot.com/chart/interactive/docs/gallery/table#Configuration_Options
+  - https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart#Configuration_Options
+-->
+<div
+  data-csv-props='{
+    "csvSrc": "csv/sample1.csv",
+    "csvGvType": "google.visualization.Table",
+    "csvGvPackage": "table",
+    "showRowNumber": true
+  }'
+></div>
 
 ## Chart 2
-<div id="table_2" style="height:40em"></div>
+<!--
+You can also specify standard HTML "style" attributes.
+-->
+<div
+  style="height:40em"
+  data-csv-props='{
+    "csvSrc": "csv/sample2.csv",
+    "csvGvType": "google.visualization.ComboChart",
+    "csvGvPackage": "corechart",
+    "title" : "Monthly Coffee Production by Country",
+    "vAxis": {"title": "Cups"},
+    "hAxis": {"title": "Month"},
+    "seriesType": "bars",
+    "series": {"5": {"type": "line"}}
+  }'
+></div>
 
 </xmp>
 
@@ -263,5 +231,9 @@ The following versions compress data blocks using LZ4 compression algorithm in m
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     <script src="strapdown/v/0.2/strapdown.js"></script>
+
+    <!-- Chart -->
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script type="text/javascript" src="js/rendercharts.js"></script>
   </body>
 </html>