Advanced Charts?

App Development
3

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

image
image3240×1922 245 KB

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:

6 Likes