Charts within BootStrap 3 Grids - CanvasJS JavaScript Charts

Charts within BootStrap 3 Grids - CanvasJS JavaScript Charts

by borisjavier

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div id="pieChart" style="height: 360px; width: 100%;">
      </div>
    </div>
    <div class="col-md-6">
      <div id="columnChart" style="height: 360px; width: 100%;">
      </div>
    </div>
    <div class="col-md-6">
      <div id="pieChart1" style="height: 360px; width: 100%;">
      </div>
    </div>
  </div>
</div>

JavaScript

var pieChartValues = [{
  y: 48.9,  
  exploded: true,
  indexLabel: "En mora",
  color: "#1f77b4"
}, {
  y: 51.8,
  indexLabel: "Al día",
  color: "#ff7f0e"
}];



renderPieChart(pieChartValues);

function renderPieChart(values) {

  var chart = new CanvasJS.Chart("pieChart", {
    backgroundColor: "white",
    colorSet: "colorSet2",

    title: {
      text: "Desempeño del cobro",
      fontFamily: "Verdana",
      fontSize: 22,
      fontWeight: "normal",
    },
    animationEnabled: true,
    data: [{
      indexLabelFontSize: 15,
      indexLabelFontFamily: "Monospace",
      indexLabelFontColor: "darkgrey",
      indexLabelLineColor: "darkgrey",
      indexLabelPlacement: "outside",
      type: "pie",
      showInLegend: false,
      toolTipContent: "<strong>#percent%</strong>",
      dataPoints: values
    }]
  });
  chart.render();
}


var columnChartValues = [{
  y: 10,
  label: "Enero 2021",
  color: "#1f77b4"
}, {
  y: 20,
  label: "Febrero 2021",
  color: "#ff7f0e"
}, {
  y: 21,
  label: "Marzo 2021",
  color: " #ffbb78"
}, {
  y: 18,
  label: "Abril 2021",
  color: "#d62728"
}, {
  y: 10,
  label: "Mayo 2021",
  color: "#98df8a"
}];
renderColumnChart(columnChartValues);

function renderColumnChart(values) {

  var chart = new CanvasJS.Chart("columnChart", {
    backgroundColor: "white",
    colorSet: "colorSet3",
    title: {
      text: "Usuarios",
      fontFamily: "Verdana",
      fontSize: 23,
      fontWeight: "normal",
    },
    animationEnabled: true,
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    theme: "theme2",
    data: [

      {
        indexLabelFontSize: 15,
        indexLabelFontFamily: "Monospace",
        indexLabelFontColor: "darkgrey",
        indexLabelLineColor: "darkgrey",
        indexLabelPlacement: "outside",
        type: "column",
        showInLegend: false,
        legendMarkerColor: "grey",
        dataPoints: values
      }
    ]
  });

  chart.render();
}

var pieChartValues1...