-1
I have a problem using Google Charts and Json. In this site when entering two inputs (Data1 and Data2) are filled with the first day of the month and last day of the month respectively. Then he makes an AJAX request to get a Json that will popular the chart. This is working perfectly. The problem, the user can enter new date parameters and the site should generate a new chart. This part doesn’t work, because it always comes back and generates the first graph. Can someone help me? Follow the code I’ve made 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);
}
});
}