nuBuilder Forum

Posted: **Sun Feb 20, 2022 12:40 pm**

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

Posted: **Sun Feb 20, 2022 1:24 pm**

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();

Posted: **Mon Feb 21, 2022 4:53 pm**

Hi Kev1n,

thanks a lot! That's it

I forgot enabling it in nuconfig.php.

I'm happy!

Best wishes

Andrea

nuBuilder Forum

Using Apex Charts

Using Apex Charts

Re: Using Apex Charts

Re: Using Apex Charts