function graphLoaded(graphDiv, performanceValue, perfData)
{
    console.log("graph " + performanceValue.PerfName + " has " + perfData.length + "records.");

    var chartColor = performanceValue.CheckState == "CRITICAL" ? '#FF0000' : (performanceValue.CheckState == "WARN") ? '#C0C000' : '#000000';
    var htmlChart = $("canvas", graphDiv);
    var chart = htmlChart.data("chart");
    
    if (!chart){
        chart = new Chart( htmlChart, {
            type: 'bar',
            data: {
                datasets: [
                    {
                        label: "-",
                        data: [],
                        backgroundColor: chartColor,
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                callback: ScaleSI,
                                beginAtZero: true,
                            }
                        }
                    ],
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: "minute",
                            tooltipFormat: "DD.MM.YYYY HH:mm",
                            displayFormats: {
                                minute: "DD.MM.YYYY HH:mm"
                            },
                            parser: moment.unix
                        }
                    }]
                },
                responsive: true,
                maintainAspectRatio: false
            }
        } );
    }

    chart.data.labels.length = 0;
    chart.data.datasets[0].data.length = 0;
    chart.data.datasets[0].label = performanceValue.PerfName;
    
    htmlChart.data("chart", chart);

    $.each( perfData, function(){
        if (this.TimeStamp != 0)
            chart.data.datasets[0].data.push( { x: this.TimeStamp, y: this.Value } );
    });

    graphDiv.prependTo( $("#graphs") );
    chart.update();
}

function loadGraph(performanceValue){
    var graphName = performanceValue.PerfName;
    var perfID = encodeID(graphName);
    var graphDiv = $("#graphs").children("#" + perfID);

    if (!graphDiv.length){
        graphDiv = $("<div style='position: relative; height: 300px; min-width: 400px;'></div>")
            .attr("id", perfID)
            .data("performanceValue",performanceValue)
            .append("<canvas></canvas");
    }

    LN().rpc("perfValues","GetPerfData",[performanceValue.PerfPath,$("#interval").children("option:selected").val()],function(perfData,e){
        if (e){
            console.log(e);
        } else {
            graphLoaded(graphDiv, performanceValue, perfData);
        }
    });
}

function updateGraphs(){
    var timeout = 0;
    var gDivs = [];
    $("#graphs").children("div").each(function(n,graphDiv){
        gDivs.push(graphDiv);
    });
    gDivs.reverse();
    gDivs.forEach(function(graphDiv,i){
        var performanceValue = $(graphDiv).data("performanceValue");
        setTimeout(function(){
            loadGraph(performanceValue);
        }, timeout);
        timeout += 200;
    });
}