Gráficas

by Raúl Rojas

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_values" style="width: 600px; height: 400px;"></div>

JavaScript

google.charts.load("current", {
  packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
	var data = google.visualization.arrayToDataTable([
        ["Nombre", "Porcentaje ", { role: "style" },{role:"link"} ],
        ["Gasolineras del Norte", 8.94, "#ccc","http://www.google.com"],
        ["Grupo Petrolero", 10.49, "#999","http://www.google.com"],
        ["La Joya", 19.30, "#666","http://www.google.com"],
        ["Oro Negro", 21.45, "color: #333","http://www.google.com"]
      ]);
	
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2
  ]);

  var options = {
    title: "Avance por franquiciatario",
    width: 600,
    height: 400,
    bar: {
      groupWidth: "90%"
    },
    legend: {
      position: "none"
    },
  };
  var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
  chart.draw(view, options);
}