CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Flardryn
Flardryn

Reputation: 487

Google Chart long Javascript Issue

.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

Answers (1)

Flardryn
Flardryn

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

Related Questions