Charts are not showing with the owl-carousel slider

[patcaulfield]

Hi,

I try to use the charts in the owl-carousel slider
but not showing.
please let me know how to fix this error.

Thanks

---

[Support]

Hello, thanks for your purchase.

First change the HTML of carousel to:

<div id="chartCarousel" class="owl-carousel owl-theme nav-style-1 mb-0"...................

Give unique ID to chart inside the carousel:

<div class="chart chart-md flotBasic2" id="flotBasic2"></div>

Add in (js/custom.js):

$('#chartCarousel').on('initialized.owl.carousel', function(){
	if( $('.flotBasic2').get(0) ) {
		
		var flot = $('.floatBasic2').data('plot');

		if( flot ) {
			flot.destroy();
		}

		var plot = $.plot('.flotBasic2', flotBasicData, {
			series: {
				lines: {
					show: true,
					fill: true,
					lineWidth: 1,
					fillColor: {
						colors: [{
							opacity: 0.45
						}, {
							opacity: 0.45
						}]
					}
				},
				points: {
					show: true
				},
				shadowSize: 0
			},
			grid: {
				hoverable: true,
				clickable: true,
				borderColor: 'rgba(0,0,0,0.1)',
				borderWidth: 1,
				labelMargin: 15,
				backgroundColor: 'transparent'
			},
			yaxis: {
				min: 0,
				max: 200,
				color: 'rgba(0,0,0,0.1)'
			},
			xaxis: {
				color: 'rgba(0,0,0,0.1)'
			},
			tooltip: true,
			tooltipOpts: {
				content: '%s: Value of %x is %y',
				shifts: {
					x: -60,
					y: 25
				},
				defaultTheme: false
			}
		});
	}
});

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[patcaulfield]

Thanks for replying…

I think it shows but now another issue happened.
carousel and tab button have same error.
check, please

http://designrhythm.co.kr/porto/index-ask.html
http://designrhythm.co.kr/porto/index-ask2.html

Thank you

---

[Support]

Hello,

Regarding carousel:
The problem is you are not initializing the morrisStacket2 and ChartistLineInterpolationSmoothing chart on initialization of carousel.

Please try with this JS at (js/custom.js):
https://pastebin.com/raw/nSLRL2jt

Regarding tabs:
Is needed empty and initialize the charts on tab change. Try adding this below add (js/custom.js):
https://pastebin.com/raw/qUJVZwmM

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[patcaulfield]

Hello,

In the tab menu, the chart is working. 🙂
http://designrhythm.co.kr/porto/index-ask2.html

but, the carousel slider still has a problem.
when the page loads, some chart is showing but others are not showing or showing but can not load the data in the carousel.
http://designrhythm.co.kr/porto/index-ask.html

Thank you for your support.

---

[patcaulfield]

Hello,

I replace the owl-carousel

<div id=”chartCarousel” class=”owl-carousel owl-theme nav-style-1 mb-0″ data-plugin-options=”{‘responsive’: {‘576’: {‘items’: 1}, ‘768’: {‘items’: 2}, ‘992’: {‘items’: 3}, ‘1200’: {‘items’: 4}}, ‘margin’: 25, ‘loop’: true, ‘nav’: true, ‘dots’: true, ‘autoplay’: true, ‘autoplayTimeout’: 3000}”>

to

<div class=”owl-carousel owl-theme show-nav-title” data-plugin-options=”{‘items’: 6, ‘margin’: 10, ‘loop’: false, ‘nav’: true, ‘dots’: false}”>

then, the chart is showing.
I’ll check again and if I have a more question, I ask again

Thank you 🙂

---

[patcaulfield]

Hello,

The charts are showing but only the problem is when the carousel change the option ‘loop’: false to ‘loop’: true
then some chart data is not working.

please, check this error, please.

http://designrhythm.co.kr/porto/index-ask.html

Thank you.

---

[Support]

Hello,

Great that almost all issues are resolved!

Sorry I forgot to mention in my last reply for you that carousel with loop enabled will not works.

Instead, my suggestion for you is enable the rewind option of carousel:

<div id="chartCarousel" class="owl-carousel owl-theme nav-style-1 mb-0"
	data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 2}, '992': {'items': 3}, '1200': {'items': 4}}, 'margin': 25, 'loop': false, 'nav': false, 'dots': false, 'autoplay': true, 'autoplayTimeout': 3000, 'rewind': true}">

* Note 'rewind': true.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[patcaulfield]

Hello,

Wow, great.
Thank you for your help.

See you at the next error time. 🙂

---

[Support]

Hello,

Great! 🙂

If you need further assistance feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts