Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrong Display (Scaling?) when setting style width/heigth to 100% #493

Open
MasterOfBytes opened this issue Jan 19, 2017 · 4 comments
Open

Wrong Display (Scaling?) when setting style width/heigth to 100% #493

MasterOfBytes opened this issue Jan 19, 2017 · 4 comments

Comments

@MasterOfBytes
Copy link

MasterOfBytes commented Jan 19, 2017 •
edited
Loading

If you set the canvas element to style="width:100%; height: 100%;" to match the parent, it doesn't scale up.
edit: the same occours when setting absolute values (xxx px) per style.

(ChartJS worked if i remember right) (Tested with Chrome & Firefox)
image
@FVANCOP
Copy link
Owner

FVANCOP commented Jan 19, 2017

Can you please send the html to my email address. You will find it in the code of chartnew.js

@FVANCOP FVANCOP mentioned this issue Jan 22, 2017
Merged
FVANCOP pushed a commit that referenced this issue Jan 22, 2017
new options top solve issue #485 and solution for issue #493
3dd5bd2 
In order to solve request  #485 ,  new options have been introduced for axis. With those new options, the minimum value, maximum value, number of steps and step width can be better managed by the user.
The algorithm for computing the y Axis has been changed (in previous version a getValueBounds function was written for all type of charts; In new version, the getValueBounds functions have been replaced by a unique function and integrated with the scale computation - with this change, code could be reduced). In theory, those changes are transparents except in some specific cases : bugs have been found in previous version and are now fixed in this release. So it can be that the display is a little bit different in some cases.  

The code has also been updated to solve issue #493 but I'm not sure that this will be correct in all cases...

-> forceGraphMin and forceGraphMax : (see https://github.com/FVANCOP/ChartNew.js/wiki/100_070_Charts_Layout#forcegraphmax)

When option graphMin (resp: graphMax) is specified, the minimum (resp:maximum) value of the Y axis is set by the value associated to graphMin (resp:graphMax) even if the minimum (resp: maximum) value to be displayed is lower (resp: greater) that this value. Is you set option forceGraphMin (resp:forceGraphMax) to false (default value is true), the minimum (resp:maximum) value of the axis will at most (resp:least) the value of graphMin (resp:graphMax) but will be lower (resp:greater) if the minimum (resp: maximum) of the value to be displayed is lower (resp:greater) than graphMin (resp:graphMax). 

-> forceScale (see https://github.com/FVANCOP/ChartNew.js/wiki/100_030_Axis#forcescale )

 When scaleOverride option is set to false (which is the default value for this option), the Y Scale layout (minimum value, maximum value, number of steps and step width) is computed by the application. The minimum and the maximum values can be forced through options graphMin and graphMax options. If you want to force the number of steps or the stepWidth, you can specify it through option forceScale. If option forceScale is set to "steps", the number of steps for the y axis is defined by the value of option scaleSteps (=> If you set option forceScale to "steps", do not forget to also define a value for option scaleSteps !). If option forceScale is set to "stepWidth", the width of the steps for the y axis is defined by the value of option scaleStepWidth (=> If you set option forceScale to "stepWidth", do not forget to also define a value for option scaleStepWidth !).
@FVANCOP
Copy link
Owner

FVANCOP commented Jan 22, 2017

Thanks for the sending the code !

Problem appears when the canvas was defined like this :

A fix has been introduced in the last version. I hope this solution is correct in all cases (not sure what you could specify in the style definitions...; Only "px" values ? Did not find something else on the web documentation).

@MasterOfBytes
Copy link
Author

Thanks for your effort.
But this still doesn't solve the Problem the right way. I think you have to determinate the width and height in another way?
Because when you set the width and/or height to a percent value it is still the same.

You can use the sample again:
updateChartPie.html
This time replace it with:

document.write("<canvas id=\"canvas_Pie\" style=\"height: 500px; width:100%;\"></canvas>");

@FVANCOP FVANCOP mentioned this issue Feb 2, 2017
Merged
FVANCOP pushed a commit that referenced this issue Feb 2, 2017
Merge pull request #497 from FVANCOP/solution_issue_493_and_495_2nd_try
4034826 
This is the second try to solve issues #493 and #495.

A new option has also been defined : forcedAspectRatio. Through this option, you can now force the height of the chart as a percentage of the width. This is particulary interesting when the width is defined as a percentage of his container.

See new chapter in wiki documentation : https://github.com/FVANCOP/ChartNew.js/wiki/125_Canvas_dimensions

See also https://github.com/FVANCOP/ChartNew.js/wiki/100_015_ResponsiveChart#forcedaspectratio
@FVANCOP
Copy link
Owner

FVANCOP commented Feb 2, 2017

Hi,

A new version has been published. I hope that it will be (more) correct.

@MasterOfBytes : Thanks you for reporting the problem and for the quick feedback.

Regards,
François

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@FVANCOP @MasterOfBytes