[Chartjs]-How do I use my chart.js line chart with handlebars?

by

2👍

✅

const chartData = {
    Dates:["05/08/2020", "05/09/2020", "05/10/2020"],
    Data: [1500, 1200, 1750]
};

let lineChart = $('#lineChart').html();
let lineChartScript = Handlebars.compile(lineChart);
let linehtml = lineChartScript(chartData);
$(document.body).append(linehtml);

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels:  chartData.Dates, 
      datasets: [
        {
          label: "Order Amount",
          fill: false,
          lineTension: 0,
          borderColor: "#0d6efd",
          data:  [chartData.Data] 
        }
      ]
   } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>


<script id="lineChart" type="text/x-handlebars-template">

<div class="row">
  <div class="col-sm-12 col-md-2"> </div>
    <div class="col-sm-12 col-md-8"> 
      <canvas id="myChart" width="400" height="400"></canvas>
  </div>
  </div>
  </div>

</script>

Leave a comment