You are viewing limited content. For full access, please sign in.

Question

Question

Can I get a report in a bar graph that adds up # of miles per month (by Submission Date)

asked on July 14, 2022 Show version history

I'm looking for help creating a report that will show a bar graph of totals of miles graded per month, based on a form submitted by grader operators that they fill out every work day.  I would want the form to total the number of miles reported as graded and group the totals per month.  Can that be done?  The form is brand new and still in testing, but this is all I've got so far...

UPDATE:  I have now revised the form to have hidden fields for Year and Month, which will help, but I have also now been told they want the report to be able to tally the miles per year or month PER LOCATION!

 

0 0

Replies

replied on July 18, 2022

Hi Connie, 

 

An idea, but one that would take work to implement, is to use a JS chart library like Chart JS. I was able to add some charts in a form based on table values. There are different JS chart libraries you could use. ChartJS has some nice bar charts that I think could do what you need. 

 

Sample of a Chart I added to a form's "report" page:

  • added custom HTML block
  • Added CSS to HTML block (control size)
  • In my case, created a query in sql db, used a lookup rule to add the results to a table. 
  • Javascript:
    • //pie chart js CDN
      $(document).ready(function(){
      	$.getScript('https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js', function(){
            var activeCount =  $('.statusCountTbl tbody tr:nth-child(1)').find('.col2 input').val();
            var inactiveNonExecCount = $('.statusCountTbl tbody tr:nth-child(2)').find('.col2 input').val();
            var inactiveCompleteCount = $('.statusCountTbl tbody tr:nth-child(3)').find('.col2 input').val();
            var pendingCount= $('.statusCountTbl tbody tr:nth-child(4)').find('.col2 input').val();
            var blankCount = $('.statusCountTbl tbody tr:nth-child(5)').find('.col2 input').val();
            
            
            const ctx = document.getElementById('myChart');
            const myChart = new Chart(ctx, {
              type: 'pie',
              data: {
                labels: ['Active', 'Inactive Non Executed', 'Inactive Complete', 'Pending', 'Blank'],
                datasets: [{
                  label: 'Status Count',
                  data: [activeCount, inactiveNonExecCount, inactiveCompleteCount, pendingCount, blankCount],
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',
                      'rgba(153, 102, 255, 0.2)',
                      'rgba(255, 159, 64, 0.2)'
                  ],
      
                  hoverOffset: 4
                }]
              },
              options: {
                plugins: {
                  title: {
                    display: true,
                    text: 'Contracts by Status'
                  }, 
                }
              }
            });
          });
      });
      

       

Tons of information on the ChartsJS website that explain how to use their library. Another option: echarts.apache.org.

 

Hope this helps

 

0 0
replied on July 18, 2022

Thanks.  I was thinking I might have to start an SQL db to get this done.  I don't have any experience with the Chart idea, but thanks for the tip.  I'll have to look into this option and see if I can work it out!

0 0
replied on July 31, 2024

Are these JS chart libraries compatible with the Modern Form Designer Javascript?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.