FVANCOP / ChartNew.js

MIT License
420 stars 143 forks source link

Ticks manipulation functions missing from documents? #467

Closed lokapal closed 7 years ago

lokapal commented 7 years ago

Sorry for bothering you again :) But problem that I took ChartNew for the serious work/GD::Graph replacement. I've made almost all, but I could not find (at least, in documents in wiki) any info concerning real ticks manipulation:

  1. How can I change the color of ticks?
  2. How can I change the thickness of ticks?
  3. How can I change the position of ticks? Right now (at least, for bar chart) ticks always locate in empty space BEFORE bars. As for me, they should be directly under the center of the each bar.
  4. I cannot find any info concerning major ticks/minor ticks. This categories are used in scientific graphs very often. Major ticks usually have labels and are more thick and long, minor ticks usually don't have labels and are more thin and short. Grid lines usually are drawn along major ticks and are hidden along minor ticks.

Anyway thanks for great library! :)

FVANCOP commented 7 years ago

You do not bother me :-)

There is almost no options for ticks...

Q1 : Ticks have the same color has the bars; Q2 : The size of the ticks are set through 4 options : scaleTickSizeLeft: 5, scaleTickSizeRight: 5, scaleTickSizeBottom: 5, scaleTickSizeTop: 5, Q3 : It is not possible to change the position of the ticks; Q4 : Minor ticks are not foreseen

But... all your requests are affortable and justified. I will put them in account. I hope that I can deliver something within two weeks.

lokapal commented 7 years ago

Oh, very well!

Then I can show some glitches that are present now. You can open attached html in any browser. testbig.zip

  1. In general (usual) case ticks should have the color of the axis. You even can don't add any additional options - I cannot imagine that the user wants to have axes in (e.g.) navy blue color, but ticks in light red :)
  2. Right now you can see, that 0 means "something below zero" :) You can save time to draw nothing in these cases (but labels should present, 'course).
  3. Right now there are problem with overlapping axes by graphs. Axis, of course, should be at the top layer of drawing. I'd say (as for bars) the problem is that bars are drawn with the some shift down. Probably, if bars are drawn directly from the X axis they should not have bottom outline. Problems 2 and 3 are clearly seen on the following test graph: testbig2.zip
  4. The last (and, as always not least :) problem for now - ChartNew is SOOOOOO slow with big graphs in Firefox. When animation is turned off the graph itself is quickly drawn, but try to move mouse over bars to highlight them! (and compare, please, the responsiveness with InternetExplorer and Chrome!) I've tried to minify your chart, and it was for good. Probably (if it can be done semi- or fully automatically) you could release the chart code splitted to one general part and smaller parts with the each variant (one for bars, one for pie chart, one for radar etc).
  5. If the size of the chart is really big (very many bars), it's obvious that chart cannot be drawn precisely of canvas size. So it would be good to obtain somehow the REAL size of the chart (including axes, legends, titles etc.) to crop canvas. Right now I cannot find this kind of callback.
FVANCOP commented 7 years ago

With the last published version, some of your request are fullfilled.

Minor ticks : See https://github.com/FVANCOP/ChartNew.js/wiki/100_030_Axis#scaleminortickcolor and subsequent options. You have to specify "scaleMinorTickVerticalCount" and/or "scaleMinorTickHorizontalCount" to a value greater than zero (for instance 3) to get minor ticks.

For the "zero" values, something is drawn to allow to see something (annotateDisplay) when the mouse is over a zero value. The option showZeroValue has been added. Set it to false if you don't want to see something for a zero value.

By default, scales are drawn before the chart elements; Set option scaleOverlay to true if you want to draw the scales after the chart element.

lokapal commented 7 years ago

Thanks for the new version, Francois! I just tested it (minified by Google Closure compiler in "simple" mode). Report:

  1. Charts with highlighting are blinking in MSIE/Safari still.
  2. Horizontal and vertical axes/scales have different colors.
  3. The chart "Bar" still has small negative offset below "X" axis/scale (still there is something below 0 when data is 0). scrbar You could take my previous testbig.zip and testbig2.zip, replace ChartNew.js to the new one and see yourself.
FVANCOP commented 7 years ago

Thanks for reporting the problems.

  1. Highlight : unfortunately, I could not reproduce the problem. I think there must be a problem in your code (a comma is missing in the option before annotateDisplay ?);
  2. Color and width of Y axis were not correct. It has been fixed in last published version that is available for download;
  3. Small negative offset : those appears only for small values; It is because the width of the border (barStrokeWidth : 3) is greater than the hight of the bar... : the top border of the bar is limited to the value of the data . For instance, for the value 1, the top of the border line around the bar is displayed just over the zero value (with is inside the axis bar that is centered on the zero value); But, because this bar has a width of 3, the bottom of the bar is displayed below the axis. I strongly recommand to not display a line around the bar (barStrokeWidth : 0) - Statistically, it is not a good practice to draw such a line around the bar. The only advantage of having a line around the bar, is that, if you have a small value (what it is your case), the annotate display works for those values. If you set barStrokeLine to 0, it will be very difficult to display the annotation for the data with value equal to 1...

Do not hesitate to take contact with me directly by mail such that other ChartNew.js users are not receiving lot of mails (direct mails are also welcome :-) )