Highchart/Highstock Data sampling

Question

I am working on asp.net MVC 5 I want to sample the data in the following way

1. Take the difference of two points (next point - previous point)
2. Plot them in between the time range

I will explain the point number 2 shortly, please see the bellow image for visual understanding

The red line is the difference between two point (as written in point 1)

The chart is for energy_kwh

For point 2 take the following example

For example, there are 3 points having values 5, 7, 9 and they are plotted with respective time i.e. 3 time range likely 2 PM 3 PM and 4 PM, but if i take there differences like 7 - 5 = 2 and 9 - 7 = 2 then i have 2 values/points, but the time is still 3, i want to plot the new points in between the time range like from 2 pm to 3pm the point is 2 so it will display in between the time.

I know how to take the difference between two points but i am unable to draw them on chart as i don't know how to manage the time range

Bellow is my controller code

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 passed them in my ViewData

ViewData["energy_kwh"] = energy_kwh;

Bellow is my razor syntax

    var myArrayX_kwh = [];
    var myArrayY_kwh = [];
    var arry_kwh = [];

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

     for (var i = 0; i < myArrayX_kwh.length; i++) 
     {
        arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
     }

    var chart1 = new Highcharts.Chart({

        chart: {
            renderTo: 'container1',
            type: 'column',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',

            resetZoomButton: {
                position: {

                    x: -10,
                    y: 350,

                },

                relativeTo: 'chart'
            }
        },
        scrollbar:{
            enabled: true
        },
        navigator: {
            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: 50000
            }

        },
        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: {
                    fontSize: '12px',

                }
            }


        },

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

        ],
    });

Any help would be highly appreciated

Answer 1

Ok, right, so the calculation is just slightly more complex than in my comment, as I wasn't accounting for needing the x values to build on the current base value.

What you really need for your x value on the difference array is, the current x value, plus half of the difference between the current and next x values.

So this:

arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i+1].y - arry_kwh[i].y};

Becomes:

arry_kwh_diff[i] = {
  x: arry_kwh[i].x + ((arry_kwh[i+1].x - arry_kwh[i].x) / 2), 
  y: (arry_kwh[i+1].y - arry_kwh[i].y)
};

Updated fiddle:

• http://jsfiddle.net/8fjyLhy1/6/