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.
