Any option I find for using charts in laravel and laravel wrappers use routing and controllers, which would make trying to display the data I'm trying to represent in the graph very hard to push through to the controller.

I've tried using chart js using Vue but it is not working, any ideas?

Many thanks.

CodePudding user response：

You can simply open a blade and use #javascript inside to show chart this is s simple file with some fake data you can try it just copy all and pate in a blade (DONT FORGET TO ADD @extend('') AT THE TOP:

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div >
<div >
    <h3 >Area Chart</h3>

    <div >
        <button type="button"  data-widget="collapse"><i ></i>
        </button>
        <button type="button"  data-widget="remove"><i ></i></button>
    </div>
</div>
<div >
    <div >
        <canvas id="myChart1"></canvas>
    </div>
</div>
</div>
</body>
<script>
var myChart1 = document.getElementById('myChart1').getContext('2d');

// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#777';

var massPopChart = new Chart(myChart1, {
  type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
  data:{
    labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
    datasets:[{
      label:'Population',
      data:[
        617594,
        181045,
        153060,
        106519,
        105162,
        95072
      ],
      //backgroundColor:'green',
      backgroundColor:[
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)'
      ],
      borderWidth:1,
      borderColor:'#777',
      hoverBorderWidth:3,
      hoverBorderColor:'#000'
    }]
  },
  options:{
    title:{
      display:true,
      text:'Largest Cities In Massachusetts',
      fontSize:25,
      responsive: true
    },
    legend:{
      display:true,
      position:'right',
      labels:{
        fontColor:'#000'
      }
    },
    layout:{
      padding:{
        left:50,
        right:0,
        bottom:0,
        top:0
      }
    },
    tooltips:{
      enabled:true
    }



  }
});


  </script>
@endsection