Log Scale on Axis Y - Workaround using Linear Axis - CanvasJS JavaScript Charts
Log Scale on Axis Y - Workaround using Linear Axis - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Log Scale on Axis Y - Workaround using Linear Axis"
},
axisY:{
//valueFormatString: "0.## E0",
title: "In log scale",
labelFormatter: function ( e ) {
var lable = Math.pow(10 ,e.value);
if(lable>1000)
lable = CanvasJS.formatNumber(lable/1000) +"k";
else
lable = CanvasJS.formatNumber(lable);
return lable;
},
interval : 1,
includeZero :false
},
toolTip:{
contentFormatter: function ( e ) {
var content = "Data Values";
for(var i = 0; i< e.entries.length; i++){
content += "</br>"+e.entries[i].dataPoint.x + " : ";
content += CanvasJS.formatNumber(Math.round(Math.pow(10,e.entries[i].dataPoint.y)));
}
return content;
}
},
data: [
{
type: "line",
dataPoints:[
{ x: 10, y: 10 },
{ x: 15, y: 640 },
{ x: 22, y: 10240 },
{ x: 31, y: 80240 },
{ x: 42, y: 162400 },
{ x: 55, y: 200000 },
{ x: 70, y: 220000 },
{ x: 87, y: 230000 },
{ x: 100, y: 256000 }
]
}]
});
convertToLog(chart.options.data);
chart.render();
function convertToLog(data){
var dataPoints;
for(var j= 0; j<data.length;j++){
dataPoints = data[j].dataPoints;
for(var i = 0; i< dataPoints.length; i++){
dataPoints[i].y = Math.log10(dataPoints[i].y);
}
}
}