summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--js/rendercharts.js180
-rw-r--r--test.html126
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>
generated by cgit v0.12 at 2024-11-17 20:26:29 (GMT)