Eduardo Schettini Guimarães
Reputation: 35
How redraw Google Chart using Ajax
I have a problem on my website. When its loaded they set two dates, First Day of Mounth and the Last Day, in a input form then calling by ajax the JSON to show the chart. This part works fine, but I have to create a opcional way, the user give me another two dates and get another chart.
Here what I did so far...
google.load("visualization", "1", {packages:["corechart"], "callback": drawChart}); google.setOnLoadCallback(drawChart);
var chart;
$(document).ready(function(){
//On button click, load new data
$("#btnPesquisar").click(function() {
var Dados = {};
Dados.data1 = $('#Data1').val();
Dados.data2 = $('#Data2').val();
alert($('#Data1').val());
$.ajax({
type: "POST",
url: "Report.aspx/GetChartData",
data: JSON.stringify(Dados),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//alert("Funcionou");
data = google.visualization.arrayToDataTable(r.d);
console.log(data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5,
{
calc: function (dt, row) {
return 0;
},
label: "Total",
type: "number",
},
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
},
type: "number",
role: "annotation"
}
]);
var myHeight = 800;
var options = {
animation:{
duration: 1000,
easing: 'out',
startup: true
},
forceIFrame: 'false',
title: 'Registros',
backgroundColor: 'transparent',
height: myHeight,
legend: {
position: 'top',
maxLines: 3
},
bar: { groupWidth: '75%' },
isStacked: true,
series: {
6: {
annotations: {
stem: {
color: "transparent",
length: 28
},
textStyle: {
color: "#000000",
}
},
enableInteractivity: false,
tooltip: "none",
visibleInLegend: false
}
}
};
chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(view, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
});
});
function drawChart() {
//alert("Entrou 2");
if ($('#Data1').is(':empty')){
var data = new Date();
var mes = ("0" + (data.getMonth() + 1)).slice(-2);
var ano = data.getFullYear();
var data1 = "01/"+mes+"/"+ano;
$('#Data1').val(data1);
}
if ($('#Data2').is(':empty'))
{
var lastDay = new Date(ano, mes, 0);
var data2 = lastDay.getDate()+"/"+("0" + (lastDay.getMonth() + 1)).slice(-2)+"/"+lastDay.getFullYear()
//alert(data2);
$('#Data2').val(data2);
}
var Dados = {};
Dados.data1 = $('#Data1').val();
Dados.data2 = $('#Data2').val();
$.ajax({
type: "POST",
url: "Report.aspx/GetChartData",
data: JSON.stringify(Dados),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//alert("Funcionou");
data = google.visualization.arrayToDataTable(r.d);
console.log(data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5,
{
calc: function (dt, row) {
return 0;
},
label: "Total",
type: "number",
},
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
},
type: "number",
role: "annotation"
}
]);
var myHeight = 800;
var options = {
animation:{
duration: 1000,
easing: 'out',
startup: true
},
forceIFrame: 'false',
title: 'Registros',
backgroundColor: 'transparent',
height: myHeight,
legend: {
position: 'top',
maxLines: 3
},
bar: { groupWidth: '75%' },
isStacked: true,
series: {
6: {
annotations: {
stem: {
color: "transparent",
length: 28
},
textStyle: {
color: "#000000",
}
},
enableInteractivity: false,
tooltip: "none",
visibleInLegend: false
}
}
};
chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(view, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
Upvotes: 0
Views: 67
Answers (1)
Eduardo Schettini Guimarães
Reputation: 35
Finally I found the problem. I'm using an aspx website and put the button inside de form, so everytime I clicked all site was refreshed, missing all information. In the end this was the solution I'd founded.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Report.aspx.cs" Inherits="Report" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Report by Date</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body >
<div id="header"></div>
<div class="container" style="margin-top: 10px;">
<div class="row text-center">
<div class="col-sm-12 text-center">
<h3 class="text-center">Registros</h3>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td><h5>First Date :</h5></td>
<td style="padding-left: 10px;">
<!-- <asp:TextBox ID="Data1" runat="server"></asp:TextBox> -->
<input name="Data1" type="text" id="Data1">
</td>
</tr>
<tr>
<td><h5>Last Date:</h5></td>
<td style="padding-left: 10px;">
<!-- <asp:TextBox ID="Data2" runat="server"></asp:TextBox> -->
<input name="Data2" type="text" id="Data2">
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<input type="submit" name="btnPesquisar" value="Enviar" id="btnPesquisar">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="chart" style="width: 1250px; height: 380px; "></div>
</div>
</div>
</div>
<script>
var teste = false;
google.load("visualization", "1", {packages:["corechart"], "callback": drawChart});
google.setOnLoadCallback(drawChart);
function drawChart() {
//alert(teste);
if ($('#Data1').is(':empty')){
var data = new Date();
var mes = ("0" + (data.getMonth() + 1)).slice(-2);
var ano = data.getFullYear();
var data1 = "01/"+mes+"/"+ano;
$('#Data1').val(data1);
}
if ($('#Data2').is(':empty'))
{
var lastDay = new Date(ano, mes, 0);
var data2 = lastDay.getDate()+"/"+("0" + (lastDay.getMonth() + 1)).slice(-2)+"/"+lastDay.getFullYear()
//alert(data2);
$('#Data2').val(data2);
}
var Dados = {};
Dados.data1 = $('#Data1').val();
Dados.data2 = $('#Data2').val();
$.ajax({
type: "POST",
url: "Report.aspx/GetChartData",
data: JSON.stringify(Dados),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (r) {
data = google.visualization.arrayToDataTable(r.d);
console.log(data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5,
{
calc: function (dt, row) {
return 0;
},
label: "Total",
type: "number",
},
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
},
type: "number",
role: "annotation"
}
]);
var myHeight = 800;
var options = {
animation:{
duration: 1000,
easing: 'out',
startup: true
},
forceIFrame: 'false',
title: 'Registros',
backgroundColor: 'transparent',
height: myHeight,
legend: {
position: 'top',
maxLines: 3
},
bar: { groupWidth: '75%' },
isStacked: true,
series: {
6: {
annotations: {
stem: {
color: "transparent",
length: 28
},
textStyle: {
color: "#000000",
}
},
enableInteractivity: false,
tooltip: "none",
visibleInLegend: false
}
}
};
chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(view, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
//teste = true;
}
//On button click, load new data
$("#btnPesquisar").click(function() {
var Dados = {};
Dados.data1 = $('#Data1').val();
Dados.data2 = $('#Data2').val();
alert($('#Data1').val());
$.ajax({
type: "POST",
url: "Report.aspx/GetChartData",
data: JSON.stringify(Dados),
contentType: "application/json; charset=utf-8",
dataType: "json",
'async': true,
success: function (r) {
//alert("Funcionou");
data = google.visualization.arrayToDataTable(r.d);
console.log(data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5,
{
calc: function (dt, row) {
return 0;
},
label: "Total",
type: "number",
},
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
},
type: "number",
role: "annotation"
}
]);
var myHeight = 800;
var options = {
animation:{
duration: 1000,
easing: 'out',
startup: true
},
forceIFrame: 'false',
title: 'Registros',
backgroundColor: 'transparent',
height: myHeight,
legend: {
position: 'top',
maxLines: 3
},
bar: { groupWidth: '75%' },
isStacked: true,
series: {
6: {
annotations: {
stem: {
color: "transparent",
length: 28
},
textStyle: {
color: "#000000",
}
},
enableInteractivity: false,
tooltip: "none",
visibleInLegend: false
}
}
};
//chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(view, options);
alert(teste);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
});
</script>
</body>
</html>
Upvotes: 1
Related Questions
- how to make google chart moving and update dynamically
- Redraw google chart based on user input via AJAX request
- Google chart redraw onclick
- How to redraw Google Chart after every Ajax call on modal pop up
- Re-Draw google chart on button click / javascript
- Redraw Google Chart after every Ajax call
- Once again about how to plot google chart after an ajax call
- draw google charts with JSON
- Google Chart with ajax
- redraw google chart