function loadC3Charts(chartdata, apiurl){
    var divgraph = "#realtime-"+chartdata.id;
    var tipo = chartdata.id;
    $.getJSON( apiurl, function( jsondata ) {
        // Quitamos de la leyenda los valores que no tengan datos.
        $("#div3-"+tipo).empty();
        var legend = jsondata.params;
        for(var i=0; i< legend.length; i++){
            var result = $.grep(jsondata.val, function(e){ return e.name == legend[i]; })[0];
            //var result = jsondata.val.find(x=> x.name === legend[i]);
            if( typeof result != 'undefined'){
              $("#div3-"+tipo).append("<p><strong> "+legend[i]+"</strong><br>"+result[legend[i]]+" "+result['unidad']+"</p>");
            }
        }

        var digits = 2;
        if(chartdata.formato == 'bar'){
            digits = 6;
        }

        // Eliminamos el grafico actual
        d3.select(divgraph).select("svg").remove();
        // Lo eliminamos de la lista de charts
        listGraphs = listGraphs.filter(function (el) { return el.key !== tipo;});

        // Creamos el nuevo grafico
        var chart = c3.generate({
            bindto: divgraph,
            size:{
              height: 250
            },
            data: {
                json: jsondata.val,
                keys: {
                    x: 'date',
                    value: jsondata.params
                },
                type: chartdata.formato
            },
            bar: { width: { ratio: 0.2 }},
            line: {
                connectNull: true
            },
            point: {
                show: true
            },
            axis: {
                x: {
                    tick: {
                        format: function (x) {
                            var fecha = new Date(x);
                            return fecha.getHours()+":"+fecha.getMinutes()+":"+fecha.getSeconds();//;x.getHours()+":"+x.getMinutes()+":"+x.getSeconds();
                        },
                        fit: false
                    }
                },
                y:{
                    tick:{
                        format: function(y){
                            return y.toFixed(digits);
                        }
                    }
                }
            }
        });

        //chart.zoom.enable(true);
        // Guardamos el objeto chart en la lista global de charts
        listGraphs.push({ key: tipo, value: chart });

    });

}

function loadC3BarCharts(divgraph, apiurl){
    var tipo = divgraph.split('-')[1];
    $.getJSON( apiurl, function( jsondata ) {
        if(tipo != 'tempsg' ){
            // Quitamos de la leyenda los valores que no tengan datos.
            $("#div3-"+tipo).empty();
            var legend = jsondata.params;
            for(var i=0; i< legend.length; i++){
                var result = $.grep(jsondata.val, function(e){ return e.name == legend[i]; })[0];
                //var result = jsondata.val.find(x=> x.name === legend[i]);
                if( typeof result != 'undefined'){
                  $("#div3-"+tipo).append("<p><strong> "+legend[i]+"</strong><br>"+result[legend[i]]+" "+result['unidad']+"</p>");
                }
            }
        }
        var digits = 2;
        if(tipo == 'cost') digits = 6;

        // Eliminamos el grafico actual
        d3.select(divgraph).select("svg").remove();
        // Lo eliminamos de la lista de charts
        listGraphs = listGraphs.filter(function (el) { return el.key !== tipo;});

        // Creamos el nuevo grafico
        var chart = c3.generate({
            bindto: divgraph,
            size:{
              height: 250
            },
            data: {
                json: jsondata.val,
                keys: {
                    x: 'date',
                    value: jsondata.params
                },
                type: 'bar'
            },
            bar: {
                width: {
                    ratio: 0.2 // this makes bar width 50% of length between ticks
                }
                // or
                //width: 100 // this makes bar width 100px
            },
            axis: {
                x: {
                    //type: 'timeseries',
                    tick: {
                        format: function (x) {
                            var fecha = new Date(x);
                            return fecha.getHours()+":"+fecha.getMinutes()+":"+fecha.getSeconds();//;x.getHours()+":"+x.getMinutes()+":"+x.getSeconds();
                        },
                        fit: false
                    }
                },
                y:{
                    tick:{
                        format: function(y){
                            return y.toFixed(digits);
                        }
                    }
                }
            }
        });

        //chart.zoom.enable(true);
        // Guardamos el objeto chart en la lista global de charts
        listGraphs.push({ key: tipo, value: chart });

    });

}

function loadC3GeneralCharts(chartdata, apiurl){
    var divgraph = "#realtime-"+chartdata.id;
    var tipo = chartdata.id;

    $.getJSON( apiurl, function( jsondata ) {

        if(['line','bar','step', 'scatter', 'gauge'].indexOf(chartdata.formato) > -1 ){
            var digits = 2;
            // Eliminamos el grafico actual
            d3.select(divgraph).select("svg").remove();
            // Lo eliminamos de la lista de charts
            listGraphs = listGraphs.filter(function (el) { return el.key !== tipo;});

            // Creamos el nuevo grafico
            var chart = c3.generate({
                bindto: divgraph,
                size:{
                  height: 250
                },
                data: {
                    json: jsondata.data.val,
                    keys: {
                        x: 'date',
                        value: [jsondata.data.params]
                    },
                    type: chartdata.formato
                },
                bar: { width: { ratio: 0.2 }},
                gauge: {
                    label: {
                        format: function(value, ratio) {
                            return value;
                        },
                        // show: false // to turn off the min/max labels.
                    },
                    min: 400, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
                    max: 2100, // 100 is default
                    units: ' ppm',
                    width: 100 // for adjusting arc thickness
                },
                color: {
                    pattern: ['#60B044', '#F6C600', '#F97600', '#FF0000'  ], // the four color levels for the percentage values.
                    threshold: {
                        unit: 'value', // percentage is default
                        max: 2100, // 100 is default
                        values: [600, 1000, 1500, 2000]
                    }
                },
            });
            // Guardamos el objeto chart en la lista global de charts
            listGraphs.push({ key: tipo, value: chart });
        }else{
            // numerical representation
            if(chartdata.id != 'halleff'){
                d3.select(divgraph).select("svg").remove();
                $(divgraph).empty();
                $(divgraph).append("<h2 class='bignum'><strong> "+jsondata.data.val[0][jsondata.data.params]+"</strong>"+jsondata.data.val[0]['unidad']+"</h2><p><strong>"+jsondata.data.params+"</strong></p>");
                // Guardamos el objeto chart en la lista global de charts
                listGraphs.push({ key: tipo, value: null });
            }else{
                $(divgraph).empty();
                if(jsondata.data.val[0][jsondata.data.params] > 1000){
                    $(divgraph).append("<div class='col-lg-12'><div class='col-lg-6 div-pwc on'><p><strong>ON</strong></p></div><div class='col-lg-6 div-pwc off'><p>OFF</p></div><div class='col-lg-12'><p class='label-pwc'>"+jsondata.data.params+"</p></div></div>");
                }else{
                    $(divgraph).append("<div class='col-lg-12'><div class='col-lg-6 div-pwc on'><p>ON</p></div><div class='col-lg-6 div-pwc off'><p><strong>OFF</strong></p></div><div class='col-lg-12'><p class='label-pwc'>"+jsondata.data.params+"</p></div></div>");
                }
                listGraphs.push({ key: tipo, value: null });
            }
        }
    });
}

function updateCharts(jsondata){
  if($('#'+jsondata.key+'-rt').parent().hasClass('activebtn')){
        var chart = $.grep(listGraphs, function(e){ return e.key == jsondata.key; })[0];
        //var chart = listGraphs.find(x=> x.key === jsondata.key);
        //if(jsondata.data.params.length == 1) jsondata.data.params = [jsondata.data.params]
        chart.value.load({
            json: jsondata.data.val,
            keys: {
                x: 'date',
                value: jsondata.data.params
            },
            //unload: true
        });
        $("#div3-"+jsondata.key).empty();
        var legend = jsondata.data.params;
        for(var i=0; i< legend.length; i++){
            var result = $.grep(jsondata.data.val, function(e){ return e.name == legend[i]; })[0];
            //var result = jsondata.data.val.find(x=> x.name === legend[i]);
            if( typeof result != 'undefined')
                $("#div3-"+jsondata.key).append("<p><strong>"+legend[i]+"</strong><br>"+result[legend[i]]+" "+result['unidad']+"</p>");
        }
  }
}

function updateGeneralCharts(jsondata){
    var chart = $.grep(listGraphs, function(e){ return e.key == jsondata.key; })[0];
    //var chart = listGraphs.find(x=> x.key === jsondata.key);
    // charts
    if(chart.value != null){
        chart.value.load({
            json: jsondata.data.val,
            keys: {
                x: 'date',
                value: [jsondata.data.params]
            },
            //unload: true
        });
    }else{
        // numeric
        if(jsondata.key != 'halleff'){
            $("#realtime-"+jsondata.key).empty();
            $("#realtime-"+jsondata.key).append("<h2 class='bignum'><strong> "+jsondata.data.val[0][jsondata.data.params]+"</strong>"+jsondata.data.val[0]['unidad']+"</h2><p><strong>"+jsondata.data.params+"</strong></p>");
        }else{
             $("#realtime-"+jsondata.key).empty();
            if(jsondata.data.val[0][jsondata.data.params] > 1000){
                $("#realtime-"+jsondata.key).append("<div class='col-lg-12'><div class='col-lg-6 div-pwc on'><p><strong>ON</strong></p></div><div class='col-lg-6 div-pwc off'><p>OFF</p></div><div class='col-lg-12'><p class='label-pwc'>"+jsondata.data.params+"</p></div></div>");
            }else{
                $("#realtime-"+jsondata.key).append("<div class='col-lg-12'><div class='col-lg-6 div-pwc on'><p>ON</p></div><div class='col-lg-6 div-pwc off'><p><strong>OFF</strong></p></div><div class='col-lg-12'><p class='label-pwc'>"+jsondata.data.params+"</p></div></div>");
            }
        }
    }
}
