خرید بک لینک

Vote count: 0

I am developing a realtime graph system which will display the memory usage at particular time using data from json file . I am using Rickshaw Library which accepts tool tip in numeric type else the hard coded value supplied as a property to graph .

I have a json object as :

[
{
"memory": 444.08203125,
"memoryInfo": {
  "rss": 444.08203125,
  "vsize": 1271.125
},
"cpu": 0.2,
"url": [
  "/admin/company/approved"
],
"time": "2/12/2016, 10:42:09 AM"
},
...
...
]

I want to show in tool tip at particular time what was the url served by server so that i can get proper information like which route is consuming more memory.

I will share my so far js code with you so that it will be better to understand .

script.js

$(function(){
var json = null;
console.log("Document Ready");
$.ajax({
        url: 'data.json',
        type: 'get',
        success: function (data) {
            console.log("Got data");
            json = data
            drawGraph()
        }
    });



var interval = 250;

//function to use from populating new values to graph
var getMemory = function(index) {
    retu json[index].memory
}

var getUrl = function(index) {
    retu json[index].url[0]
}

var getToolTip = function(){
    console.log("getting tooltip")
    retu "api/login"
}

var drawGraph = function(){
        // instantiate our graph!
        graph = new Rickshaw.Graph( {
            element: document.getElementById("chart"),
            width: 900,
            height: 400,
            renderer: 'line',
            interpolate:'basis',
            series: new Rickshaw.Series.FixedDuration([{ name: 'memory' ,color:'steelblue',tooltip:"/api/login"}], undefined, {
                timeInterval: interval,
                maxDataPoints: 500,
                timeBase: new Date().getTime() / 1000,
            }) 
        })
 //tooltip is hardcoded should be dynamic when fetching each object from json
        graph.render();

        // get Recent log data using socket and feed it to graph

        var i = 0;
        var iv = setInterval( function() {
        i++

            var data =  {   memory: getMemory(i)};
            graph.series.addData(data);
            graph.render();

        }, interval );

     //hover details
     var hoverDetail = new Rickshaw.Graph.HoverDetail( {
            graph: graph,
            formatter: function(series, x, y) {
                var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
                var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
                var content = swatch + series.tooltip + ": " + parseInt(y) + '<br>' + date;
                console.log(series)
                retu content;
            }
        });

    }   
});//jQuery

asked 3 mins ago

- - , .

برچسب: نویسنده: استخدام کار تاريخ: يکشنبه 9 اسفند 1394 ساعت: 0:48

صفحه بندی