Jump to content
plethoraonline-1492071863

Converting FormBuilder tables to Charts - EVERYWHERE

Recommended Posts

plethoraonline-1492071863

Hello Jreviewers! 

 

Firstly i want to thank Alejandro for such an amazing component, and thanks to all this community of this forum from which i have learnt lots of stuff.

 

This is my first post here and i want to share with you how to convert any table developed by FormBuilder field to an amazing chart (Line Chart, Columns, Columns Area and more. )

 

The example im going to show to you is a performance chart of an Educational Institution in Years.

 

I have used and modified Inventory code is ready made code: 

 

<?php
$inventory = json_decode($text, true);
?>

<div class="jrTableGrid jrDataList">

   <div class="jrRow jrDataListHeader">

      <div class="jrCol">#</div>
      <div class="jrCol"><?php __t("Name");?></div>
      <div class="jrCol"><?php __t("SKU");?></div>
      <div class="jrCol"><?php __t("Price");?></div>
      <div class="jrCol"><?php __t("In Stock");?></div>

   </div>

   <?php $i=0; foreach ($inventory AS $item): $i++;?>

      <div class="jrRow">

         <div class="jrCol"><?php echo $i;?></div>
         <div class="jrCol"><?php echo $item['name'];?></div>
         <div class="jrCol"><?php echo $item['sku'];?></div>
         <div class="jrCol">$<?php echo $item['price'];?></div>
         <div class="jrCol"><span class="jrIcon<?php echo $item['in-stock'] ? 'Yes' : 'No';?>"></div>

      </div>

   <?php endforeach;?>

</div>

What i did is to convert this kind of table to a real table using table tags (thead, tbody) and the result was this:

<?php
$inventory = json_decode($text, true);
?>

<div class="row">
<div class="col-sm-12" style="padding-left:0px; padding-right:0px;">
<table width="100%" class="highchart" data-graph-container-before="1" data-graph-type="line" data-graph-line-width="5">
    <thead>
        <tr>                                  
            <th><?php __t("Viti");?></th>
            <th><?php __t("Nr. Edukatoreve");?></th>
            <th><?php __t("Fëmijë / Grup");?></th>
            <th><?php __t("Çmimi / Ditë");?></th>
            <th><?php __t("Kapaciteti Optimal");?></th>
            <th><?php __t("Numri Total");?></th>
        </tr>
     </thead>
          
     <tbody>
         <?php $i=0; foreach ($inventory AS $item): $i++;?> 
        <tr>
            <td><?php echo $item['viti'];?></td>
            <td><?php echo $item['eduaktore'];?></td>
            <td><?php echo $item['femije/grup'];?></td>
            <td><?php echo $item['cmimi/dite'];?> Leke</td>
            <td><?php echo $item['Kapaciteti Optimal'];?></td>
            <td><?php echo $item['Numri Total'];?></td>
        </tr>
  <?php endforeach;?>
    </tbody>
</table>
</div>
</div>


Also its edited to my needs.

 

I have used this plugin: Jquery HighChartTable Plugin

 

After followed the directions in the site like adding js files in my template (invetory.thtml)  my code looked like this: 

<?php
$inventory = json_decode($text, true);
?>

<div class="row">
<div class="col-sm-12" style="padding-left:0px; padding-right:0px;">
<table width="100%" class="highchart" data-graph-container-before="1" data-graph-type="line" data-graph-line-width="5">
    <thead>
        <tr>                                  
            <th><?php __t("Viti");?></th>
            <th><?php __t("Nr. Edukatoreve");?></th>
            <th><?php __t("Fëmijë / Grup");?></th>
            <th><?php __t("Çmimi / Ditë");?></th>
            <th><?php __t("Kapaciteti Optimal");?></th>
            <th><?php __t("Numri Total");?></th>
        </tr>
     </thead>
          
     <tbody>
         <?php $i=0; foreach ($inventory AS $item): $i++;?> 
        <tr>
            <td><?php echo $item['viti'];?></td>
            <td><?php echo $item['eduaktore'];?></td>
            <td><?php echo $item['femije/grup'];?></td>
            <td><?php echo $item['cmimi/dite'];?> Leke</td>
            <td><?php echo $item['Kapaciteti Optimal'];?></td>
            <td><?php echo $item['Numri Total'];?></td>
        </tr>
  <?php endforeach;?>
    </tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="margin-top:20px; padding-left:0px; padding-right:0px;">
<script src="https://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script src="jquery.highchartTable.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
  $('table.highchart') .highchartTable();
});
</script>

</div>
</div>

So what ive done is adding the three lines of jquery calls: 

<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script src="jquery.highchartTable.js" type="text/javascript"></script>

in the end of the inventory.html also calling the chart by the: 

<script>
$(document).ready(function() {
  $('table.highchart') .highchartTable();
});
</script>

Thats all. 

 

Please check the result in the attachment.

 

 

Note: Sometimes im getting a conflict with the js which conflicts with Jreview Maps or Advanced Filter on Live Resuts and it stops working but hope Alejandro or guys here can help me to solve that problem.

 

Wish you the best.

Laert

Share this post


Link to post
Alejandro

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post
plethoraonline-1492071863

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Edited by plethoraonline-1492071863

Share this post


Link to post
Tony B.

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Edited by Tony B.

Share this post


Link to post
plethoraonline-1492071863

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post
Tony B.

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.