DEVHIDE
Login Or Sign up

Google Chart from multiple csv

269 Views Asked by At

I'm pretty new to javascript and I need your help. I'm currently working on a science project about monitoring fumaroles temperatures (Alban Hills, Italy). So I get data every 15 mins and I created a .csv file named like fumarola1-YY-m-d.csv (e.g. fumarola1-2021-06-20.csv) like this:

time,temp
00:00:01,52.1
00:15:01,51.5
00:30:01,51.5
00:45:01,51.5
01:00:01,51.5

I created a Google Chart to display the DAILY changes of temperature, but I still have a problem: is there a way to load multiple csv file in one chart (e.g. fumarola1-2021-06-20.csv and fumarola1-2021-06-19.csv)? I want to diplay the current day, yesterday and maybe 2 days ago too. Drawing a trendline would be great too! Thanks in advance, I'll show you my code below.

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>Daily temperatures</title>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script src="temp/jquery.csv.min.js"></script>

<script type="text/javascript">
  google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>

<script type="text/javascript">
function drawVisualization() {
var oggidata = new Date().toJSON().slice(0,10).replace(/-/g,'-');
var nomefile = "temp/fumarola1-" + oggidata + ".csv";
   $.get(nomefile, function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      var data = new google.visualization.arrayToDataTable(arrayData);
      var pi_temp = new google.visualization.ChartWrapper({
         chartType: 'LineChart',
         containerId: 'pi_temp',
         dataTable: data,
         options:{
            lineWidth: 1,
            width: 1000, height: 500,
            title: 'Today: fumarola1-' + oggidata + '.csv',
            hAxis: {title: 'Hour'},
            vAxis: {title: 'Temp (Celsius)'},
            series: { 0: {visibleInLegend: false}},
            trendlines: { 0: {} },
         }
      });
      pi_temp.draw();
   });
}
google.setOnLoadCallback(drawVisualization)
</script>

<div id="pi_temp"></div>
</body>
</html>

And here jquery.csv.min.js

RegExp.escape=function(a){return a.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")},function(a){"use strict";var b;b="undefined"!=typeof jQuery&&jQuery?jQuery:{},b.csv={defaults:{separator:",",delimiter:'"',headers:!0},hooks:{castToScalar:function(a){var b=/\./;if(isNaN(a))return a;if(b.test(a))return parseFloat(a);var c=parseInt(a);return isNaN(c)?null:c}},parsers:{parse:function(b,c){function d(){if(j=0,k="",c.start&&c.state.rowNum<c.start)return i=[],c.state.rowNum++,void(c.state.colNum=1);if(c.onParseEntry===a)h.push(i);else{var b=c.onParseEntry(i,c.state);b!==!1&&h.push(b)}i=[],c.end&&c.state.rowNum>=c.end&&(l=!0),c.state.rowNum++,c.state.colNum=1}function e(){if(c.onParseValue===a)i.push(k);else{var b=c.onParseValue(k,c.state);b!==!1&&i.push(b)}k="",j=0,c.state.colNum++}var f=c.separator,g=c.delimiter;c.state.rowNum||(c.state.rowNum=1),c.state.colNum||(c.state.colNum=1);var h=[],i=[],j=0,k="",l=!1,m=RegExp.escape(f),n=RegExp.escape(g),o=/(D|S|\r\n|\n|\r|[^DS\r\n]+)/,p=o.source;return p=p.replace(/S/g,m),p=p.replace(/D/g,n),o=new RegExp(p,"gm"),b.replace(o,function(a){if(!l)switch(j){case 0:if(a===f){k+="",e();break}if(a===g){j=1;break}if(/^(\r\n|\n|\r)$/.test(a)){e(),d();break}k+=a,j=3;break;case 1:if(a===g){j=2;break}k+=a,j=1;break;case 2:if(a===g){k+=a,j=1;break}if(a===f){e();break}if(/^(\r\n|\n|\r)$/.test(a)){e(),d();break}throw new Error("CSVDataError: Illegal State [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]");case 3:if(a===f){e();break}if(/^(\r\n|\n|\r)$/.test(a)){e(),d();break}if(a===g)throw new Error("CSVDataError: Illegal Quote [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]");throw new Error("CSVDataError: Illegal Data [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]");default:throw new Error("CSVDataError: Unknown State [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]")}}),0!==i.length&&(e(),d()),h},splitLines:function(b,c){function d(){if(h=0,c.start&&c.state.rowNum<c.start)return i="",void c.state.rowNum++;if(c.onParseEntry===a)g.push(i);else{var b=c.onParseEntry(i,c.state);b!==!1&&g.push(b)}i="",c.end&&c.state.rowNum>=c.end&&(j=!0),c.state.rowNum++}var e=c.separator,f=c.delimiter;c.state.rowNum||(c.state.rowNum=1);var g=[],h=0,i="",j=!1,k=RegExp.escape(e),l=RegExp.escape(f),m=/(D|S|\n|\r|[^DS\r\n]+)/,n=m.source;return n=n.replace(/S/g,k),n=n.replace(/D/g,l),m=new RegExp(n,"gm"),b.replace(m,function(a){if(!j)switch(h){case 0:if(a===e){i+=a,h=0;break}if(a===f){i+=a,h=1;break}if("\n"===a){d();break}if(/^\r$/.test(a))break;i+=a,h=3;break;case 1:if(a===f){i+=a,h=2;break}i+=a,h=1;break;case 2:var b=i.substr(i.length-1);if(a===f&&b===f){i+=a,h=1;break}if(a===e){i+=a,h=0;break}if("\n"===a){d();break}if("\r"===a)break;throw new Error("CSVDataError: Illegal state [Row:"+c.state.rowNum+"]");case 3:if(a===e){i+=a,h=0;break}if("\n"===a){d();break}if("\r"===a)break;if(a===f)throw new Error("CSVDataError: Illegal quote [Row:"+c.state.rowNum+"]");throw new Error("CSVDataError: Illegal state [Row:"+c.state.rowNum+"]");default:throw new Error("CSVDataError: Unknown state [Row:"+c.state.rowNum+"]")}}),""!==i&&d(),g},parseEntry:function(b,c){function d(){if(c.onParseValue===a)g.push(i);else{var b=c.onParseValue(i,c.state);b!==!1&&g.push(b)}i="",h=0,c.state.colNum++}var e=c.separator,f=c.delimiter;c.state.rowNum||(c.state.rowNum=1),c.state.colNum||(c.state.colNum=1);var g=[],h=0,i="";if(!c.match){var j=RegExp.escape(e),k=RegExp.escape(f),l=/(D|S|\n|\r|[^DS\r\n]+)/,m=l.source;m=m.replace(/S/g,j),m=m.replace(/D/g,k),c.match=new RegExp(m,"gm")}return b.replace(c.match,function(a){switch(h){case 0:if(a===e){i+="",d();break}if(a===f){h=1;break}if("\n"===a||"\r"===a)break;i+=a,h=3;break;case 1:if(a===f){h=2;break}i+=a,h=1;break;case 2:if(a===f){i+=a,h=1;break}if(a===e){d();break}if("\n"===a||"\r"===a)break;throw new Error("CSVDataError: Illegal State [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]");case 3:if(a===e){d();break}if("\n"===a||"\r"===a)break;if(a===f)throw new Error("CSVDataError: Illegal Quote [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]");throw new Error("CSVDataError: Illegal Data [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]");default:throw new Error("CSVDataError: Unknown State [Row:"+c.state.rowNum+"][Col:"+c.state.colNum+"]")}}),d(),g}},helpers:{collectPropertyNames:function(a){var b,c,d=[];for(b in a)for(c in a[b])a[b].hasOwnProperty(c)&&d.indexOf(c)<0&&"function"!=typeof a[b][c]&&d.push(c);return d}},toArray:function(c,d,e){d=d!==a?d:{};var f={};f.callback=e!==a&&"function"==typeof e?e:!1,f.separator="separator"in d?d.separator:b.csv.defaults.separator,f.delimiter="delimiter"in d?d.delimiter:b.csv.defaults.delimiter;var g=d.state!==a?d.state:{};d={delimiter:f.delimiter,separator:f.separator,onParseEntry:d.onParseEntry,onParseValue:d.onParseValue,state:g};var h=b.csv.parsers.parseEntry(c,d);return f.callback?void f.callback("",h):h},toArrays:function(c,d,e){d=d!==a?d:{};var f={};f.callback=e!==a&&"function"==typeof e?e:!1,f.separator="separator"in d?d.separator:b.csv.defaults.separator,f.delimiter="delimiter"in d?d.delimiter:b.csv.defaults.delimiter;var g=[];return d={delimiter:f.delimiter,separator:f.separator,onPreParse:d.onPreParse,onParseEntry:d.onParseEntry,onParseValue:d.onParseValue,onPostParse:d.onPostParse,start:d.start,end:d.end,state:{rowNum:1,colNum:1}},d.onPreParse!==a&&d.onPreParse(c,d.state),g=b.csv.parsers.parse(c,d),d.onPostParse!==a&&d.onPostParse(g,d.state),f.callback?void f.callback("",g):g},toObjects:function(c,d,e){d=d!==a?d:{};var f={};f.callback=e!==a&&"function"==typeof e?e:!1,f.separator="separator"in d?d.separator:b.csv.defaults.separator,f.delimiter="delimiter"in d?d.delimiter:b.csv.defaults.delimiter,f.headers="headers"in d?d.headers:b.csv.defaults.headers,d.start="start"in d?d.start:1,f.headers&&d.start++,d.end&&f.headers&&d.end++;var g=[],h=[];d={delimiter:f.delimiter,separator:f.separator,onPreParse:d.onPreParse,onParseEntry:d.onParseEntry,onParseValue:d.onParseValue,onPostParse:d.onPostParse,start:d.start,end:d.end,state:{rowNum:1,colNum:1},match:!1,transform:d.transform};var i={delimiter:f.delimiter,separator:f.separator,start:1,end:1,state:{rowNum:1,colNum:1}};d.onPreParse!==a&&d.onPreParse(c,d.state);var j=b.csv.parsers.splitLines(c,i),k=b.csv.toArray(j[0],d);g=b.csv.parsers.splitLines(c,d),d.state.colNum=1,d.state.rowNum=k?2:1;for(var l=0,m=g.length;m>l;l++){for(var n=b.csv.toArray(g[l],d),o={},p=0;p<k.length;p++)o[k[p]]=n[p];h.push(d.transform!==a?d.transform.call(a,o):o),d.state.rowNum++}return d.onPostParse!==a&&d.onPostParse(h,d.state),f.callback?void f.callback("",h):h},fromArrays:function(c,d,e){d=d!==a?d:{};var f={};f.callback=e!==a&&"function"==typeof e?e:!1,f.separator="separator"in d?d.separator:b.csv.defaults.separator,f.delimiter="delimiter"in d?d.delimiter:b.csv.defaults.delimiter;var g,h,i,j,k="";for(i=0;i<c.length;i++){for(g=c[i],h=[],j=0;j<g.length;j++){var l=g[j]===a||null===g[j]?"":g[j].toString();l.indexOf(f.delimiter)>-1&&(l=l.replace(f.delimiter,f.delimiter+f.delimiter));var m="\n|\r|S|D";m=m.replace("S",f.separator),m=m.replace("D",f.delimiter),l.search(m)>-1&&(l=f.delimiter+l+f.delimiter),h.push(l)}k+=h.join(f.separator)+"\r\n"}return f.callback?void f.callback("",k):k},fromObjects:function(c,d,e){d=d!==a?d:{};var f={};if(f.callback=e!==a&&"function"==typeof e?e:!1,f.separator="separator"in d?d.separator:b.csv.defaults.separator,f.delimiter="delimiter"in d?d.delimiter:b.csv.defaults.delimiter,f.headers="headers"in d?d.headers:b.csv.defaults.headers,f.sortOrder="sortOrder"in d?d.sortOrder:"declare",f.manualOrder="manualOrder"in d?d.manualOrder:[],f.transform=d.transform,"string"==typeof f.manualOrder&&(f.manualOrder=b.csv.toArray(f.manualOrder,f)),f.transform!==a){var g=c;c=[];var h;for(h=0;h<g.length;h++)c.push(f.transform.call(a,g[h]))}var i=b.csv.helpers.collectPropertyNames(c);if("alpha"===f.sortOrder&&i.sort(),f.manualOrder.length>0){var j,k=[].concat(f.manualOrder);for(j=0;j<i.length;j++)k.indexOf(i[j])<0&&k.push(i[j]);i=k}var l,j,m,n,o=[];for(f.headers&&o.push(i),l=0;l<c.length;l++){for(m=[],j=0;j<i.length;j++)n=i[j],m.push(n in c[l]&&"function"!=typeof c[l][n]?c[l][n]:"");o.push(m)}return b.csv.fromArrays(o,d,f.callback)}},b.csvEntry2Array=b.csv.toArray,b.csv2Array=b.csv.toArrays,b.csv2Dictionary=b.csv.toObjects,"undefined"!=typeof module&&module.exports&&(module.exports=b.csv)}.call(this);

Thank you and have a nice day!

javascript csv charts google-visualization jquery-csv
Original Q&A
1

There are 1 best solutions below

1
On BEST ANSWER

for starters, you're using an old version of google charts.
jsapi should no longer be used.
instead load the following...

<script src="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement.

google.charts.load('current', {
  packages: ['controls']
}).then(function () {

   // place chart code here

});

next, we need to gather all the data before drawing the chart.
we can make all the requests, then combine all the data into one array.
here, we use a while loop to request the data from the last three days, including today.

  // gather data for last three days (including today)
  var chartData = null;
  var requests = [];
  var dateEnd = new Date();
  var dateRequest = new Date(dateEnd.getFullYear(), dateEnd.getMonth(), dateEnd.getDate() - 2);
  while (dateRequest.getTime() <= dateEnd.getTime()) {
    var oggidata = dateRequest.toJSON().slice(0,10).replace(/-/g,'-');
    requests.push(makeRequest(oggidata));
    dateRequest = new Date(dateRequest.getFullYear(), dateRequest.getMonth(), dateRequest.getDate() + 1);
  }

then we can use the when statement, to know when all the requests have been made and completed,
then draw our chart.

  // wait for all requests to finish
  $.when.apply($, requests).done(function () {
    // create, sort data table by date / time
    var data = new google.visualization.arrayToDataTable(chartData);
    data.sort([{column: 0}]);

    // draw chart
    var pi_temp = new google.visualization.ChartWrapper({
       chartType: 'LineChart',
       containerId: 'pi_temp',
       dataTable: data,
       options:{
          lineWidth: 1,
          width: 1000, height: 500,
          title: 'Today: fumarola1-' + oggidata + '.csv',
          hAxis: {title: 'Hour', format: 'MM/dd hh:mm:ss'},
          vAxis: {title: 'Temp (Celsius)'},
          series: { 0: {visibleInLegend: false}},
          trendlines: { 0: {} },
       }
    });
    pi_temp.draw();
  });

finally, this is the function we use to make the csv request and combine the data.
note: in order to draw a trendline, we must convert the time string to an actual date. trendlines are not supported by a discrete axis (where the axis values are strings)

  // make csv request, return promise
  function makeRequest(oggidata) {
    return $.get("temp/fumarola1-" + oggidata + ".csv", function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      arrayData = arrayData.map(function (row, index) {
        if (index === 0) {
          // return column headings
          return row;
        } else {
          // convert time string to date
          return [new Date(oggidata + 'T' + row[0]), row[1]];
        }
      });

      // combine data
      if (chartData === null) {
        chartData = arrayData;
      } else {
        // remove column headings, add remaining rows
        arrayData.splice(0, 1);
        chartData = chartData.concat(arrayData);
      }
    });
  }

see following full snippet...

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  // gather data for last three days (including today)
  var chartData = null;
  var requests = [];
  var dateEnd = new Date();
  var dateRequest = new Date(dateEnd.getFullYear(), dateEnd.getMonth(), dateEnd.getDate() - 2);
  while (dateRequest.getTime() <= dateEnd.getTime()) {
    var oggidata = dateRequest.toJSON().slice(0,10).replace(/-/g,'-');
    requests.push(makeRequest(oggidata));
    dateRequest = new Date(dateRequest.getFullYear(), dateRequest.getMonth(), dateRequest.getDate() + 1);
  }

  // wait for all requests to finish
  $.when.apply($, requests).done(function () {
    // create, sort data table by date / time
    var data = new google.visualization.arrayToDataTable(chartData);
    data.sort([{column: 0}]);

    // draw chart
    var pi_temp = new google.visualization.ChartWrapper({
       chartType: 'LineChart',
       containerId: 'pi_temp',
       dataTable: data,
       options:{
          lineWidth: 1,
          width: 1000, height: 500,
          title: 'Today: fumarola1-' + oggidata + '.csv',
          hAxis: {title: 'Hour', format: 'MM/dd hh:mm:ss'},
          vAxis: {title: 'Temp (Celsius)'},
          series: { 0: {visibleInLegend: false}},
          trendlines: { 0: {} },
       }
    });
    pi_temp.draw();
  });

  // make csv request, return promise
  function makeRequest(oggidata) {
    return $.get("temp/fumarola1-" + oggidata + ".csv", function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      arrayData = arrayData.map(function (row, index) {
        if (index === 0) {
          // return column headings
          return row;
        } else {
          // convert time string to date
          return [new Date(oggidata + 'T' + row[0]), row[1]];
        }
      });

      // combine data
      if (chartData === null) {
        chartData = arrayData;
      } else {
        arrayData.splice(0, 1);
        chartData = chartData.concat(arrayData);
      }
    });
  }
});

Related Questions in JAVASCRIPT

Related Questions in CSV

Related Questions in CHARTS

Related Questions in GOOGLE-VISUALIZATION

Related Questions in JQUERY-CSV

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.