Home forums Using CanvasJS Canvas.js working in localhost but not working after upload to the Server

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Vishwas R 4 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25301

    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 ?>
    • This topic was modified 4 months, 2 weeks ago by  santoshbaruah.
    #25303

    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 ?>
    #25304

    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);
    
    }
    #25305

    @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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.