javascript - tablas - Desea tomar la diferencia entre los datos de una única serie y mostrarlos en la tabla en los gráficos altos/alto

obtener datos de una tabla html javascript

Question

Estoy trabajando en asp.net MVC 5 En referencia a mi pregunta, quiero tomar la diferencia entre cada dos puntos como este 2-1 3-2 4-3 5-4 y así sucesivamente y luego ponerlos en los datos de mi serie en el gráfico

Bellow es mi código de controlador

//Getting data from DB to view in charts
                SqlCommand Device_Id_command = new SqlCommand("Select Device_ID, Energy_kWh,Power_kW,Voltage_Phase_1,Data_Datetime,Voltage_Phase_2,Voltage_Phase_3,Current_Phase_1,Current_Phase_2,Current_Phase_3 from [ADS_Device_Data] where Device_Serial_Number=@serial_number AND Data_Datetime between''" + time.ToString(format) + "''AND''" + time2.ToString(format) + "''", con);
                Device_Id_command.Parameters.AddWithValue("@serial_number", serial_number);

                con.Open();
                SqlDataReader reader = Device_Id_command.ExecuteReader();
                //SqlDataReader reader_events = event_command.ExecuteReader();

                while (reader.Read())
                {
                    energy_kwh.Add(Convert.ToDouble(reader["Energy_kWh"]));
                    power_kw.Add(Convert.ToDouble(reader["Power_kW"]));
                    voltage_1.Add(Convert.ToDouble(reader["Voltage_Phase_1"]));
                    voltage_2.Add(Convert.ToDouble(reader["Voltage_Phase_2"]));
                    voltage_3.Add(Convert.ToDouble(reader["Voltage_Phase_3"]));
                    current_1.Add(Convert.ToDouble(reader["Current_Phase_1"]));
                    current_2.Add(Convert.ToDouble(reader["Current_Phase_2"]));
                    current_3.Add(Convert.ToDouble(reader["Current_Phase_3"]));
                    Meter_datetime.Add(sample_con.ConvertToUnixTimestamp(Convert.ToDateTime(reader["Data_Datetime"])));
                    device_id = Convert.ToInt32(reader["Device_ID"]);
                }
                con.Close();

Después de eso, he puesto todos los datos que vienen del lector en ViewData

ViewData["energy_kwh"] = energy_kwh;
                ViewData["Meter_datetime"] = Meter_datetime;
                ViewData["power_kw"] = power_kw;
                ViewData["voltage_1"] = voltage_1;
                ViewData["voltage_2"] = voltage_2;
                ViewData["voltage_3"] = voltage_3;
                ViewData["current_1"] = current_1;
                ViewData["current_2"] = current_2;
                ViewData["current_3"] = current_3;

En mi navaja de afeitar, he hecho lo siguiente

// **************** Data arranging coming from controller *************
    var myArrayX_kwh = [];
    var myArrayY_kwh = [];
    var myArrayY_power = [];
    var myArrayY_voltage_1 = [];
    var myArrayY_voltage_2 = [];
    var myArrayY_voltage_3 = [];
    var myArrayY_current_1 = [];
    var myArrayY_current_2 = [];
    var myArrayY_current_3 = [];
    //var myArrayY_getData = [];

    var arry_kwh = [];
    var arry_power = [];
    var arry_voltage_1 = [];
    var arry_voltage_2 = [];
    var arry_voltage_3 = [];
    var arry_current_1 = [];
    var arry_current_2 = [];
    var arry_current_3 = [];

Después de eso, he agregado 2 bucles que empujan los valores de los ejes y

@foreach (var st in ViewData["Meter_datetime"] as List<double?>)
    {
        @:myArrayX_kwh.push(@st);
    }

    @foreach (var st in ViewData["energy_kwh"] as List<double?>)
    {
        @:myArrayY_kwh.push(@st);
    }

    @foreach (var st in ViewData["power_kw"] as List<double?>)
    {
        @:myArrayY_power.push(@st);
    }

    @foreach (var st in ViewData["voltage_1"] as List<double?>)
    {
        @:myArrayY_voltage_1.push(@st);
    }

    @foreach (var st in ViewData["voltage_2"] as List<double?>)
    {
        @:myArrayY_voltage_2.push(@st);
    }

    @foreach (var st in ViewData["voltage_3"] as List<double?>)
    {
        @:myArrayY_voltage_3.push(@st);
    }

    @foreach (var st in ViewData["current_1"] as List<double?>)
    {
        @:myArrayY_current_1.push(@st);
    }

    @foreach (var st in ViewData["current_2"] as List<double?>)
    {
        @:myArrayY_current_2.push(@st);
    } 

    @foreach (var st in ViewData["current_3"] as List<double?>)
    {
      @:myArrayY_current_3.push(@st);
    }

 for (var i = 0; i < myArrayX_kwh.length; i++) {
        arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
        arry_power.push({ x: myArrayX_kwh[i], y: myArrayY_power[i], });
        arry_voltage_1.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_1[i], });
        arry_voltage_2.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_2[i], });
        arry_voltage_3.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_3[i], });
        arry_current_1.push({ x: myArrayX_kwh[i], y: myArrayY_current_1[i], });
        arry_current_2.push({ x: myArrayX_kwh[i], y: myArrayY_current_2[i], });
        arry_current_3.push({ x: myArrayX_kwh[i], y: myArrayY_current_3[i], });
        //getData.push({y: myArrayY_getData[i] });
    }

Después de eso, he inicializado mi gráfico

 var chart1 = new Highcharts.Chart({

        chart: {
            renderTo: ''container1'',
            type: ''column'',
            zoomType: ''xy'',
            panning: true,
            panKey: ''shift'',
            //type: ''column'',
            //zoomType: ''xy'',
            //panning: true,
            //pankey: ''shift'',
            resetZoomButton: {
                position: {
                    //align: ''right'', // by default
                    //verticalAlign: ''top'', // by default
                    x: -10,
                    y: 350,
                    //height: 25
                },

                relativeTo: ''chart''
            }
        },
        scrollbar:{
            enabled: true
        },
        navigator: {

            //xAxis: {
            //    tickWidth: 0,
            //    lineWidth: 0,
            //    gridLineWidth: 1,
            //    tickPixelInterval: 200,
            //    labels: {
            //        align: ''left'',
            //        style: {
            //            color: ''#888''
            //        },
            //        x: 3,
            //        y: -4
            //    }
            //},
            //yAxis: {
            //    gridLineWidth: 0,
            //    startOnTick: false,
            //    endOnTick: false,
            //    minPadding: 0.1,
            //    maxPadding: 0.1,
            //    labels: {
            //        enabled: false
            //    },
            //    title: {
            //        text: null
            //    },
            //    tickWidth: 0
            //},
            //series: {
            //    //data: arry_kwh_2,
            //    type: ''column'',
            //    color: ''#4572A7'',
            //    fillOpacity: 0.05,
            //    dataGrouping: {
            //        smoothed: true
            //    },
            //    lineWidth: 1,
            //    marker: {
            //        enabled: true
            //    }
            //},
            enabled: true,

            height: 30,

        },

        rangeSelector: {


            buttonTheme: { // styles for the buttons
                fill: ''none'',
                stroke: ''none'',
                ''stroke-width'': 0,
                r: 8,
                style: {
                    color: ''#039'',
                    fontWeight: ''bold''
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: ''#039'',
                        style: {
                            color: ''white''
                        }
                    }

                }
            },
            enabled: true,
            inputBoxWidth: 160,
            inputStyle: {
                color: ''#039'',
                fontWeight: ''bold''
            },
            labelStyle: {
                color: ''black'',
                fontWeight: ''bold''
            },
            buttons: [{
                type: ''minute'',
                count: 60 * 6,
                text: ''6h''
            }, {
                type: ''day'',
                count: 1,
                text: ''1d''
            }, {
                type: ''day'',
                count: 7,
                text: ''7d''
            },
            {
                type: ''day'',
                count: 14,
                text: ''2w''
            },
            {
                type: ''day'',
                count: 21,
                text: ''3w''

            },
            {
                type: ''month'',
                count: 1,
                text: ''1m''
            },
            {
                type: ''all'',
                text: ''All''
            }]

        },
        plotOptions: {
            column: {
                turboThreshold: 500000
            }

        },
        title: {
            text: ''Energy vs Date & Time'',
            style: {

                fontWeight: ''bold'',

            }
        },
        xAxis: {

            type: ''datetime'',
            //min: 0,
            //max: 100000

        },

        yAxis:
        {
            scrollbar: {
                enabled: true,
                showFull: false

            },
            alternateGridColor: ''#FDFFD5'',
            title: {
                text: ''Energy (kWh)'',
                style: {
                    //color: ''#FF00FF'',
                    fontSize: ''12px'',
                    //sfont: ''bold 200px Verdana, sans-serif'',
                }
            }


        },

        series:
        [
            {
                name: ''Energy kWh'',
                color: ''green'',
                data: arry_kwh,
            }

        ],
        });

Tenga en cuenta que estoy viendo 4 gráficos diferentes en mi vista única

Solo quiero tomar la diferencia para arry_kwh pero no para todos los gráficos

Actualizar

He agregado este fragmento de código después de que he puesto este valor de matriz en una serie separada

var arry_kwh_diff = [];
    for (var j = 0; j < arry_kwh.length - 1; j++)
    {
        arry_kwh_diff[j] = { x: arry_kwh.x, y: arry_kwh[j + 1].y - arry_kwh[j].y };
    }
    arry_kwh_diff[j] = { x: arry_kwh.x, y: arry_kwh.y };

Agregar la matriz en mi código de gráfico

 series:
        [
            {
                name: ''Energy kWh'',
                color: ''green'',
                data: arry_kwh,
            },
            {
                type: ''spline'',
                name: ''Difference'',
                data: arry_kwh_diff
            }

        ],

Me está mostrando abajo de la imagen

No me está mostrando los valores correctos, tampoco hay spline

Después de cambiar

var arry_kwh_diff = [];
    for (var j = 0; j < arry_kwh.length - 1; j++)
    {
        arry_kwh_diff.push({ x: arry_kwh[j].x, y: arry_kwh[j + 1].y - arry_kwh[j].y });
    }
    arry_kwh_diff[j] = { x: arry_kwh[j].x, y: arry_kwh[j].y };

Ahora me está mostrando una vista vacía

Cualquier ayuda sería muy apreciada

Answer 1

Puede preparar sus datos antes de agregarlos a las notas altas. Por ejemplo, haz algo como esto:

var arry_kwh = [ {x: Date.now(), y: 100},
                 {x: Date.now()+1000, y: 120 },
                 {x: Date.now()+2000, y: 140 },
                 {x: Date.now()+3000, y: 165 }];

var arry_kwh_diff = [];
var i=0;
for(; i < arry_kwh.length - 1; i++) {
        arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i+1].y - arry_kwh[i].y};
}
arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i].y};

Y luego usa arry_kwh_diff para graficar la diferencia.

Una demostración de violín se puede encontrar aquí: http://jsfiddle.net/8fjyLhy1/1/