You must be logged in to post your query.
Home › Forums › Chart Support › Canvas.js working in localhost but not working after upload to the Server
Tagged: codeignitor, mysql, php
canvas JS $(function () { / */ 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>
<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 ?>
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 ?>
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); }
@santoshbaruah,
Please take a look at the gallery example on rendering chart in PHP with data from database. You can also download sample project from our download page to run it locally.
If this doesn’t help you fulfill your requirements or finding any difficulty in integrating CanvasJS in your PHP page, kindly share sample project along with sample database over Google-Drive or Onedrive so that we can run it locally at our end, understand the issue you are facing and help you out.
— Vishwas R Team CanvasJS
You must be logged in to reply to this topic. Login/Register