We Keep Coding

How to put images on Y axis of line chart in Chart.js? [duplicate]

I am generating a chart.js canvas bar chart. What I am trying to do is, inside of the labels array, add images that go with each label, as opposed to just the text label itself. Here is the code for the chart: The json object that I am getting data from has an image url that I want to use to display the picture:
$.ajax({
method: "get",
url: "http://localhost:3000/admin/stats/show",
dataType: "json",
error: function() {
console.log("Sorry, something went wrong");
},
success: function(response) {
console.log(response)
var objectToUse = response.top_dogs
var updateLabels = [];
var updateData = [];
for (var i = 0; i < objectToUse.length; i+=1) {
updateData.push(objectToUse[i].win_percentage * 100);
updateLabels.push(objectToUse[i].title);
}
var data = {
labels: updateLabels,
datasets: [
{
label: "Top Winners Overall",
fillColor: get_random_color(),
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: get_random_color(),
highlightStroke: "rgba(220,220,220,1)",
data: updateData
}
]
};
var options = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 2,
};
var loadNewChart = new Chart(barChart).Bar(data, options);
}
});
If anyone has a solution it would be greatly appreciated!

I'm aware that this is an old post but since it has been viewed so many times, I'll describe a solution that works with the current Chart.js version 2.9.3.
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw images (icons) directly on the canvas using CanvasRenderingContext2D.
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
xAxis.ticks.forEach((value, index) => {
var x = xAxis.getPixelForTick(index);
ctx.drawImage(images[index], x - 12, yAxis.bottom + 10);
});
}
}],
The position of the labels will have to be defined through the xAxes.ticks.padding as follows:
xAxes: [{
ticks: {
padding: 30
}
}],
Please have a look at the following runnable code snippet.
const labels = ['Red Vans', 'Blue Vans', 'Green Vans', 'Gray Vans'];
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png']
.map(png => {
const image = new Image();
image.src = png;
return image;
});
const values = [48, 56, 33, 44];
new Chart(document.getElementById("myChart"), {
type: "bar",
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
xAxis.ticks.forEach((value, index) => {
var x = xAxis.getPixelForTick(index);
ctx.drawImage(images[index], x - 12, yAxis.bottom + 10);
});
}
}],
data: {
labels: labels,
datasets: [{
label: 'My Dataset',
data: values,
backgroundColor: ['red', 'blue', 'green', 'lightgray']
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
padding: 30
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Chart.js v3+ solution to pie, doughnut and polar charts
With version 3 of Chart.js and the updated version of chart.js-plugin-labels, this is now incredbly simple.
in options.plugins.labels, add render: image and the nested array images with objects containing the properties src, width and height.
const data = {
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8'],
datasets: [{
label: 'Image labels',
// Making each element take up full width, equally divided
data: [100, 100, 100, 100, 100, 100, 100, 100],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)',
'rgba(20, 43, 152, 0.2)'
]
}]
};
const config = {
type: 'doughnut',
data,
options: {
plugins: {
// Accessing labels and making them images
labels: {
render: 'image',
images: [{
src: 'https://cdn0.iconfinder.com/data/icons/google-material-design-3-0/48/ic_book_48px-256.png',
height: 25,
width: 25
},
{
src: 'https://cdn3.iconfinder.com/data/icons/glypho-free/64/pen-checkbox-256.png',
height: 25,
width: 25
},
{
src: 'https://cdn1.iconfinder.com/data/icons/jumpicon-basic-ui-glyph-1/32/-_Home-House--256.png',
height: 25,
width: 25
},
{
src: 'https://cdn1.iconfinder.com/data/icons/social-media-vol-3/24/_google_chrome-256.png',
height: 25,
width: 25
},
{
src: 'https://cdn0.iconfinder.com/data/icons/google-material-design-3-0/48/ic_book_48px-256.png',
height: 25,
width: 25
},
{
src: 'https://cdn3.iconfinder.com/data/icons/glypho-free/64/pen-checkbox-256.png',
height: 25,
width: 25
},
{
src: 'https://cdn1.iconfinder.com/data/icons/jumpicon-basic-ui-glyph-1/32/-_Home-House--256.png',
height: 25,
width: 25
},
{
src: 'https://cdn1.iconfinder.com/data/icons/social-media-vol-3/24/_google_chrome-256.png',
height: 25,
width: 25
},
]
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart').getContext('2d'),
config
);
.chartCard {
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 600px;
padding: 20px;
}
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv#3.0.5/dist/chartjs-plugin-labels.min.js"></script>

Creating charts

I need to make a chart at the level with a row in the table, are there any tips on how to implement this enter image description here
I need the chart lines to match the row level in the table
and this code draws a separate chart
const diag = () => {
document.getElementById("canvasic").innerHTML = ' ';
document.getElementById("canvasic").innerHTML = '<canvas id="densityChart" className="canav"></canvas>';
densityCanvas = document.getElementById("densityChart");
//remove canvas from container
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.global.defaultFontSize = 16;
var densityData = {
label: 'CallVol',
data:calloiList1,
backgroundColor: 'rgba(0,128,0, 0.6)',
borderColor: 'rgba(0,128,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var densityData1 = {
label: 'PutVol',
data:calloiList3 ,
backgroundColor: 'rgba(255,0,0, 0.6)',
borderColor: 'rgba(255,0,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var chartOptions = {
scales: {
yAxes: [{
barPercentage: 0.5
}]
},
elements: {
rectangle: {
borderSkipped: 'left',
}
}
};
var barChart = new Chart(densityCanvas, {
type: 'horizontalBar',
data: {
labels: calloiList4,
datasets: [densityData,densityData1],
},
options: chartOptions
}
);
}
enter image description here

Retrieve data from database (SQL) and display in graph using MVC?

What I am wanting to do is take data from two rows as x & y axis and that data should be displayed in a bar chart.
Here is what I am doing:
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Bar Chart Example <small>With custom colors.</small></h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
Config option 1
</li>
<li>
Config option 2
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="flot-chart">
<div class="flot-chart-content" id="flot-bar-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
#section Scripts {
#Scripts.Render("~/plugins/flot")
<script type="text/javascript">
$(document).ready(function () {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.6,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: [ **//here i want to set a query to get data from database**
[1, 40],
[2, 25],
[3, 19],
[4, 34],
[5, 32],
[6, 22]
]
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
var barOptions = {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.0
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: [ **//here i want to set a query to get data from database**
[1, 40],
[2, 25],
[3, 19],
[4, 34],
[5, 32],
[6, 22]
]
};
doPlot("right");
$("button").click(function () {
doPlot($(this).text());
});
});
</script>
}
How to achieve it? Can I set a query here or should I manage this in controller? like this
E.g If I have a table in SQL named Sale and having two records "Sales & Year", I want to show years at x-axis and sales at y-axis.

An exception of type 'System.NotSupportedException' occurred in EntityFramework.SqlServer.dll but was not handled in user code Additional information:
var wokerData = db.Workers.Select(s => new WorkerModel { Name = s.Name, Salary = s.Salary }).ToList();
var baseWorkerModel = new BaseWorkerModel()
{
ChartName = "Anything",
ChartData = wokerData
};
return View(baseWorkerModel);
}
public class BaseWorkerModel
{
public string ChartName { get; set; }
public List<WorkerModel> ChartData { get; set; }
public List<WorkerModel> WorkerData { get; set; }
}

Maybe help you this way:
First separate code in functions:
/**
* Get data from server
*/
const getChartData = function(data) {
return new Promise((resolve, reject) => {
try {
$.ajax({
data: data,
method: 'GET', // or POST
url: '[Controller/Action/????]'
}).done(data => {
resolve({state: 'done', data: data});
}).fail(errorThrown => {
reject({state: 'fail', data: errorThrown});
});
}
catch(error) {
reject({state: 'catch', data: error});
}
});
};
/**
* Draw chart
*/
const drawChart = function(chartData) {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.6,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: chartData // Chart data input parameter to function
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
var barOptions = {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.0
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: chartData // Chart data input parameter to function
};
doPlot("right");
}
And next in button click can use:
$('button').on('click', function(e) {
getChartData(...).then(result => { // ... means parameters need to send to server
drawChart(result['data']);
doPlot($(this).text()); //??
}).catch(error => {
console.log(error);
});
});
===========================================================================
Update [based on comments]
public class BaseWorkerModel
{
public string ChartName { get; set; }
public List<WorkerModel> WorkerData { get; set; }
}
public class WorkerModel
{
public int ID { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Office { get; set; }
public string Extn { get; set; }
public string Salary { get; set; }
}
In action you need create list from data
public ActionResult GetChartData()
{
// with this code you can retrieve list of WorkerModel based on your data
// note: if salary is float or double change data type to double
var wokerData = db.Workers.Select(s => new WorkerModel { Name = s.Name, Salary = s.Salary }).Tolist();
var baseWorkerModel = new BaseWorkerModel()
{
ChartName = "Anything",
WorkerData = wokerData
};
return View(baseWorkerModel);
}
Now in first line of view add
#model BaseWorkerModel
If js code inline in your view, You can access to model data see this link Access model in js
===========================================================================
NEW UPDATE
1- I used chart.js library to draw any chart type.
2- In Models folder I created model with this structure
public class ChartDataModel
{
public string ChartName { get; set; }
public List<string> ChartLabel { get; set; }
public List<int> ChartData { get; set; }
}
3- In our controller I initialized instance of model and set data and labels and pass model to view
public ActionResult Index()
{
var chartDataModel = new Models.ChartDataModel()
{
ChartData = new List<int>() { 12, 19, 3, 5, 2, 3 },
ChartLabel = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
ChartName = "Chart JS demo"
};
return View(chartDataModel);
}
4- In index.cshtml first import model and in javascript code section I used this model properties
#model ChartDemo1.Models.ChartDataModel
<!-- canvas for draw chart -->
<canvas id="myChart" width="400" height="100"></canvas>
#section scripts {
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: #Html.Raw(Json.Encode(Model.ChartLabel)),
datasets: [{
label: "#Model.ChartName",
data: #Html.Raw(Json.Encode(Model.ChartData)),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
}
Now, you've a bar chart drawed by Chart.js, I used static data but you can fill chart from any data source.
Note: remember add chart.min.js and chart.min.css in your main layout.
Note: you can pass chart config as model like backgrounds or etc...

I used chart.js this time as mentioned in your last answer,
here is the example:
public ActionResult Index( )
{
var worker = db.Workers.ToList<Worker>();
//var chartData = new List<dynamic[]>();
//var chartLabel = new List<dynamic[]>();
//foreach (var item in worker)
//{
//chartData.Add(new dynamic[] {item.Salary});
//chartLabel.Add(new dynamic[] {item.Name});
//}
var chartData = worker.Select(s => s.Salary).ToList();
var chartLabel = worker.Select(s => s.Name).ToList();
ViewBag.ChartData = chartData;
ViewBag.ChartLabel = chartLabel;
return View();
}
<script type="text/javascript">
$(document).ready(function () {
var barData = {
labels: #Html.Raw(Json.Encode(ViewBag.ChartLabel)),
datasets: [
{
label: "Bar Chart Demo",
backgroundColor: 'rgba(26,179,148,0.5)',
borderColor: "rgba(26,179,148,0.7)",
pointBackgroundColor: "rgba(26,179,148,1)",
pointBorderColor: "#fff",
data: #Html.Raw(Json.Encode(ViewBag.ChartData)),
}
]
};
var barOptions = {
responsive: true
};
var ctx2 = document.getElementById("barChart").getContext("2d");
new Chart(ctx2, { type: 'bar', data: barData, options: barOptions });
});
...
Here is the output, as it is displaying the labels from database but no chart data "Salary".

Live streaming data using chart.js, javascript, html

I wanted to stream live data in the form of a chart. I'm new to Javascript, so I wanted to first experiment with the sample on this page.
https://web.archive.org/web/20211113012042/https://nagix.github.io/chartjs-plugin-streaming/latest/samples/charts/line-horizontal.html
The code is given as:
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
function randomScalingFactor() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
function onRefresh(chart) {
chart.config.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: randomScalingFactor()
});
});
}
var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1 (linear interpolation)',
backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
borderColor: chartColors.red,
fill: false,
lineTension: 0,
borderDash: [8, 4],
data: []
}, {
label: 'Dataset 2 (cubic interpolation)',
backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
borderColor: chartColors.blue,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
}]
},
options: {
title: {
display: true,
text: 'Line chart (hotizontal scroll) sample'
},
scales: {
xAxes: [{
type: 'realtime'
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
tooltips: {
mode: 'nearest',
intersect: false
},
hover: {
mode: 'nearest',
intersect: false
},
plugins: {
streaming: {
duration: 20000,
refresh: 1000,
delay: 2000,
onRefresh: onRefresh
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data.forEach(function(dataObj) {
dataObj.y = randomScalingFactor();
});
});
window.myChart.update();
});
var colorNames = Object.keys(chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[config.data.datasets.length % colorNames.length];
var newColor = chartColors[colorName];
var newDataset = {
label: 'Dataset ' + (config.data.datasets.length + 1),
backgroundColor: color(newColor).alpha(0.5).rgbString(),
borderColor: newColor,
fill: false,
lineTension: 0,
data: []
};
config.data.datasets.push(newDataset);
window.myChart.update();
});
document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.pop();
window.myChart.update();
});
document.getElementById('addData').addEventListener('click', function() {
onRefresh(window.myChart);
window.myChart.update();
});
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<p>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
</p>
</body>
When I copy and paste it into jsfiddle, the first code snippet going into the Javascript section and the second going into the HTML section. However, nothing happens? Could someone explain why/help me edit it so that it works?
Note: the code above is not my own, it belongs to this guy

In JSFiddle, the load type is set to 'On Load' by default, so you cannot handle the load event. Setting the load type to 'No wrap - bottom of ' works (in the pop-up menu in the Javascript section).

Chart.js | Trouble refreshing line chart with "setInterval"

Wondering if anyone can help me out please.
I'm having trouble getting a Chart.js LineChart (with AJAX data) to refresh every "X" seconds. I've tried to put the code below in a function inside a setInterval and eventhough it does refresh, it redraws itself in a "zoomed-in" manner...
I want the chart to refresh itself every 10 seconds.
Code:
$.ajax({
type: "POST",
url: '#Url.Action("ChartRT")',
contentType: "application/json",
dataType: "json",
success:
function (chartsdata_RT) {
var aData = chartsdata_RT;
var aLabels = aData.map(c => c.Period);
var aDatasets1 = aData.map(c => c.FAILED);
var aDatasets2 = aData.map(c => c.OTHER);
var aDatasets3 = aData.map(c => c.DELIVERED);
var aDatasets4 = aData.map(c => c.PENDING);
var dataT = {
labels: aLabels,
datasets: [
{
label: "FAILED",
data: aDatasets1,
borderColor: '#ff0000',
backgroundColor: "rgba(255, 0, 0, 0.3)",
fill: 'true'
},
{
label: "OTHER",
data: aDatasets2,
borderColor: '#3366ff',
backgroundColor: "rgba(32, 162, 219, 0.3)",
},
{
label: "DELIVERED",
data: aDatasets3,
borderColor: '#009900',
backgroundColor: "rgba(0, 102, 0, 0.3)",
},
{
label: "PENDING",
data: aDatasets4,
borderColor: '#ff9900',
backgroundColor: "rgba(255, 153, 219, 0.3)",
}
]
};
var ctx = $("#chart_last2hours").get(0).getContext("2d");
ctx.canvas.height = "50";
var myNewChart = new Chart(ctx, {
type: 'line',
data: dataT,
options: {
legend: {
display: true,
position: 'right',
fullWidth: false,
labels: {
fontColor: '#484848',
fontsize: 10,
boxWidth: 20,
padding: 5,
lineWideth: 0
}
}
}
});
}
});

ended wrapping the above code in a function (drawChartRT). I then:
1) Call the function drawChartRT() to draw the LineChart.
2) Inside a setInterval remove and add the canvas and call the function drawChartRT().
drawChartRT();
setInterval(function () {
$("canvas#chart_last2hours").remove();
$("#chartdiv_rt").append('<canvas id="chart_last2hours" height="200"></canvas>');
var div = document.getElementById("chart_last2hours");
//console.log(div);
drawChartRT();
}, 10000);
Works like a charm!
Thanks. José