Develop Reference

How can my Chart.js just update when data in SQL change?

I build a web app in MVC using SignalR to update real-time data. I can display my chart with real-time data from SQL but it just updates by the time set in setInterval. But now I want my chart to just update when my data in SQL SERVER changes. I have tried many ways but it's not correct. Can you help me with the algorithm? Thank you.
Here is my code :
<!--Chart-->
<script>
var ctx = document.getElementById("percent-chart2");
var colorarray = ['#00b5e9', '#fa4251', '#006400'];
var pre_vals = 0;
//
var myVar = setInterval(GetValue, 1000);
function GetValue() {
var val1 = parseFloat(document.getElementById("tblValue").innerHTML);
var val2 = parseFloat(document.getElementById("tblValue1").innerHTML);
var vals = [val1, val2, 2000];
return vals;
}
if (ctx) {
ctx.height = 209;
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: "My First dataset",
//data: [GetValue, GetValue, GetValue],
data: GetValue(),
backgroundColor: [
'#00b5e9',
'#fa4251',
'#006400'
],
hoverBackgroundColor: [
'#00b5e9',
'#fa4251',
'#006400'
],
borderWidth: [
0, 0, 0
],
hoverBorderColor: [
'transparent',
'transparent',
'transparent'
]
}
],
labels: [
'STATION 1',
'STATION 2',
'STATION 3'
]
},
options: {
maintainAspectRatio: false,
responsive: true,
cutoutPercentage: 57,
animation: {
animateScale: true,
animateRotate: true
},
legend: {
display: false,
position: 'bottom',
labels: {
fontSize: 14,
fontFamily: "Poppins,sans-serif"
}
},
tooltips: {
titleFontFamily: "Poppins",
xPadding: 15,
yPadding: 10,
caretPadding: 0,
bodyFontSize: 16,
}
}
});
}
function UpdateChart(datachart, data, color) {
datachart.data.datasets.pop();
datachart.data.datasets.push({
data: data,
backgroundColor: color,
hoverBackgroundColor: color
});
datachart.update();
}
setInterval(function () {
const my_val = GetValue();
//var updatedata = [my_val, my_val, 2000];
var updatedata = my_val;
UpdateChart(myChart, updatedata, colorarray);
}, 10000);
</script>

The way I handle this is by adding a client call with the dataset after the database update has completed. This way you only update when that update is called.
Here is a rough example off the top of my head:
public void UpdateDB(int updatedData)
{
//DB work to commit the updatedData
....
//Query your dataset into an serialized updatedDataset
....
//Call a method to create an array (updatedColors) of colors based on the the Count of updatedDataset
....
//Send data to client(s)
Clients.All.yourclientfunction(updatedDataset, updatedColors);
}

Full Graphic(javascript flot plugin) to image(png)

i'm using the flot plugin for javascript to plot some graphics on a web software, it works perfectly..I can plot the graphic, export the data to an .xls file, save the graphic figure as a .png file(both you can choose the name of the file)
Anyway, it plot something like the image below..
How the plot shows in the web-site
but when I click the button to save it to .png, the image is the below..How the plot shows in the downloaded file
I need that the downloaded file includes the axis numbers(in the exemple 0,10,...,100 and the y-axis too)
how to?
the importants part of the code are below(... is for code that is not needed here):
function gerar_graficos(varArray, eixo_x, eixo_y) {
...
$.ajax({
type: "POST",
url: '{% url "micro:micro_graficos_calc" %}', // micro.views.micro_graficos_calc
data: JSON.stringify({
fibra:fibra, matriz:matriz, fibra_nome:fibra_nome, matriz_nome:matriz_nome,
abordagem:abordagem, varArray:varArray, eixo_x:eixo_x, eixo_y:eixo_y, vf:vf, sigma2:sig2
}),
success: function(response) {
var pan_buttons = $("#pan_buttons");
var zoom_buttons = $("#zoom_buttons");
var placeholder = $("#placeholder_grafico");
var data = response.curvas;
var nome_eixo_x = $('#id_select_eixo_x').select2('data').text;
var nome_eixo_y = $('#id_select_eixo_y').select2('data').text;
...
}
$("#flot-tooltip").hide();
...
var tick;
if($('#id_select_eixo_x').val() == 'angulo')
tick = [0, 30, 60, 90, 120, 150, 180]
else
tick = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
var plot = $.plot(placeholder, data, {
xaxis: {
//axisLabel: $('#id_select_eixo_x').select2('data').text,
axisLabel: nome_eixo_x,
axisLabelUseCanvas: true,
axisLabelPadding: 5,
min: response.min_x,
max: response.max_x,
panRange: [response.min_x, response.max_x],
ticks: tick,
},
yaxis: {
//axisLabel: $('#id_select_eixo_y').select2('data').text,
axisLabel: nome_eixo_y,
axisLabelUseCanvas: true,
axisLabelPadding: 5,
tickFormatter: tickFormatter_y,
min: response.min_y,
max: response.max_y,
panRange: [response.min_y, response.max_y],
},
series: {
lines: {
show: true
},
shadowSize: 0
},
grid: {
clickable: true,
},
legend: {
show: false,
//container: $('#legenda_grafico')
},
zoom: {
interactive: true,
},
pan: {
interactive: true
}
});
...
$('#salvarImagemGrafico').show();
$("#ImagemGrafico").on("click", function(){
var myCanvas = plot.getCanvas();
dialogNomeImagem(myCanvas);
});
...
function dialogNomeImagem(myCanvas){
bootbox.dialog( 'Digite o nome do arquivo(não necessário colocar .png no final): <br>\
<form><input class = "input-block-level" id = "dialogIMG" type = "text"/>Padrão: imagem.png</form>',
[
{
"label": "OK",
"class": "btn-primary primary",
"callback": function(){
var MIME_TYPE = "image/png";
var imgURL = myCanvas.toDataURL(MIME_TYPE);
var dlLink = document.createElement('a');
var nome;
if(!$("#dialogIMG").val())
nome = 'imagem';
else
nome = $("#dialogIMG").val();
dlLink.download = nome;
dlLink.href = imgURL;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
},
{
"label": "Cancelar",
"class": "btn-primary",
}
],
{
"header": "",
"onEspace": true,
} );
}
HTML:
<div id="divResultados">
<div id='buttons_grafico'>
<span id='pan_buttons'>
</span>
<span id='zoom_buttons'>
</span>
<span id='flot-tooltip'>
</span>
</div>
<div id='placeholder_grafico'></div>
<div id='legenda_grafico'></div>
...
<div id='salvarImagemGrafico'>
<input type="submit" id="ImagemGrafico" class="btn btn-primary" value="Salvar Imagem">
</div>
...
</div>
big post..I know, I'm sorry, but really hope that you guys can help me..
and yes, I've looked for other topics here and found some, but my problem is that I need to keep changing the name of the file and none of the codes worked for that..

Using the jquery.flot.canvas.js plugin you need canvas: true in your options. See this example and its source on the Flot page.

HighCharts dont get value

I try to see temperature history from sqlite database, but i don't get value from server side. I use node.js, socket.io and HighCharts library. I think, its client side problem. Server side:
io.sockets.on('connection', function(socket){
setInterval(function(){
var current_temp = db.all("SELECT * FROM (SELECT * FROM temp_irasai WHERE laikas ORDER BY laikas);",
function(err, rows){
if (err){
console.log('Error serving querying database. ' + err);
return;
}
data = {temp_irasai:[rows]};
socket.emit('istorija', data);
});
}, 5000);
});
Client side:
<script type="text/javascript">
var socket = io.connect('http://ip:3000');
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spaceRight: 20,
events: {
load: function (){
socket.on('istorija', function(data){
var series = chart.series[0];
var i = 0;
while (data.temp_irasai[0][i])
{
series.data.push([data.temp_irasai[0][i].laikas, data.temp_irasai[0][i].laipsnis]);
i++;
}
chart.addSeries(series);
});
}
}
},
title: {
text: 'Temperatūra'
},
subtitle: {
text: 'Norint priartinti paspauskite ant grafiko ir pažymekite norimą plotą',
align: 'right',
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000,
title: {
text: 'Time',
margin: 15
}},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
showFirstLabel: false,
title: {
text: 'Temperatūra \u00B0C',
margin: 15
}},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)'],
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
},
series: [{
name: 'DS18B20 jutiklis (\u00B10.5\u00B0C)',
type: 'area',
data: []
}]
});
});
</script>
and database example:
CREATE TABLE temp_irasai(laikas integer PRIMARY KEY, laipsnis real);
INSERT INTO "temp_irasai" VALUES(1399533644551,20.4);
INSERT INTO "temp_irasai" VALUES(1399533646507,20.4);
INSERT INTO "temp_irasai" VALUES(1399533646547,20.4);
INSERT INTO "temp_irasai" VALUES(1399542709224,21.5);
COMMIT;

This part is just wrong:
load: function () {
socket.on('istorija', function (data) {
var series = chart.series[0];
var i = 0;
while (data.temp_irasai[0][i]) {
series.data.push([data.temp_irasai[0][i].laikas, data.temp_irasai[0][i].laipsnis]);
i++;
}
chart.addSeries(series);
});
}
You should add points, or use setData, like this:
load: function () {
socket.on('istorija', function (data) {
var series = chart.series[0];
var i = 0;
var d = [];
while (data.temp_irasai[0][i]) {
d.push([data.temp_irasai[0][i].laikas, data.temp_irasai[0][i].laipsnis]);
i++;
}
series.setData(d);
});
}

There is no data is given in your series set your values data in it, it will loads highcharts for sure, Good Luck!
type: 'area',
data: []
add Series data here.

Redraw JQplot bar chart with new data and tick labels

My code successfully draws a chart with data and tick labels retrieved as JSON object from PHP. Now at one point i want to refresh the chart but with slightly different data and different tick labels without creating a new chart.
$.jqplot.config.enablePlugins = true;
var freqs1 = [];
var freqlabels1 = [];
var dataRendered1 = $.ajax({
async: false,
url: 'MY_URL',
dataType: 'json',
success: function(data) {
if (data.length) {
freqs1 = data[0];
freqlabels1 = data[1];
}
}
});
var plot1 = $.jqplot('chartdiv', [freqs1], {
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 12
}
},
title:'Test',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: freqlabels1,
label: "Test 1",
tickOptions:{textColor : 'rgb(39, 125, 175)', fontSize: '9pt'}
},
yaxis: {
label: "Test 2",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions:{textColor : 'rgb(39, 125, 175)', fontSize: '9pt'}
}
},
highlighter: { show: true }
});
now when button is clicked lets say I have an ajax call that gets the new data and tick labels
$(document).on('click', '#refresh_new', function() {
$.ajax({
async: false,
url: 'MY_URL',
dataType: 'json',
success: function(data) {
var newData = data[0];
var newTicks = data[1];
//HOW DO I REFRESH CHART WITH NEW DATA AND TICKS FOR x-AXIS
}
});
});

Plotting json on .JS

I am trying to plot some json data but for some reason code is not workingLet me show my code.
My json looks like this:
{"d1":[[1356912000000, 1],[1356825600000, 1],[1356739200000, 1],[1356652800000, 1],[1356566400000, 38],[1356480000000, 47],[1356393600000, 1],[1356307200000, 4],[1356220800000, 1],[1356134400000, 2],[1356048000000, 50],[1355961600000, 51],[1327017600000, 38],[1326931200000, 52],[1326844800000, 45],[1326758400000, 49],[1326672000000, 46],[1326585600000, 1],[1326499200000, 5],[1326412800000, 44],[1326326400000, 48],[1326240000000, 43],[1326153600000, 46],[1326067200000, 41],[1325980800000, 1],[1325894400000, 4],[1325808000000, 45],[1325721600000, 43],[1325635200000, 42],[1325548800000, 42],[1325462400000, 43]]}
I am trying to plot with following code:
$(document).ready(function () {dashboard_A_chart.chartVisit ();});
dashboard_A_chart = {
chartVisit: function () {
var elem = $('#dashChartVisitors');
var options = {
colors: ["#edc240", "#5EB95E"],
legend: {
show: true,
noColumns: 2,
labelFormatter: null,
labelBoxBorderColor: false,
container: null,
margin: 8,
backgroundColor: false
},
xaxis: {
mode: "time",
font: {
weight: "bold"
},
color: "#D6D8DB",
tickColor: "rgba(237,194,64,0.25)",
min: "1325462400000",
max: "1356912000000",
tickLength: 5
},
selection: {
mode: "x"
},
};
var d1 = []
function onDataReceived(series) {d1 = [ series ];$.plot(elem, d1, options);}
$.ajax({
url: "../giga/data/dados1.json",
method: 'GET',
dataType: 'json',
success: onDataReceived
});
},
};

you are trying to call dashboard_A_chart.chartVisit() which is a function of an object literal which needs to be defined before.
you are creating the elem and options var inside the inside the chartVisit-function, but trying to use it in your onDataReceived-Function where it is not present.
it pretty much looks like you just copy & pasted some stuff together. take a looke at this code, that should work:
$(document).ready(function () {
var elem = $('#dashChartVisitors');
var options = {
colors: ["#edc240", "#5EB95E"],
legend: {
show: true,
noColumns: 2,
labelFormatter: null,
labelBoxBorderColor: false,
container: null,
margin: 8,
backgroundColor: false
},
xaxis: {
mode: "time",
font: {
weight: "bold"
},
color: "#D6D8DB",
tickColor: "rgba(237,194,64,0.25)",
min: "1325462400000",
max: "1356912000000",
tickLength: 5
},
selection: {
mode: "x"
}
};
$.ajax({
url: "../giga/data/dados1.json",
method: 'GET',
dataType: 'json',
success: function (data) {
$.plot(elem, data, options);
}
});
});