Home › Forums › Chart Support › Canvas.js working in localhost but not working after upload to the Server › Reply To: Canvas.js working in localhost but not working after upload to the Server
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 ?>