Advanced Charts?

Has anyone had luck or can guide me on using more advanced and more visual charts? I need advanced charts to plot different values for each salesperson, now I can only show one line total.

Thank you

Were working on this.

Until its ready, do you have a specific charting library you wish to use? Ill make you a demo video on how to achieve this.

Found a great library and a somewhat easy way to do this. End result can look like this for example:

FIrst add this code to the Footer:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Then add some HTML in the page:

<div id="chart">&nbsp;</div>

Javascript Code, don’t forget to update the component_ID to yours plus any other pointer changes necessary:

TB.render('component_3', function(data) {
// 	console.log(data);
	
	var column1 = data.columnData[0]; 
	var column2 = data.columnData[1]; 
	var column3 = data.columnData[2]; 
    console.log(column1);
    
    var options = {
      chart: {
        height: 350
      },
      series: [{
        type: 'line',
        name: 'Revenue',
        data: column2
      },
      {
        name: 'Cost',
        type: 'column',
        text: column1,
        data: column3
      }],
      
      yaxis: {
          labels: {
            formatter: function (value) {
              return formatter.format(value);
            }
          },
        },
      
      
      xaxis: {
        categories:column1,
        type: 'category',
        labels: {
         rotate: -48,
         rotateAlways: true,
        }
      }
    }

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
	
});

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

Below is a quick and rough video walkthrough:

4 Likes

Moe-

If you all are looking at external charting library, I have fumbled around with Highcharts and Chartjs.

Adam

1 Like

Thanks. Highcharts is what we actually now natively use on Tadabase. Some complaint we heard was that it looked a bit dated. ChartJS looks really nice too. This same method above can easily be applied to any charting software.

1 Like