i have made application in mvc dot net using highcharts have connected them db , showed them in view till every thing running fine
but want if db updated charts automatically show updated data. have refresh page view updated data , it's showing want not refresh it.
i have searched many articles , found ajax polling should me out in controller code have passed data in viewdata coming reader
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"]); } 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; viewdata["x"] = x; viewdata["events"] = events; return view(); above 'x' sreen width in view have created global getsvg method takes array of charts argument
$(function () { highcharts.getsvg = function (charts) { var svgarr = [], top = 0, width = 0; $.each(charts, function(i, chart) { var svg = chart.getsvg(); svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ' ); svg=svg.replace('</svg>', '</g>'); top += chart.chartheight; width = math.max(width, chart.chartwidth); svgarr.push(svg); }); return '<svg height="'+ top +'" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgarr.join('') + '</svg>'; }; and created global export charts method takes array of charts argument, , exporting options second argument
highcharts.exportcharts = function(charts, options) { // merge options options = highcharts.merge(highcharts.getoptions().exporting, options); // post export server highcharts.post(options.url, { filename: options.filename || 'chart', type: options.type, width: options.width, svg: highcharts.getsvg(charts) }); }; after have arranged data coming 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 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 = []; then have 2 loops push data in array
@foreach (var st in viewdata["meter_datetime"] list<double?>) { @:myarrayx_kwh.push(@st); } @foreach (var st in viewdata["energy_kwh"] list<double?>) { @:myarrayy_kwh.push(@st); } @foreach (var st in viewdata["power_kw"] list<double?>) { @:myarrayy_power.push(@st); } @foreach (var st in viewdata["voltage_1"] list<double?>) { @:myarrayy_voltage_1.push(@st); } @foreach (var st in viewdata["voltage_2"] list<double?>) { @:myarrayy_voltage_2.push(@st); } @foreach (var st in viewdata["voltage_3"] list<double?>) { @:myarrayy_voltage_3.push(@st); } @foreach (var st in viewdata["current_1"] list<double?>) { @:myarrayy_current_1.push(@st); } @foreach (var st in viewdata["current_2"] list<double?>) { @:myarrayy_current_2.push(@st); } @foreach (var st in viewdata["current_3"] list<double?>) { @:myarrayy_current_3.push(@st); } (var = 0; < 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], }); } then have initialized , written code charts
var chart1 = new highcharts.chart({ chart: { renderto: 'container1', type: 'column', zoomtype: 'xy', resetzoombutton: { position: { align: 'right', // default verticalalign: 'top', // default x: -250, y: 5, //height: 25 }, relativeto: 'chart' } }, title: { text: 'energy vs date & time', style: { //color: '#ff00ff', fontweight: 'bold', //fontsize: '12px' //sfont: 'bold 200px verdana, sans-serif', } }, xaxis: { // categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'] type: 'datetime', // max: new date().gettime(), //labels: { // // format: {value:} // style: { // fontsize: '13px', // fontfamily: 'verdana, sans-serif' // } //} }, yaxis: { title: { text: 'energy (kwh)', style: { //color: '#ff00ff', fontsize: '12px', //sfont: 'bold 200px verdana, sans-serif', } } }, as displaying 4 charts have done same above other 3 here things working data db showing in charts , if db updated on page refresh showed wrote above don't want refresh page
for have done
var dt = json.stringify({ "arrykwh": arry_kwh, "arrypower": arry_power, "arryvoltage_1": arry_voltage_1, "arryvoltage_2": arry_voltage_2, "arryvoltage_3": arry_voltage_3, "arrycurrent_1": arry_current_1, "arrycurrent_2": arry_current_2, "arrycurrent_3": arry_current_3 }); after have done ajax call , passed data success alert view whether it's having data or not
(function poll() { settimeout(function () { $.ajax({ type: "post", url: "/home/multigraph/", data:dt, success: function (data) { alert(data) }, }); poll(); }, 5000); })(); but when run application alert message display this
i missing don't know
i have found signalr think time taking have write things again
another solution came mind may if set condition in view or controller in checks if db updated automatically refresh page
i confused appreciated
Comments
Post a Comment