Trailing zeros on y axis

[webguy262]

I need to display trailing zeros on y axis values so the values have the same number of significant digits. For example, a y axis value series should be '2.0, 2.5, 3.0, etc.' not '2, 2.5, 3, etc.' How can I accomplish this?

[markosko]

based on this https://github.com/FVANCOP/ChartNew.js/wiki/100_050_Format#fmtylabel You can try this

function fmtChartJSPerso(config,value,fmt){
   return value.toFixed(2);
};

var options = {
  fmtYLabel : "Numbers,
  additional options....
}

[webguy262]

So are you sayinbg I need to write a "Numbers" function like the one shown here? https://github.com/FVANCOP/ChartNew.js/wiki/100_050_Format

[markosko]

what you need to use is toFixed method like in comment did you try it ?

[webguy262]

Yes, I placed the function just before my options like this...

`function fmtChartJSPerso(config,value,fmt){ return value.toFixed(2); };

var setopts_oh = { responsive : true, animation : true, dynamicDisplay : true,
scaleOverride : true, scaleStartValue : 0, scaleSteps : 10, scaleStepWidth : 0.01,
scaleStartValue : 0, yAxisLabel : "mg / kg", annotateDisplay : true, annotateLabel : "<%=v2+' '+v3%>" } ` But I am not sure where this part of your suggestion comes in...

fmtYLabel : "Numbers,

[markosko]

var setopts_oh = {
responsive : true,
animation : true,
dynamicDisplay : true,
scaleOverride : true,
scaleStartValue : 0,
scaleSteps : 10,
scaleStepWidth : 0.01,
scaleStartValue : 0,
yAxisLabel : "mg / kg",
annotateDisplay : true,
annotateLabel : "<%=v2+' '+v3%>",
fmtYLabel : "Numbers"
}
`

[webguy262]

Still displays the same: What the client wants is for the '0.1' at the top of the y axis to be '0.10.' It's more of an issue on one where the scale values are different at each step likje this one:

[FVANCOP]

Hi,

Markosko solution was correct (but a quote was missing).

Try this :

 function fmtChartJSPerso(config,value,fmt){
   if (fmt=="Number2DEC") return value.toFixed(2);
   else return value;
 };      
 var opts= {
     fmtYLabel:"Number2DEC"
 };

This has been implemented in the new sample Samples\ylabel2dec.html

[markosko]

not sure what you have in code for options and so but it's working for me, maybe @FVANCOP will know whats the problem

[webguy262]

Thanks for all the help guys, but I'm not there yet. Here are two attempts, one without the scales options I'm using b/c I thought the formatting might not work with scale options.

This code

`function fmtChartJSPerso(config,value,fmt){ if (fmt=="Number2DEC") return value.toFixed(2); else return value; };

var setopts_oh = { responsive : true, animation : true, dynamicDisplay : true,
scaleOverride : true, scaleStartValue : 0, scaleSteps : 10, scaleStepWidth : 0.01,
scaleStartValue : 0, yAxisLabel : "mg / kg", annotateDisplay : true, annotateLabel : "<%=v2+' '+v3%>", fmtYLabel : "Number2DEC" }`

This code...

`function fmtChartJSPerso(config,value,fmt){ if (fmt=="Number2DEC") return value.toFixed(2); else return value; };

var setopts_oh = { responsive : true, animation : true, dynamicDisplay : true,
/ scaleOverride : true, scaleStartValue : 0, scaleSteps : 10, scaleStepWidth : 0.01,
scaleStartValue : 0, / yAxisLabel : "mg / kg", annotateDisplay : true, annotateLabel : "<%=v2+' '+v3%>", fmtYLabel : "Number2DEC" }`

And just to make sure there's nothing in the rest of my code, here is everything for that chart...

`// 25 OH D3 ========================================================================

var data_oh = { labels : ["OVN\n(MIN)", "", "OVN\n(MAX)", "NRC\n(1994)","Whitehead\n(2002)"," Leeson &\nSummers\n(2005)","Cobb 500\n(2015)","Aviagen Ross\n708 (2014)","US commercial\nbroiler survey\n(2014)"], datasets: [ { label: "Starter Feed 25 OH D₃", fillColor: ["rgba(154,16,116,1)","rgba(69,172,53,1)","rgba(154,16,116,1)","rgba(0,112,186,1)","rgba(0,112,186,1)","rgba(0,112,186,1)","rgba(0,112,186,1)","rgba(0,112,186,1)","rgba(0,112,186,1)"], strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "rgba(255,255,255,1)", pointHighlightFill: "rgba(255,255,255,1)", pointHighlightStroke: "rgba(220,220,220,1)", data : [0.069, 0, 0.069, 0, 0, 0, 0, 0, 0.056] } ] };

function fmtChartJSPerso(config,value,fmt){ if (fmt=="Number2DEC") return value.toFixed(2); else return value; };

var setopts_oh = { responsive : true, animation : true, dynamicDisplay : true,
scaleOverride : true, scaleStartValue : 0, scaleSteps : 10, scaleStepWidth : 0.01,
scaleStartValue : 0, yAxisLabel : "mg / kg", annotateDisplay : true, annotateLabel : "<%=v2+' '+v3%>", fmtYLabel : "Number2DEC" }

var myBar_oh = new Chart(document.getElementById("canvas_start_oh").getContext("2d")).Bar(data_oh,setopts_oh);

$("button.calculate").click(function(){ if ($(this).hasClass("calc_kg")) { var inclusion=$("#inclusion_kg").val(); var value=$("#premix_kg_oh").val(); value=value.replace(/,/g, ''); value=valueinclusion/1000; data_oh.datasets[0].data[1]=value.toFixed(3); document.getElementById('kg_oh').innerHTML=value.toFixed(3); } else if ($(this).hasClass("calc_lb")) { var inclusion=$("#inclusion_lb").val(); var value=$("#premix_lb_oh").val(); value=value.replace(/,/g, ''); value=valueinclusion/2000; data_oh.datasets[0].data[1]=(value2.2046).toFixed(3); document.getElementById('kg_oh').innerHTML = (value2.2046).toFixed(3); }

data_oh.labels[1]=custName;
document.getElementById("canvas_start_oh").getContext("2d").canvas.height="500";
document.getElementById("canvas_start_oh").getContext("2d").canvas.width="845";
document.getElementById("canvas_start_oh").getContext("2d").firstPass=undefined;
document.getElementById("canvas_start_oh").getContext("2d").runanimationcompletefunction=true;
document.getElementById("canvas_start_oh").getContext("2d").tpchart=undefined;
document.getElementById("canvas_start_oh").getContext("2d").initialWidth=undefined;
document.getElementById("canvas_start_oh").getContext("2d").chartTextScale=undefined;
document.getElementById("canvas_start_oh").getContext("2d").chartLineScale=undefined;
document.getElementById("canvas_start_oh").getContext("2d").chartSpaceScale=undefined;
document.getElementById("canvas_start_oh").getContext("2d").ChartNewId=undefined;
document.getElementById("canvas_start_oh").getContext("2d").DefaultchartTextScale=undefined;
document.getElementById("canvas_start_oh").getContext("2d").DefaultchartLineScale=undefined;
document.getElementById("canvas_start_oh").getContext("2d").DefaultchartSpaceScale=undefined;
document.getElementById("canvas_start_oh").getContext("2d").aspectRatio = undefined;

// Set save data to true only when calculating charts var myBar_oh_context = document.getElementById("canvas_start_oh").getContext("2d"); myBar_oh_context.saveData = true; myBar_oh = new Chart(myBar_oh_context).Bar(data_oh,setopts_oh); })`

Thanks again for the help!

[webguy262]

I tried updating to the latest version of ChartNew.js to see if that is the problem. With latest ChartNew.js I get no charts and this error "Uncaught TypeError: Cannot read property 'length' of null"

[FVANCOP]

@webguy262 : can you send your code to my email address (you will find it in the code of ChartNew.js) ? I will check it and this will avoid lot of messages send to all the followers.

Regards, François

[FVANCOP]

@webguy262

Problem solved ? No news since my last update.

Regards, François

[webguy262]

@FVANCOP Finally getting back to my ChartNew project! When I first tried to upgrade, I got "Uncaught TypeError: Cannot read property 'length' of null" The errors I'm now seeing in console are several "ChartNew.js:571 Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules" Just emailed you a zip of my 'app.' Thanks for taking a look!

[webguy262]

@FVANCOP Sorry, the email was rejected b/c of the zip. You can get the files here: http://brinsterinc.com/cnjs/www.zip

[FVANCOP]

Hi,

Sorry for the late answer; It took me time to find the problem.

Try to remove all following lines in your code :

document.getElementById("canvas_xxxxx").getContext("2d").chartTextScale=undefined;
document.getElementById("canvas_xxxxx").getContext("2d").chartLineScale=undefined;
document.getElementById("canvas_xxxxx").getContext("2d").chartSpaceScale=undefined;
document.getElementById("canvas_xxxxx").getContext("2d").DefaultchartTextScale=undefined;
document.getElementById("canvas_xxxxx").getContext("2d").DefaultchartLineScale=undefined;   
    document.getElementById("canvas_xxxxx").getContext("2d").DefaultchartSpaceScale=undefined;

Regards, François