Using Apex Charts

[Andrea]

Hello all,

can you please give me a hint how to use apex charts in nubuilder?
I can't get it working.

I made a launch form and added a html element.


Code of html element:

Code: Select all

<div id="chart1"></div>

Code of the launch form's "PHP Before Edit":

Code: Select all

nuAddJavascript("

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

    <script>
      
        var options = {
          series: [{
          name: 'Yearly Profit',
          data: [{
            x: '2011',
            y: 1292,
			fillColor: '#FFBF00'
          }, {
            x: '2012',
            y: 4432,
			fillColor: '#FF4000'			
          }, {
            x: '2013',
            y: 5423,
			fillColor: '#74DF00'			
          }, {
            x: '2014',
            y: 6653,
			fillColor: '#FF8000'			
          }, {
            x: '2015',
            y: 8133,
            fillColor: '#04B431',
            strokeColor: '#C23829'
          }, {
            x: '2016',
            y: 7132,
			fillColor: '#00BFFF'			
          }, {
            x: '2017',
            y: 7332,
			fillColor: '#0080FF'			
          }, {
            x: '2018',
            y: 6553,
			fillColor: '#9A2EFE'			
          }]
        }],
          chart: {
          height: 350,
          type: 'bar',
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '60%'
          },
        },
        stroke: {
          width: 0,
        },
        dataLabels: {
          enabled: true
        },
        yaxis: {
          labels: {
            formatter: function(val) {
              return val / 1000 + 'K $'
            }
          }
        },
        fill: {
          opacity: 1,
        },
        xaxis: {
          type: 'datetime'
        }
        };

        var chart = new ApexCharts(document.querySelector('#chart1'), options);
        chart.render();
      
    </script>

");

I'm not sure if the code is in the right place.
Nothing shows up in the html element on the form

Certainly this is just test code. Later on I'll get the data from sql statement.

Thank you very much in anticipation &
Best wishes

Andrea

[kev1n]

Hi Andrea,

Set $nuConfigIncludeApexCharts = true; in nuconfig.php and restart the browser.

In the form's Custom Code:

Code: Select all

var options = {
	  series: [{
	  name: 'Yearly Profit',
	  data: [{
		x: '2011',
		y: 1292,
		fillColor: '#FFBF00'
	  }, {
		x: '2012',
		y: 4432,
		fillColor: '#FF4000'			
	  }, {
		x: '2013',
		y: 5423,
		fillColor: '#74DF00'			
	  }, {
		x: '2014',
		y: 6653,
		fillColor: '#FF8000'			
	  }, {
		x: '2015',
		y: 8133,
		fillColor: '#04B431',
		strokeColor: '#C23829'
	  }, {
		x: '2016',
		y: 7132,
		fillColor: '#00BFFF'			
	  }, {
		x: '2017',
		y: 7332,
		fillColor: '#0080FF'			
	  }, {
		x: '2018',
		y: 6553,
		fillColor: '#9A2EFE'			
	  }]
	}],
	  chart: {
	  height: 350,
	  type: 'bar',
	},
	plotOptions: {
	  bar: {
		horizontal: false,
		columnWidth: '60%'
	  },
	},
	stroke: {
	  width: 0,
	},
	dataLabels: {
	  enabled: true
	},
	yaxis: {
	  labels: {
		formatter: function(val) {
		  return val / 1000 + 'K $'
		}
	  }
	},
	fill: {
	  opacity: 1,
	},
	xaxis: {
	  type: 'datetime'
	}
	};

	var chart = new ApexCharts(document.querySelector('#chart1'), options);
	chart.render();

[Andrea]

Hi Kev1n,

thanks a lot! That's it
I forgot enabling it in nuconfig.php.

I'm happy!

Best wishes

Andrea