[Chartjs]-Create Conditional Chart

by

1👍

✅

you can use a simple if statement to determine the chart type… 

// determine chart type
if (values_chart_bruto.labels.length === 1) {
  config_bruto.type = 'bar';
} else {
  config_bruto.type = 'line';
}

see following working snippet… 

values_chart_bruto = {"labels": ["15/02/2019"], "datasets": [{"label": "IPCA 2019","backgroundColor" : "rgba(219,30,110,0.2)","borderColor" : "rgba(219,30,110,0.89)","data" : [0.03]},{"label": "IPCA 2024","backgroundColor" : "rgba(219,30,110,0.23)","borderColor" : "rgba(219,30,110,0.89)","data" : [1.10]},{"label": "IPCA S 2026","backgroundColor" : "rgba(115,126,213,0.28)","borderColor" : "rgba(115,126,213,0.98)","data" : [4.79]},{"label": "IPCA S 2035","backgroundColor" : "rgba(15,33,170,0.14)","borderColor" : "rgba(15,33,170,0.98)","data" : [0.77]},{"label": "IPCA S 2050","backgroundColor" : "rgba(29,52,229,0.19)","borderColor" : "rgba(29,52,229,0.98)","data" : [0.32]},{"label": "Prefixado 2020","backgroundColor" : "rgba(17,109,26,0.29)","borderColor" : "rgba(17,109,26,0.96)","data" : [0.09]},{"label": "Prefixado 2021","backgroundColor" : "rgba(14,181,30,0.24)","borderColor" : "rgba(14,181,30,0.96)","data" : [0.34]},{"label": "Prefixado 2022","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [0.18]},{"label": "Prefixado 2025","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [2.09]},{"label": "Prefixado S 2027","backgroundColor" : "rgba(218,219,26,0.19)","borderColor" : "rgba(218,219,26,0.93)","data" : [1.35]},{"label": "Prefixado S 2029","backgroundColor" : "rgba(192,193,32,0.19)","borderColor" : "rgba(200,201,27,0.93)","data" : [0.44]},{"label": "Selic 2021","backgroundColor" : "rgba(10,206,182,0.19)","borderColor" : "rgba(10,206,182,0.99)","data" : [0.02]},{"label": "Selic 2023","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [0.49]},{"label": "Selic 2025","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [null]}]};
//    values_chart_bruto = {"labels": ["12/02/2019","13/02/2019","14/02/2019","15/02/2019"], "datasets": [{"label": "IPCA 2019","backgroundColor" : "rgba(219,30,110,0.2)","borderColor" : "rgba(219,30,110,0.89)","data" : [0.04,0.02,0.02,0.03]},{"label": "IPCA 2024","backgroundColor" : "rgba(219,30,110,0.23)","borderColor" : "rgba(219,30,110,0.89)","data" : [1.39,1.02,0.84,1.10]},{"label": "IPCA S 2026","backgroundColor" : "rgba(115,126,213,0.28)","borderColor" : "rgba(115,126,213,0.98)","data" : [1.70,3.09,-28.52,4.79]},{"label": "IPCA S 2035","backgroundColor" : "rgba(15,33,170,0.14)","borderColor" : "rgba(15,33,170,0.98)","data" : [0.15,0.62,0.26,0.77]},{"label": "IPCA S 2050","backgroundColor" : "rgba(29,52,229,0.19)","borderColor" : "rgba(29,52,229,0.98)","data" : [0.01,0.37,-0.81,0.32]},{"label": "Prefixado 2020","backgroundColor" : "rgba(17,109,26,0.29)","borderColor" : "rgba(17,109,26,0.96)","data" : [0.12,0.21,0.17,0.09]},{"label": "Prefixado 2021","backgroundColor" : "rgba(14,181,30,0.24)","borderColor" : "rgba(14,181,30,0.96)","data" : [0.26,0.93,0.78,0.34]},{"label": "Prefixado 2022","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [null,0.26,0.24,0.18]},{"label": "Prefixado 2025","backgroundColor" : "rgba(25,237,45,0.18)","borderColor" : "rgba(25,237,45,0.96)","data" : [1.85,2.57,0.65,2.09]},{"label": "Prefixado S 2027","backgroundColor" : "rgba(218,219,26,0.19)","borderColor" : "rgba(218,219,26,0.93)","data" : [0.10,1.47,0.38,1.35]},{"label": "Prefixado S 2029","backgroundColor" : "rgba(192,193,32,0.19)","borderColor" : "rgba(200,201,27,0.93)","data" : [null,0.54,0.09,0.44]},{"label": "Selic 2021","backgroundColor" : "rgba(10,206,182,0.19)","borderColor" : "rgba(10,206,182,0.99)","data" : [0.03,0.02,0.03,0.02]},{"label": "Selic 2023","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [0.51,0.48,0.50,0.49]},{"label": "Selic 2025","backgroundColor" : "rgba(15,194,129,0.2)","borderColor" : "rgba(15,194,129,0.99)","data" : [null,null,null,null]}]};

var config_bruto = {
  type: 'line',
  data: values_chart_bruto,
  options: {
    responsive: true,
    title: {
      display: false,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Período'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Valor'
        }
      }]
    }
  }
};


window.onload = function() {
    var ctxBruto = document.getElementById("rendimentoBruto").getContext('2d');

    // determine chart type
    if (values_chart_bruto.labels.length === 1) {
      config_bruto.type = 'bar';
    } else {
      config_bruto.type = 'line';
    }

    window.myLineBruto = new Chart(ctxBruto, config_bruto);
};
<script src="https://www.chartjs.org/dist/2.7.3/Chart.bundle.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>

<div class="x_content">
  <div class="demo-container" style="">
    <canvas id="rendimentoBruto"></canvas>
  </div>
</div>

Leave a comment