Canvas Support

PIE CHARTS not responsive

7 replies · opened Jul 21, 2016

SsaloiofunJul 21, 2016

Hi,
Is there a way to make the pie charts responsive?
I'm using it to show from 1% to 100%, and it works fine on desktop but the circle becomes small when I use a mobile phone.
Please, let me know.

Thank you

SSemicolon WebSTAFFJul 22, 2016

Hello,

Pie Charts are already responsive and appears to be working fine for us. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SsaloiofunJul 22, 2016

http://www.funcodelab.com/nextbit/

Thank you for your reply.
If you use your mobile to access the website, and scroll to "OUR SUCCESS RATES" you will see that the process circle becomes small.
The same this happens when I resize my web browser, refresh the page and scroll to the process circles.

Thank you.

SsaloiofunJul 23, 2016

Hi

Also, how can I make my Accordions to be all collapsed on load?

Thank you

SSemicolon WebSTAFFJul 25, 2016

Hello,

  1. Please find and delete the following code in the css/responsive.css File:
canvas {
	max-width: 100%;
	height: auto !important;
}
  1. Simply add the data-state="closed" Attribute to the .accordion Element.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

SsaloiofunJul 25, 2016

Hi,
Thank you for the reply.

I updated the website http://www.funcodelab.com/nextbit2/diagnostic-procedures.html

However, the pie chart becomes off and the static text is not in the center anymore on small devices.

Also, in the accordion section, is it possible to make the header clickable to collapse after it has been expanded?

Thank you for the help.

SSemicolon WebSTAFFJul 27, 2016

Hello,

Yes there appears to be a Minor Bug with the Code. Please find the following code in the js/functions.js File: 

if( $body.hasClass('device-lg') || $body.hasClass('device-md') ){
	element.css({'width':roundSkillSize+'px','height':roundSkillSize+'px','line-height':roundSkillSize+'px'}).animate({opacity:0}, 10);
	element.appear( function(){
		if (!element.hasClass('skills-animated')) {
			var t = setTimeout( function(){ element.css({opacity: 1}); }, 100 );
			SEMICOLON.widget.runRoundedSkills( element, properties );
			element.addClass('skills-animated');
		}
	},{accX: 0, accY: -120},'easeInCubic');
} else {
	SEMICOLON.widget.runRoundedSkills( element, properties );
}

and replace it with: 

element.css({'width':roundSkillSize+'px','height':roundSkillSize+'px','line-height':roundSkillSize+'px'}).animate({opacity:0}, 10);
element.appear( function(){
	if (!element.hasClass('skills-animated')) {
		var t = setTimeout( function(){ element.css({opacity: 1}); }, 100 );
		SEMICOLON.widget.runRoundedSkills( element, properties );
		element.addClass('skills-animated');
	}
},{accX: 0, accY: -120},'easeInCubic');

This should definitely fix the issue.

  1. This is Definitely Possible too. Please find the following code in the js/functions.js File:
if( $(this).next().is(':hidden') ) {
	element.find('.acctitle').removeClass('acctitlec').next().slideUp("normal");
	$(this).toggleClass('acctitlec').next().slideDown("normal");
}

and replace it with: 

if( $(this).next().is(':hidden') ) {
	element.find('.acctitle').removeClass('acctitlec').next().slideUp("normal");
	$(this).toggleClass('acctitlec').next().slideDown("normal");
} else {
	$(this).removeClass('acctitlec').next().slideUp("normal");
}

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard