Is that code your PartialView? If so, then you need to amend the code so
that the google loader only gets called once on the main view, and that
subsequent reloads of the PartialView do not wait on the callback from the
loader (as the API is already loaded, the callback will never be called
again). Also, you should only ever have 1 callback from the google loader.
[main view]
google.load('visualization', '1', {packages: ['corechart', 'gauge']});
var vizApiLoaded = false;
[partial view - remove function TargetCharts from ready event handler]
function TargetCharts () {
// chart drawing functions (remove all google.load and
google.setOnLoadCallback calls)
// add this at the end, calling each draw function:
drawGauge();
drawGauge2();
drawGauge3();
// etc...
}
if (vizApiLoaded) {
$(document).ready(TargetCharts);
}
else {
google.setOnLoadCallback(TargetCharts);
vizApiLoaded = true;
}
On Friday, December 20, 2013 12:50:56 PM UTC-5, kumar bhaskaruni wrote:
>
> Hello,
> I am using google's Guages, Bar and Pie charts in MVC4 application,
> I have all these listed in a PartialView, and I am calling the partial
> view from main Index page.And refreshing the partial view for every 30 secs.
>
> after 30 secs I am getting the data, all the scripts and everything in the
> developer tools but on the page it is disappeared.
>
> my code is as below
>
>
> @{
> Layout = "";
> }
>
> <script>
> $(document).ready( function TargetCharts(){
>
> var gauge;
> var gaugeData;
> var gaugeOptions;
> google.load('visualization', '1', { packages: ['gauge'] });
> function drawGauge() {
> gaugeData = google.visualization.arrayToDataTable([
> ['Success'],
> [5]
> ]);
>
> gauge = new
> google.visualization.Gauge(document.getElementById('gaugeSuccess'));
> gaugeOptions = {
> min: 0,
> max: 8,
> greenFrom: 0,
> greenTo: 5,
> minorTicks: 10
> };
> gauge.draw(gaugeData, gaugeOptions);
> }
> google.setOnLoadCallback(drawGauge);
>
> var gauge;
> var gaugeData;
> var gaugeOptions;
> function drawGauge1() {
> gaugeData = google.visualization.arrayToDataTable([
> ['Failed'],
> [0]
> ]);
>
> gauge = new
> google.visualization.Gauge(document.getElementById('gaugeFailed'));
> gaugeOptions = {
> min: 0,
> max: 8,
> redFrom: 0,
> redTo: 0,
> minorTicks: 10
> };
> gauge.draw(gaugeData, gaugeOptions);
> }
> google.setOnLoadCallback(drawGauge1);
>
> var gauge;
> var gaugeData;
> var gaugeOptions;
> function drawGauge2() {
> gaugeData = google.visualization.arrayToDataTable([
> ['Running'],
> [2]
> ]);
>
> gauge = new
> google.visualization.Gauge(document.getElementById('gaugeRunning'));
> gaugeOptions = {
> min: 0,
> max: 8,
> greyFrom: 0,
> greyTo: 2,
> minorTicks: 10
> };
> gauge.draw(gaugeData, gaugeOptions);
> }
> google.setOnLoadCallback(drawGauge2);
>
> var gauge;
> var gaugeData;
> var gaugeOptions;
> function drawGauge3() {
> gaugeData = google.visualization.arrayToDataTable([
> ['Yet To Run'],
> [1]
> ]);
>
> gauge = new
> google.visualization.Gauge(document.getElementById('gaugeYetToRun'));
> gaugeOptions = {
> min: 0,
> max: 8,
> yellowFrom: 0,
> yellowTo: 1,
> minorTicks: 10
> };
> gauge.draw(gaugeData, gaugeOptions);
> }
> google.setOnLoadCallback(drawGauge3);
>
> google.load('visualization', '1');
>
> function drawVisualization() {
> var wrapper = new google.visualization.ChartWrapper({
> chartType: 'ColumnChart',
> dataTable: [['', 'Brightstar Review' , 'Customer Review' ,
> 'Released From PFO' , 'Dropped To JDE' , 'InProcess To Drop To JDE' ,
> 'NotDropped To JDE' , 'SalesOrder Created In JDE' , 'SalesOrder InProcess
> In JDE' , 'SalesOrder Failed In JDE' , 'SalesOrder Cancelled In JDE' ,
> 'SalesOrder Dropped In RB' , 'SalesOrder Shipped In JDE' ],
> ['', 1, 0, 0,
> 0, 0,
> 0,0,
> 0, 0,
> 0,0,
> 0]],
> options: {position: 'top', textStyle: {color: 'blue',
> fontSize: 16},width: 350,legend: 'none'
> , tooltip: {isHtml: true,text: 'value' }},
> containerId: 'visualization'
> });
> wrapper.draw();
> }
> google.setOnLoadCallback(drawVisualization);
>
> google.load("visualization", "1", { packages: ["corechart"] });
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> var data = google.visualization.arrayToDataTable([
> ['Task', 'Orders Per Day'],
> ['Brightstar Review ' , 1 ],
> ['Customer Review', 0],
> ['Released From PFO' , 0],
> ['Dropped To JDE', 0],
> ['InProcess To Drop To JDE' , 0],
> ['NotDropped To JDE' , 0],
> ['SalesOrder Created In JDE', 0],
> ['SalesOrder InProcess In JDE', 0],
> ['SalesOrder Failed In JDE' , 0],
> ['SalesOrder Cancelled In JDE' , 0],
> ['SalesOrder Dropped In RB' , 0],
> ['SalesOrder Shipped In JDE' , 0]
> ]);
>
> var options = {
> //width: 600,
> is3D: true,
> width:350,
>
> tooltip: {isHtml: true,text: 'value' },
> legend: 'none'
> };
>
>
> var chart = new
> google.visualization.PieChart(document.getElementById('piechart'));
> chart.draw(data, options);
>
>
> var data = google.visualization.arrayToDataTable([
> ['Task', 'Orders Per Day'],
> ['Brightstar Review ' , 1 ],
> ['Customer Review', 0],
> ['Released From PFO' , 0],
> ['Dropped To JDE', 0],
> ['InProcess To Drop To JDE' , 0],
> ['NotDropped To JDE' , 0],
> ['SalesOrder Created In JDE', 0],
> ['SalesOrder InProcess In JDE', 0],
> ['SalesOrder Failed In JDE' , 0],
> ['SalesOrder Cancelled In JDE' , 0],
> ['SalesOrder Dropped In RB' , 0],
> ['SalesOrder Shipped In JDE' , 0]
> ]);
>
> var options = {
> //title: 'Cricket Orders',
> //width: 600,
> is3D: true,
> width:350,
> //backgroundColor: '#4C7B86',
> tooltip: {isHtml: true,text: 'value' },
> legend: 'none'
> };
> }
>
> });
> </script>
>
>
> <div class="DashboardSlide">
> <div class="HeaderContainer">
> <div class="CompanyName">
> Target
>
> </div>
> <div class="CompanyActivity">
> Status: Wait
> </div>
> </div>
> <div class="border">
> <div class="chartContainer">
> <div class="CompanyStatus">
> <a href="/SCOJobMonitoring/Index"
> class="divLegendAction">Jobs</a>
> </div>
> <div class="CompanyTotalStatus">
> Total No. of Jobs: 8
> </div>
> </div>
> <div class="GaugeRow">
> <div class="successChart">
> <div id="gaugeSuccess" class=" gauge"></div>
> </div>
>
> <div class="failedChart">
> <div id="gaugeFailed" class=" gauge"></div>
> </div>
>
> <div class="runningChart">
> <div id="gaugeRunning" class=" gauge"></div>
> </div>
>
> <div class="yetToChart">
> <div id="gaugeYetToRun" class="gauge"></div>
> </div>
>
>
>
> </div>
> </div>
> <div class="borderCharts">
> <div class="HeaderContainerCharts">
> <div class="CompanyOrderStatus">
>
> <a href="/SCOOrderTracking/Index" class="divLegendAction">
> Orders</a>
> </div>
> <div class="CompanyTotalOrderStatus">
> Total No. of Orders : 1
> </div>
>
> </div>
> <div class="ChartRow">
> <div class="pieChartSection">
> <div id="piechart" class="chart"></div>
> </div>
> <div class="barChartSection">
> <div id="visualization" class="chart"></div>
> </div>
>
>
>
> <div class="legenContainerTarget">
> <div class="legendRow">
> <table>
> <tr>
> <td>
> <div class="legend blue"></div>
> Brightstar Review
> </td>
> <td>1</td>
> <td>
> <div class="legend red"></div> Customer
> Review
> </td>
> <td>0</td>
> </tr>
>
> <tr>
> <td>
> <div class="legend yellow"></div>
> Released From PFO
> </td>
> <td>0</td>
> <td>
> <div class="legend green"></div> Dropped
> To JDE
> </td>
> <td>0</td>
> </tr>
> <tr>
> <td>
> <div class="legend purple"></div>
> InProcess To Drop To JDE
> </td>
> <td>0</td>
> <td>
> <div class="legend skyblue"></div>
> NotDropped To JDE
> </td>
> <td>0</td>
> </tr>
> <tr>
> <td>
> <div class="legend pink"></div>
> SalesOrder Created In JDE
> </td>
> <td>0</td>
> <td>
> <div class="legend parrotGreen"></div>
> SalesOrder InProcess In JDE
> </td>
> <td>0</td>
> </tr>
>
> <tr>
> <td>
> <div class="legend cheeryred"></div>
> SalesOrder Failed In JDE
> </td>
> <td>0</td>
> <td>
> <div class="legend Navyblue"></div>
> SalesOrder Cancelled In JDE
> </td>
> <td>0</td>
> </tr>
>
> <tr>
> <td>
> <div class="legend violet"></div>
> SalesOrder Dropped In RB
> </td>
> <td>0</td>
> <td>
> <div class="legend blueShaded"></div>
> SalesOrder Shipped In JDE
> </td>
> <td>0</td>
> </tr>
>
> </table>
>
>
> </div>
>
> </div>
>
>
> </div>
>
> </div>
>
> <div class="HeaderContainer">
> <div class="CompanyName">
> Cut Off time is at December 19 2013 at
> </div>
> <div class="CompanyActivity">
> Last Refershed at: 12/20/2013 11:30:00 AM
> </div>
> </div>
> </div>
>
>
>
> main index page
>
>
>
> <div class="slider" id="slider2">
>
> <div class="DashboardSlide_parent">
> @{ Html.RenderAction("TargetPartial");}
> </div>
>
>
> </div>
>
> <script type="text/javascript">
>
>
> $(document).ready(function () {
> setInterval(function () {
> // $('.DashboardSlide_parent').html='';
> $('.DashboardSlide_parent').load('/SCODashBoard/TargetPartial');
> $.get("/SCODashBoard/TargetPartial", function (data) {
> $(".DashboardSlide_parent").replaceWith(data);
> });
> }, 30000); // every 30 sec
> });
>
> </script>
>
>
> can anyone pleas help me with this issue i really appreciate your help ,
> thank you very much
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
