faisal1208 faisal1208 - 3 months ago 7
Javascript Question

How to pass data of multiple arrays in ajax?

I want to show the data on charts and i am using dotnet highcharts for it
For now i am able to pass data from controller to the view using JavaScript
and the data is displaying accordingly but when i insert data or DB is updated i always have to refresh the page, but i want to display data whenever DB is updated on run-time.

I have gone through many searches and i found that using ajax i can be able to perform my certain task

i have found this piece of ajax

$.ajax({
type: "POST",
url: "update_visits_chart",
data: {month: month},
dataType: 'json',
success: function(data){
options.series[0].setData(data);
}


here i have a question
i have multiple arrays with different names as shown bellow

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


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


how to pass them in ajax data field ?
Any help will be appreciated

Answer

You can do something like this :

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


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

}

For updating charts after some interval you can use following code :

var interval = window.setInterval(ajaxMethodCall, 20000);

above code will make ajax call after every 20 secs.

Using Polling :

$(document).ready(function poll() {
        setTimeout(function() {
            $.ajax({
                url : "/Test/TestServlet",
                type : "GET",
                //dataType : "json",
                //data : dataArray,

                success : function(data) {
                    alert("success")
                    dt.setValue(data.value);
            var chart2 = new Highcharts.Chart({

            chart: {
                renderTo: 'container2',
                zoomType: 'xy',
                resetZoomButton: {
                    position: {
                        align: 'right', // by default
                        verticalAlign: 'top', // by default
                        x: -250,
                        y: 5,
                        //height: 25
                    },

                    relativeTo: 'chart'
                }
            },
            title: {
                text: 'Power vs Date & Time',
                style: {
                    //color: '#FF00FF',
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Power (KW)'
                }

            },
            plotOptions: {  
                series: {
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 3
                    }
                }
            },
            series: [{
                    name : 'Power kW',
                    data: arry_power,
            }],

        });

                },
                error : function(data) {
                    console.log("error polling");
                },
                complete : poll,
            })
        }, 5000);
    });

here it is for one chart

 var chart2 = new Highcharts.Chart({

            chart: {
                renderTo: 'container2',
                zoomType: 'xy',
                resetZoomButton: {
                    position: {
                        align: 'right', // by default
                        verticalAlign: 'top', // by default
                        x: -250,
                        y: 5,
                        //height: 25
                    },

                    relativeTo: 'chart'
                }
            },
            title: {
                text: 'Power vs Date & Time',
                style: {
                    //color: '#FF00FF',
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Power (KW)'
                }

            },
            plotOptions: {  
                series: {
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 3
                    }
                }
            },
            series: [{
                    name : 'Power kW',
                    data: arry_power,
            }],

        });