i have looked @ following links binding json result in highcharts asp.net mvc 4 , highcharts mvc c# , sql, highchart demo , many others. however, couldn't find working demo showing how implement highchart using data database.
objective: want generate real time highchart line graph getting data database. want similar third link provides real-time highchart randomly generated values. similar x-axis , y-axis, want x-axis "time" (i have datetime column in database) , y-axis integer (i have variable in database).
please need in sending model data razor view.
note using signalr display realtime table. want know if can used automatically update highchart well.
below code snippet of script in view. have used code provided in link 3 generating highchart. please tell me should apply changes on code.
@section scripts{ <script src="~/scripts/jquery.signalr-2.2.0.js"></script> <!--reference autogenerated signalr hub script. --> <script src="~/signalr/hubs"></script> <script type="text/javascript"> $(document).ready(function () { // declare proxy reference hub. var notifications = $.connection.datahub; //debugger; // create function hub can call broadcast messages. notifications.client.updatemessages = function () { getallmessages() }; // start connection. $.connection.hub.start().done(function () { alert("connection started") getallmessages(); }).fail(function (e) { alert(e); }); //highchart highcharts.setoptions({ global: { useutc: false } }); //fill chart $('#container').highcharts({ chart: { type: 'spline', animation: highcharts.svg, // don't animate in old ie marginright: 10, events: { load: function () { // set updating of chart each second var series = this.series[0]; setinterval(function () { var x = (new date()).gettime(), // current time y = math.random(); series.addpoint([x, y], true, true); }, 1000);//300000 } } }, title: { text: 'live random data' }, xaxis: { type: 'datetime', tickpixelinterval: 150 }, yaxis: { title: { text: 'value' }, plotlines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + highcharts.dateformat('%y-%m-%d %h:%m:%s', this.x) + '<br/>' + highcharts.numberformat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'random data', data: (function () { // generate array of random data var data = [], time = (new date()).gettime(), i; (i = -19; <= 0; += 1) { data.push({ x: time + * 1000, y: math.random() }); } return data; }()) }] }); }); function getallmessages() { var tbl = $('#messagestable'); var data = @html.raw(jsonconvert.serializeobject(this.model)) $.ajax({ url: '/home/getmessages', data: { id: data.id, }, contenttype: 'application/html ; charset:utf-8', type: 'get', datatype: 'html' }).success(function (result) { tbl.empty().append(result); $("#g_table").datatable(); }).error(function (e) { alert(e); }); } </script> } updated code
//highchart highcharts.setoptions({ global: { useutc: false } }); //fill chart chart = new highcharts.chart({ chart: { renderto: 'container', defaultseriestype: 'spline', events: { load: $.connection.hub.start().done(function () { alert("chart connection started") var point = getallmessagesforchart(); var series = this.series[0]; setinterval(function (point) { // add point series.addpoint([point.date_time, point.my_value], true, true) }, 1000); }).fail(function (e) { alert(e); }) } } title: { text: 'live random data' }, xaxis: { type: 'datetime', tickpixelinterval: 150, maxzoom: 20 * 1000 }, yaxis: { minpadding: 0.2, maxpadding: 0.2, title: { text: 'value', margin: 80 } }, series: [{ name: 'random data', data: [] }] }); function getallmessagesforchart() { var data = @html.raw(jsonconvert.serializeobject(this.model)) $.ajax({ url: '/home/getmessagesforchat', data: { id: data.id, }, contenttype: 'application/html ; charset:utf-8', type: 'get', datatype: 'html' }).success(function (data) { data = json.parse(data); //data_graph = [].concat(data); //$("#debug").html(data_graph); }).error(function (e) { alert(e); }); return data; //return data_graph; }
there example might you:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/ it uses ajax callback function.
well, can have @ sample add dynamically series clicking add button.
http://plnkr.co/edit/sh71yn?p=preview you need add data in right structure.
have @ function
$("#btnadd").click(function() of code script.js
i hope helps. regards, luis
