Morris JS – JSON Veriden Ymax ve Ymin Değerlerini Elde Etme – Getting Ymax and Ymin Value From JSON Data

Morris JS kullanırken grafikte göstermek istediğiniz verilerin Y aralıkları sabit değil değişken ise bazı sorunlar yaşayabiliyorsunuz. Ymax ve Ymin değerlerini kendiniz elde etmeniz gerekiyor. Bunun içinde yapmanız gereken stackoverflow’da bir vatandaşın yazdığı şu fonksiyonu kullanmak.

I could find nothing else to manage the y-axis in Morris so I built my own function to find min and max:

<span class="kwd">function</span><span class="pln"> min_and_max</span><span class="pun">(</span><span class="pln">json_data</span><span class="pun">)</span> <span class="pun">{</span>
    <span class="kwd">var</span><span class="pln"> min </span><span class="pun">=</span> <span class="typ">Number</span><span class="pun">.</span><span class="pln">MAX_VALUE</span><span class="pun">;</span>
    <span class="kwd">var</span><span class="pln"> max </span><span class="pun">=</span> <span class="typ">Number</span><span class="pun">.</span><span class="pln">MIN_VALUE</span><span class="pun">;</span>
    <span class="kwd">for</span> <span class="pun">(</span><span class="kwd">var</span><span class="pln"> data_key </span><span class="kwd">in</span><span class="pln"> json_data</span><span class="pun">)</span> <span class="pun">{</span>
        <span class="kwd">var</span><span class="pln"> entry </span><span class="pun">=</span><span class="pln"> json_data</span><span class="pun">[</span><span class="pln">data_key</span><span class="pun">]</span>
        <span class="kwd">for</span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> key </span><span class="kwd">in</span><span class="pln"> entry</span><span class="pun">)</span> <span class="pun">{</span>
            <span class="kwd">var</span><span class="pln"> x </span><span class="pun">=</span><span class="pln"> entry</span><span class="pun">[</span><span class="pln">key</span><span class="pun">];</span>
            <span class="kwd">if</span> <span class="pun">(!</span><span class="pln">isNaN</span><span class="pun">(</span><span class="pln">x</span><span class="pun">))</span> <span class="pun">{</span> <span class="com">// to avoid using date object</span>
                <span class="kwd">if</span> <span class="pun">(</span><span class="pln">x </span><span class="pun">&lt;</span><span class="pln"> min</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">min </span><span class="pun">=</span><span class="pln"> x</span><span class="pun">;}</span>
                <span class="kwd">else</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">x </span><span class="pun">&gt;</span><span class="pln"> max</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">max </span><span class="pun">=</span><span class="pln"> x</span><span class="pun">;}</span>
            <span class="pun">}</span>
        <span class="pun">}</span>
    <span class="pun">}</span>
    <span class="kwd">return</span> <span class="pun">{</span><span class="str">'min'</span><span class="pun">:</span><span class="pln"> min</span><span class="pun">,</span> <span class="str">'max'</span><span class="pun">:</span><span class="pln"> max</span><span class="pun">};</span>
<span class="pun">}</span>

function min_and_max(json_data) {

var min = Number.MAX_VALUE;

var max = Number.MIN_VALUE;

for (var data_key in json_data) {

var entry = json_data[data_key]

for(var key in entry) {

var x = entry[key];

if (!isNaN(x)) { // to avoid using date object

if (x < min) {min = x;}

else if (x > max) {max = x;}

}

return {'min': min, 'max': max};

}

So I could use it when creating the chart like:

<span class="kwd">var</span><span class="pln"> limits </span><span class="pun">=</span><span class="pln"> min_and_max</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span>
<span class="kwd">var</span><span class="pln"> keys </span><span class="pun">=</span> <span class="typ">Object</span><span class="pun">.</span><span class="pln">keys</span><span class="pun">(</span><span class="pln">data</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln">
keys </span><span class="pun">=</span><span class="pln"> keys</span><span class="pun">.</span><span class="pln">filter</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">){</span><span class="kwd">return</span><span class="pln"> e</span><span class="pun">!==</span><span class="str">'date'</span><span class="pun">});</span>
<span class="kwd">new</span> <span class="typ">Morris</span><span class="pun">.</span><span class="typ">Line</span><span class="pun">({</span><span class="pln">
    element</span><span class="pun">:</span><span class="pln"> element</span><span class="pun">,</span><span class="pln">
    data</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">,</span><span class="pln">
    xkey</span><span class="pun">:</span> <span class="str">'date'</span><span class="pun">,</span><span class="pln">
    ykeys</span><span class="pun">:</span><span class="pln"> keys</span><span class="pun">,</span><span class="pln">
    labels</span><span class="pun">:</span><span class="pln"> keys</span><span class="pun">,</span><span class="pln">
    ymin</span><span class="pun">:</span><span class="pln"> limits</span><span class="pun">[</span><span class="str">'min'</span><span class="pun">],</span><span class="pln">
    ymax</span><span class="pun">:</span><span class="pln"> limits</span><span class="pun">[</span><span class="str">'max'</span><span class="pun">],</span><span class="pln">
    hideHover</span><span class="pun">:</span> <span class="kwd">true</span>
<span class="pun">});</span>

var limits = min_and_max(data);

var keys = Object.keys(data[0]);

keys = keys.filter(function(e){return e!=='date'});

new Morris.Line({

element: element,

data: data,

xkey: 'date',

ykeys: keys,

labels: keys,

ymin: limits['min'],

ymax: limits['max'],

hideHover: true

});

Kaynak : https://stackoverflow.com/questions/33946724/how-to-set-smart-morris-js-line-chart-y-boundaries