Create a chart with Logarithmic Y axis
I have created various Charts using Arithemtic(constant scale) on Y-axis. Now I wish to create one with a Loga开发者_如何学JAVArithmic Y axis.
Eg: The distance between 1 and 2 should be same as 2 and 4
Any Ideas on the scaling method
Thanks
Does 'Arithemtic' refer to a particular program or plugin? Otherwise, if you just mean you have a list of x and y values then put the y values through a log function and plot that. What language are you programming in?
Edit
Hey Sorry it took me a while to get back to you. Is this the code you're looking for?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var test = {
x_values: [0,10,20,30,40,50,60,70,80,90,100],
y_values: [0,10,20,30,40,50,60,70,80,90,100],
convert_values_to_log10: function (values) {
var i=0;
var converted_values = []
for (i=0; i<values.length; i++) {
converted_values[i] = Math.log(values[i])/Math.LN10
}
return converted_values;
}
}
$(document).ready(function(){
$('#x_vals').text(test.x_values.toString());
$('#y_vals').text(test.y_values.toString());
$('#y10_vals').text(test.convert_values_to_log10(test.y_values).toString());
});
</script>
</head>
<body>
<h2>x values = </h2>
<p id="x_vals"></p>
<h2>y values = </h2>
<p id="y_vals"></p>
<h2>log10 y values = </h2>
<p id="y10_vals"></p>
</body>
</html>
You can use Morris.js to draw the charts.
Then you can extend Morris and modify the transY function to do the logarithmic scale like this:
(function () {
var $, MyMorris;
MyMorris = window.CbyMorris = {};
$ = jQuery;
MyMorris = Object.create(Morris);
MyMorris.Grid.prototype.gridDefaults["yLogScale"] = false;
MyMorris.Grid.prototype.transY = function (y) {
if (!this.options.horizontal) {
if (this.options.yLogScale) {
return this.bottom - (this.height * Math.log((y + 1) - this.ymin) / Math.log(this.ymax / (this.ymin + 1)));
} else {
return this.bottom - (y - this.ymin) * this.dy;
}
} else {
return this.left + (y - this.ymin) * this.dy;
}
};
}).call(this);
Then set the yLogScale parameter to true in your Morris config:
yLogScale: true
Please refer to my full answer to see the result: https://stackoverflow.com/a/39878478/1351076
加载中,请稍侯......
精彩评论