Search code examples
javascripthtmllaravelamcharts

amChart not rendering in Laravel Blade file

I am new amchart and trying to display visualization in my Laravel (PHP Framework) project. In the same chartJs is getting display. But AmChart is not working.

Below is chart.blade.php for visualization page.

  <!-- AmCharts Resources -->
  <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
  <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
  <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<body>

<div class="card">
   <div class="card-header">
     <h6>AmChart</h6>
   </div>
   <div class="card-body">
     <canvas id="chartdiv" width="341" height="253" style="display: block; width: 341px; height: 253px;">/canvas>
   </div>
</div>



 <script src="{{URL::asset('js/charts/demo.js')}}"></script>

</body>

js/charts/demo.js is

// Create chart instance in one go
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// Create pie series
var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "The Netherlands",
  "litres": 50
}];

// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();

console.log(chart.data);

I am getting JSON data on console log from Chrome.

Thank you for your time and consideration.

Solution

  • Replace <canvas id="chartdiv"></canvas> with <div id="chartdiv"></div>