Love Fuel?    Donate

FuelPHP Forums

Ask your question about FuelPHP in the appropriate forum, or help others by answering their questions.
FuelPHP Chart Tutorial
  • cardguys3cardguys3

    Where can someone locate an in-depth tutorial for the feeble minded seek to create interactive charts on a FuelPHP template? My report page doesn't populate charts.js type charts because charts.js needs to link to tables within a DB. FuelPHP uses references to such MySQL. Therefore and education is needed on how to write reports using the referential data.

    My controller simply forges the report view, and nothing more.  Do I need to create a new M&C to create a Chart.js chart? 

    This is where my mind is headed for the report view.   




    <script src="/public/assets/js/Chart.js"></script>
    <div class="row">
       <div class="col-md-12">
          <?php if(Session::get_flash('validation')): ?>
          <div class="alert alert-danger"><?php echo Session::get_flash('validation'); ?></div>
          <?php endif; ?>
          <?php if(Session::get_flash('exception')): ?>
          <div class="alert alert-danger"><?php echo Session::get_flash('exception'); ?></div>
          <?php endif; ?>
          <?php if(Session::get_flash('success')): ?>
          <div class="alert alert-success"><?php echo Session::get_flash('success'); ?></div>
          <?php endif; ?>
          <div class="x_panel">
             <div class="x_title">
                <h2>medXchange Reporting</h2>
                <div class="clearfix"></div>
             </div>
             <div class="x_content">
                Please <a href="mailto:support@medrxchange.com">contact medXchange support</a> for any reporting requests.  <a href="mailto:support@medrxchange.com">Request a report 
                here</a>


       <canvas id="mycanvas" width="640" height="400"></canvas>

        <script type="text/javascript" src="/public/assets/js/jquery-3.2.1.js"></script>
                <script type="text/javascript" src="/public/assets/js/Chart.js"></script>
                <script type="text/javascript" src="/public/assets/js/app.js"></script>


             </div>
          </div>
       </div>
    </div>

    Any code ideas would be quite helpful.  

    Here is the start of one of my views as it pertains to listings...

    <div class="row">
       <div class="col-md-12">
          <div class="col-md-12 col-sm-12 col-xs-12">
             <?php if(Session::get_flash('success')): ?>
             <div class="alert alert-success"><?php echo Session::get_flash('success'); ?></div>
             <?php endif; ?>
             <?php if(Session::get_flash('failure')): ?>
             <div class="alert alert-danger"><?php echo Session::get_flash('failure'); ?></div>
             <?php endif; ?>
             <div class="x_panel">
                <div class="x_title">
                   <h2>Use this forms to move your excess inventory</h2>
                   <div class="clearfix"></div>
                </div>
                <div class="x_content">
                   <?php
                      echo Form::open(array('action' => '/listings/listing', 'class' => 'form-horizontal', 'enctype' => 'multipart/form-data'));
                              
                      // returns <fieldset><legend>Post</legend>
                      echo Form::fieldset_open(array('legend' => ''));
                      ?>
                   <!-- Multiple Radios (inline) -->



  • sosekisoseki
    I guess this is not related to fuelphp.

    Here is some website like how to use chart.js with fuelphp.


    It is translated from Japanese to English.
    So, some would be translated wrong.
  • cardguys3cardguys3
    What I am trying to figure out is, where in fuel PHP do I need to install charts.js?  Do I put charts.js in an asset folder, and if so, which one?  That Japanese tutorial is helpful, but not quite what I'm after.  Any other thoughts? 
  • HarroHarro
    Javascript is frontend, so yes, somewhere in ./public, usually assets (but you can name it what you want, use a CDN, etc).

    Where also depends on how you set it up. By default you have something like ./public/assets/js for javascript files,  ./public/assets/css for stylesheets, etc.
  • cardguys3cardguys3
    This is what I currently have...

    RED <script src="/public/assets/js/Chart.bundle.min.js"></script>
    <script src="/public/assets/js/Chart.min.js"></script>

    END RED
    Then this is my code in the body of that same page...

    BLUE
    </div><div class="container"><canvas id="myChart" width="800" height="500"></canvas></div> <script> var ctx=document.getElementById('myChart').getContext('2d');
    var myChart=new Chart(ctx, {
    type: 'line', data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],

    datasets:

    [ {
    label: 'apples', data: [12, 19, 3, 17, 6, 3, 7], backgroundColor: "rgba(153,255,51,0.4)"
    }, {
    label: 'oranges', data: [2, 29, 5, 5, 2, 3, 10], backgroundColor: "rgba(255,153,0,0.4)"
    }]}});
    </script> <div class="x_content">

    END BLUE
    Ultimately, this produces a blank white screen. Any thoughts as to where I should place the text in red?

Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Categories

In this Discussion