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/