How can I generate a real-time highchart from my database data?

Question

I have looked several links; however, I couldn't find a working demo showing how to implement a highchart using data from a database.
Objective: I want to generate a real time highchart line graph getting data from my database. What I want is very similar to the
HighChart Demo which provides a real-time highchart with randomly generated values. It is also similar by X-axis and Y-axis, for I want my x-axis to be "Time" (I have a DateTime column in my database) and y-axis to be an integer (I have
a variable for that as well in my database).
Please I need help in sending the model data to my razor view.
Note that I am already using SignalR to display a realtime table. I also want to know if it can be used to automatically update the highchart as well.
Below is the code snippet of my script in the view. I have used the code provided in
HighChart Demo link for generating the highchart. Please tell me where should I apply the changes on my code.
@section Scripts{
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/SignalR/Hubs"></script>
<script type="text/javascript">
$(document).ready(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.dataHub;
//debugger;
// Create a function that the hub can call to broadcast messages.
notifications.client.updateMessages = function () {
getAllMessages()
// Start the 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 up the updating of the 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 an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
return data;
function getAllMessages() {
var tbl = $('#messagesTable');
var data = @Html.Raw(JsonConvert.SerializeObject(this.Model))
$.ajax({
url: '/nurse/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>

Answer 1

Hi Sihem,
Thank you for contacting National Instruments.  Using the LabVIEW Real-Time module, you can do development without actually having a target.  While viewing the project explorer window, you can do the following steps:
Right click on the project
Select New >> Targets and Devices
Select the "New Target or Device" radio button
Select the target you would like to develop on.Information about the LabVIEW Real-Time Module can be found here.
Regards,
Kevin H
National Instruments
WSN/Wireless DAQ Product Support Engineer