Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
  <select id="variables" onChange="drawChart(parseInt(this.value),'chart0')"></select>
	<select id="area" onChange="changeArea(this.value)">
		<option selected>Italia</option>
		<optgroup label="Regioni:">
			<option>Piemonte</option>
			<option>Valle d'Aosta</option>
			<option>Lombardia</option>
			<option>Veneto</option>
			<option>P.A. Trento</option>
			<option>P.A. Bolzano</option>
			<option>Friuli Venezia Giulia</option>
			<option>Liguria</option>
			<option>Emilia-Romagna</option>
			<option>Toscana</option>
			<option>Umbria</option>
			<option>Marche</option>
			<option>Lazio</option>
			<option>Abruzzo</option>
			<option>Molise</option>
			<option>Campania</option>
			<option>Puglia</option>
			<option>Basilicata</option>
			<option>Calabria</option>
			<option>Sicilia</option>
			<option>Sardegna</option>
		</optgroup>
	</select>

  
	
<span style='color: #999999'>Dati: open data <a target='_blank' href='https://github.com/pcm-dpc/COVID-19'>Protezione Civile</a>. Su questi indicatori, vedi <a target='_blank' href='http://bit.ly/2xSCkZ6'>il mio articolo su Luiss Open</a>.
   <input type="button" onClick="showImage()" value="Crea immagine"/>
	<div id='chart0' style='width: 100%; height: 500px; margin:0px'></div>
	<!--<div id='chart1' style='width: 1000px; height: 500px; margin:0px'></div>-->
              
            
!

CSS

              
                body, p, select {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;  
}
              
            
!

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++) {if (window.CP.shouldStopExecution(0)) break;for (var n = b.csv.toArray(g[l], d), o = {}, p = 0; p < k.length; p++) {if (window.CP.shouldStopExecution(1)) break;o[k[p]] = n[p];}window.CP.exitedLoop(1);h.push(d.transform !== a ? d.transform.call(a, o) : o), d.state.rowNum++;}window.CP.exitedLoop(0);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++) {if (window.CP.shouldStopExecution(2)) break;for (g = c[i], h = [], j = 0; j < g.length; j++) {if (window.CP.shouldStopExecution(3)) break;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);}window.CP.exitedLoop(3);k += h.join(f.separator) + "\r\n";}window.CP.exitedLoop(2);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++) {if (window.CP.shouldStopExecution(4)) break;c.push(f.transform.call(a, g[h]));}window.CP.exitedLoop(4);}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++) {if (window.CP.shouldStopExecution(5)) break;k.indexOf(i[j]) < 0 && k.push(i[j]);}window.CP.exitedLoop(5);i = k;}var l,j,m,n,o = [];for (f.headers && o.push(i), l = 0; l < c.length; l++) {if (window.CP.shouldStopExecution(6)) break;for (m = [], j = 0; j < i.length; j++) {if (window.CP.shouldStopExecution(7)) break;n = i[j], m.push(n in c[l] && "function" != typeof c[l][n] ? c[l][n] : "");}window.CP.exitedLoop(7);o.push(m);}window.CP.exitedLoop(6);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);


google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(start);
var data;
var colOffset;
var area = "Italia";
var chart;

function start() {
  loadData("Italia");
}
function addGR(data, column) {
  var newColIndex = data.addColumn("number", "Tasso di crescita *" + data.getColumnLabel(column).replace(/_/g, " ") + "*");
  for (i = 1; i < data.getNumberOfRows(); i++) {if (window.CP.shouldStopExecution(8)) break;
    data.setCell(i, newColIndex, data.getValue(i, column) / data.getValue(i - 1, column) - 1);
  }window.CP.exitedLoop(8);
  var formatter = new google.visualization.NumberFormat({ pattern: '+#.0%;-#.0%' });
  formatter.format(data, newColIndex);
}
function drawChart(indicator, div) {
  var colors = ['blue', 'orange', '#f1ca3a', '#6f9654', '#1c91c0', '#43459d', '#00ff00', '#ff0000', '#0000ff'];

  var options = {
    theme: 'material',
    legend: 'none',
    chartArea: { 'width': '90%', 'height': '85%' },
    annotations: {
      alwaysOutside: true,
      textStyle: {
        /*fontFamily: Roboto,*/
        fontSize: 11,
        color: '#000',
        auraColor: '#fff' } },


    series: {
      0: { color: "blue" } },

    hAxis: {
      /* title: 'Giorni', */
      slantedText: true,
      textStyle: {
        /*fontFamily: Roboto,*/
        fontSize: 12,
        color: '#aaaaaa',
        auraColor: 'none' } },


    vAxis: {
      /* title: 'Tasso di crescita (% rispetto al giorno precedente)',*/
      format: '#%',
      viewWindow: {
        min: -0.1,
        max: 1 } } };






  // var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  /*
  options.title = "Tasso di crescita *contagiati* - Italia";
  options.series[0].color = "blue";
  var chart = new google.visualization.LineChart(document.getElementById('chart0'));
  chart.draw(getView(window.data,window.colOffset), options);
  */



  window.chart = new google.visualization.LineChart(document.getElementById(div));

  /*
                                                                                   var my_div = document.getElementById('my_div');
                                                                                   google.visualization.events.addListener(chart, 'ready', function () {
                                                                                     my_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
                                                                                   });
                                                                                   */

  // var indicator =1;

  var label = window.data.getColumnLabel(window.colOffset + indicator);

  options.title = label + " - " + window.area + "\r\nhttp://bit.ly/covid19ita";
  options.series[0].color = colors[indicator];
  //options.legend = "yes";
  window.chart.draw(getView(window.data, window.colOffset + indicator), options); // disponibili fino a 8
}
function changeArea(area) {
  window.area = area;
  loadData(area);
}
function showImage() {
  window.open(window.chart.getImageURI());
}
function getLabel(index) {
return window.data.getColumnLabel(index);
}
function loadData(dataset) {

  var dataURI = "";
  if (dataset == "Italia") {
    dataURI = "https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-andamento-nazionale/dpc-covid19-ita-andamento-nazionale.csv";
  } else {
    dataURI = "https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-regioni/dpc-covid19-ita-regioni.csv";
  }

  $.get(dataURI, function (csvString) {

    var arrayData = $.csv.toArrays(csvString, { onParseValue: $.csv.hooks.castToScalar });
    
 	for (i=0; i< arrayData.length; i++) {
		if ((dataset == "Italia") && arrayData[i].length!=16) arrayData.splice(i,1);
	}

    
    
    window.data = new google.visualization.arrayToDataTable(arrayData);

    if (dataset != "Italia") {

      var rows = window.data.getFilteredRows([{ column: 3, value: dataset }]);

      var badRows = window.data.getFilteredRows([{
        column: 3,
        test: function (value) {
          return value != dataset;
        } }]);


      console.log(badRows);
      console.log(badRows.length);

      for (i = badRows.length - 1; i >= 0; i--) {if (window.CP.shouldStopExecution(9)) break;
        // console.log(badRows[i]);
        // console.log(window.data.getValue(badRows[i],3));
        window.data.removeRow(badRows[i]);
      }window.CP.exitedLoop(9);

      window.data.removeColumns(2, 4);

    }


    window.colOffset = window.data.getNumberOfColumns();

    colGR_Cont = window.data.addColumn("number", "Tasso di crescita *contagiati*");
    colGR_Pos = window.data.addColumn("number", "Tasso di crescita *positivi*");

    addGR(window.data, 2);
    addGR(window.data, 3);
    addGR(window.data, 4);
    addGR(window.data, 5);
    addGR(window.data, 9);
    addGR(window.data, 10);
    addGR(window.data, 12);

    var sel = document.getElementById("variables");

    // si carica solo la prima volta, col primo dataset
    if (sel.options.length == 0) {
      for (i = window.colOffset; i < window.data.getNumberOfColumns(); i++) {if (window.CP.shouldStopExecution(10)) break;
        sel.options[sel.options.length] = new Option(getLabel(i), i - window.colOffset);
      }window.CP.exitedLoop(10);
    }

    for (i = 0; i < window.data.getNumberOfRows(); i++) {if (window.CP.shouldStopExecution(11)) break;
      window.data.setCell(i, 0,
      window.data.getValue(i, 0).substring(8, 10) + "/" + window.data.getValue(i, 0).substring(6, 7));

      if (window.data.getValue(i, 0).substring(0, 1) == "0") window.data.setCell(i, 0, window.data.getValue(i, 0).substring(1));
      if (i > 0) {
        // standard 
        tassoNuoviPositivi = window.data.getValue(i, 6) / window.data.getValue(i - 1, 6) - 1;

        // il trucco: il denominatore è in un'altra colonna
        nuoviContagiati = window.data.getValue(i, 11) - window.data.getValue(i - 1, 11);
        tassoNuoviContagiati = nuoviContagiati / window.data.getValue(i - 1, 6);

        window.data.setCell(i, colGR_Pos, tassoNuoviPositivi);
        window.data.setCell(i, colGR_Cont, tassoNuoviContagiati);
      }
    }window.CP.exitedLoop(11);


    var formatter = new google.visualization.NumberFormat({ pattern: '+#.0%;-#.0%' });
    formatter.format(window.data, colGR_Cont);
    formatter.format(window.data, colGR_Pos);
    drawChart(parseInt(sel.value), "chart0");
    // drawChart(1,"chart1");
  });
}


function getView(data, column) {
  var myView = new google.visualization.DataView(data);
  myView.setColumns([0,
  column,
  { calc: "stringify",
    sourceColumn: column,
    type: "string",
    role: "annotation" } /*,
                         colFinal+1 ,
                         { calc: "stringify",
                         sourceColumn: colFinal+1,
                         type: "string",
                         role: "annotation" } */]);

  return myView;

}
              
            
!
999px

Console