already try this but not working
window.onload = function () {
setTimeout(function () {
var ctx = document.getElementById("valueChart").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}, 1000);
}
Canvas JS $(function () { /* Canvas JS * ------- * Here we will create a few charts using Canvas JS */ var areaChartData = { labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [ { label : 'Electronics', fillColor : 'rgba(210, 214, 222, 1)', strokeColor : 'rgba(210, 214, 222, 1)', pointColor : 'rgba(210, 214, 222, 1)', pointStrokeColor : '#c1c7d1', pointHighlightFill : '#fff', pointHighlightStroke: 'rgba(220,220,220,1)', data : report_data } ] }
//-------------
//- BAR CHART -
//-------------
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChart = new Chart(barChartCanvas)
var barChartData = areaChartData
barChartData.datasets[0].fillColor = '#00a65a';
barChartData.datasets[0].strokeColor = '#00a65a';
barChartData.datasets[0].pointColor = '#00a65a';
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : 'rgba(0,0,0,.05)',
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines : true,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 1,
//String - A legend template
legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
//Boolean - whether to make the chart responsive
responsive : true,
maintainAspectRatio : true
}
barChartOptions.datasetFill = false
barChart.Bar(barChartData, barChartOptions) }) </script>
some html
<div class="box">
<div class="box-header">
<h3 class="box-title">Total Paid Orders - Report</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="chart">
<canvas id="barChart" style="height:250px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<div class="box">
<div class="box-header">
<h3 class="box-title">Total Paid Orders - Report Data</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="datatables" class="table table-bordered table-striped">
<thead>
<tr>
<th>Month - Year</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<?php foreach ($results as $k => $v): ?>
<tr>
<td><?php echo $k; ?></td>
<td><?php
echo $company_currency .' ' . $v;
//echo $v;
?></td>
</tr>
<?php endforeach ?>