We Keep Coding

Auto refresh Google Chart

I have a Pie Chart and want to auto refresh it every 5 seconds. This is my code:
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
width: 900,
height: 500,
title: 'Partition des tickets',
legend: 'left',
is3D: true
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>

You can use setTimeout to run the script every 5 secs. I also added an isDrawing flag so that you don't trigger the function again while it's drawing.
<script type="text/javascript">
var isDrawing = false;
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(() => {
// draw the first time
drawChart();
// start automatic refresh
setTimeout(() => {
if (!isDrawing) {
drawChart();
}
}, 5000);
});
function drawChart() {
isDrawing = true;
var options = {
width: 900,
height: 500,
title: "Partition des tickets",
legend: "left",
is3D: true
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
isDrawing = false;
},
failure: function(r) {
alert(r.d);
isDrawing = false;
},
error: function(r) {
alert(r.d);
isDrawing = false;
}
});
}
</script>

i fixed it , if any one want to update any google chart dynamicly you just need to add update() function like you see
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
width: 900,
height: 500,
title: 'Partition des tickets',
legend: 'left',
is3D: true,
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
updateChart();
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
function updateChart() {
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
setTimeout(function () { updateChart() }, 1000);
};
}
</script>

how to create line chart with jqplot using ajax data

I am trying to create line chart with Jqplot by getting the data from c# controller using ajax.
function getGraph(fcn) {
var turl = '/Rep/ChartBoxPlot/' + fcn;
$.ajax({
type: "POST",
url: turl,
dataType: "json",
success: function (result) {
$('#chart1').empty();
for (var i = 0; i < result.length; i++) {
var temp = result[i]['Date'];
var date = moment(temp).format('MMM DD');
var y = result[i]['Actual'];
var line1 = [date, result[i]['Actual']];
var line2 = [date, result[i]['Forecast']];
// alert(line1);
var plot = $.jqplot('chart1', [line1], {
axes: {
xaxis: {
label: "Forecast",
renderer: $.jqplot.ajaxDataRenderer,
//tickOptions: { formatString: '%I:%M:%S %p' },
//numberTicks: 8,
tickInterval: '15 second'
},
yaxis: {
label: 'Lines'
},
},
});
}
},
error(result) {
alert(result)
}
});
}
html
<div id="chart1" style="height: 400px; width: 900px;
position: relative;" class="jqplot-target">
The data from controller is coming fine but the graph is not plotted. Any suggestions would be appreciated
Thanks

How to show legends on chart using c3 js with json

I'm using C3 chart to present some data on my project and I want to show up legends (Label in my case) instead of numbers in the AcisX :
Data json format :
[
{"Label":"DQUA","Aut":3.75,"NoAut":3.75,"CM":32},
{"Label":"DPRO","Aut":43.9,"NoAut":0,"CM":144},
{"Label":"DMAI","Aut":1.6999999999999993,"NoAut":0,"CM":0},
{"Label":"DENG","Aut":0,"NoAut":0,"CM":16}
]
My attempt to get the task work :
var chart = c3.generate({
bindto: '.ks-chart-orders-block',
data: {
url: '/Home/AbsencesByDepartementFiltredByReasons',
mimeType: 'json',
type:'bar',
keys:{
value: ['Aut','NoAut','CM']
},
}
}
});
Getted Result :
Expected Result:

You need to modify the x-axis with a custom category:
var chart = c3.generate({
bindto: '.ks-chart-orders-block',
data: {
url: '/Home/AbsencesByDepartementFiltredByReasons',
mimeType: 'json',
type:'bar',
keys:{
x: 'Label',
value: ['Aut','NoAut','CM']
},
},
axis: {
x: {
type: 'category',
tick: {
centered: true
}
}
}
});

Removing Legend in Google Visualization Pie Chart

I am trying to hide the labels in my pie chart. I think the correct word is labels? But I could be wrong. Basically I have a pie chart That displays some data, outside of the pie chart it has a label with a color cube and a name next to it displaying what each color stands for, I would like to get rid of that, because on hover I show the same data and it takes up some valuable real estate I would like to use. Here is my Javascript code:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: '',
is3D: true
};
$.ajax({
type: "POST",
url: "myPage.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//console.log(JSON.stringify(r))
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
var formatter = new google.visualization.NumberFormat(
{ negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
formatter.format(data, 1);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}

Google charts Visualization, killing legend:
legend: {position: 'none'}
-- this will kill the legend in Google Charts.
Also, the JS to do it:
http://jsfiddle.net/api/post/library/pure/
legend: 'none'
So, ultimately this should do it for you:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: '',
is3D: true,
legend: none,
};
$.ajax({
type: "POST",
url: "myPage.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//console.log(JSON.stringify(r))
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
var formatter = new google.visualization.NumberFormat(
{ negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
formatter.format(data, 1);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}

Reuse function to load data into Highchart

I have a Highchart object and a function to load the data:
graficaPropuestas = new Highcharts.Chart({
chart: {
height: 300,
renderTo: "graficaPropuestas",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
events: {
load: recogerDatosInforme('propuesta', $(this))
}
}
})
And the function to load the data:
function recogerDatosInforme(tipo, gr) {
$.ajax({
url: '/Licencia/recogerDatosUsuariosSistema?tipo' + tipo,
datatype: "json",
success: function(data) {
gr.series[0].setData(data);
},
cache: false
});
}
I want to pass the graficaPropuestas object to the function so I can reuse the same function to load more graphs, however I cant get this to work. If I put in the function directly the graficaPropuestas object on the success: method it work well.
Any help would be appreciated.

If you will have only one instance of graficaPropuestas better and more efficient will be to use that solution:
var graficaPropuestas = new Highcharts.Chart( ...
function recogerDatosInforme(tipo) {
$.ajax({
url: '/Licencia/recogerDatosUsuariosSistema?tipo' + tipo,
datatype: "json",
success: function(data) {
graficaPropuestas.series[0].setData(data);
},
cache: false
});
}

I resolved it by this way:
The function to get the data:
function recogerDatosInforme(tipo, gr) {
$.ajax({
url: '/Informes/recogerDatosInforme?tipo=' + tipo,
datatype: "json",
success: function(data) {
gr.series[0].setData(data);
},
cache: false
});
}
Then I create the chart whithout the events method on the init:
graficaPropuestas = new Highcharts.Chart({
chart: {
height: 300,
renderTo: "graficaPropuestas",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
}
})
And the I call the function with the graph object as an argument:
recogerDatosInforme('propuesta', graficaPropuestas)
So now I can make more chart objects and use the same function to get the data.