Reputation: 487
.Hi I've been trying to add google calendar chart to my project but there is something wrong that I don't understand.
My chart is on a pop-up panel which triggered by button click And here is my code;
The button click function:
function Detail(id)
{
google.charts.load("current", { packages: ["calendar"] });
google.charts.setOnLoadCallback(drawChart); //callback for chart
$.ajax({
//Some stuff here
});
$.ajax({
//Some other stuff here
});
}
So, as you can see after button click drawChart must be run.
function drawChart(){
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'done/miss' });
dataTable.addColumn({ type: 'string', role: 'tooltip', p: { html: true } });
dataTable.addRows([
[new Date(2017, 3, 9), 10, '<div style="width:40px; height:40px;">TESTtest</div>']
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar'));
var options = {
title: "test",
height: '100%',
};
chart.draw(dataTable, options);
$('#PopUpDiv').show();
}
When I click the button page locks for few sec and Firefox says: "A script stopped working or no response anymore Script: https://www.gstatic.com/charts…sapi_compiled_format_module.js:179"
The code looks really simple and correct. I don't understand what is happening, so some help would be great. Thanks in advance.
EDIT : I've created code snipped and try this code on there and it works. Now i'm confuced :(
function Detail()
{
google.charts.load("current", { packages: ["calendar"] });
google.charts.setOnLoadCallback(drawChart);
}
function drawChart(){
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'done/miss' });
dataTable.addColumn({ type: 'string', role: 'tooltip', p: { html: true } });
dataTable.addRows([
[new Date(2017, 3, 9), 10, '<div style="width:40px; height:40px;">TESTtest</div>']
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar'));
var options = {
title: "test",
height: '100%',
};
chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button type="button" onclick="Detail()">click it</button>
<div id="calendar"></div>
Upvotes: 0
Views: 34
Reputation: 487
I closed the VS and restarted the project and somehow problem solved. So the code is fine. Thanks everyone for attention.
Upvotes: 0