Want to take difference between single series data

Question

I am working on asp.net MVC 5 Referring to my question i want to take difference between each two points like this 2-1 3-2 4-3 5-4 and so on and then put them into my series data in chart

Bellow is my controller code

//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();

After that i have put all the data coming from reader into 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;

In my razor i have done the following

// **************** 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 = [];

After that i have added 2 loops which push the values of x and y axis

@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] });
    }

After that i have initialized my chart

 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,
            }

        ],
        });

Note I am viewing 4 different charts in my single view

I only want to take difference for arry_kwh only not for all charts

Update

I have added this piece of code after that i have put this value of array into a separate series

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 };

Adding the array in my chart code

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

        ],

It's showing me bellow image

It's not showing me correct values also no spline is there

After changing

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 };

Now it's showing me an empty view

Any help would be highly appreciated

Answer 1

You could prepare your data, before adding it to highcharts. For instance, do something like this:

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};

And then use arry_kwh_diff to graph the difference.

A fiddle demo can be found here: http://jsfiddle.net/8fjyLhy1/1/