0
Ich habe das Google Visualization API-Tool verwendet, um 3 Grafiken zu erstellen. Jedes Mal, wenn ich den Code ausführe, erscheint jedoch ein anderer Graph. Wenn ich die Seite aktualisiere oder zu einem anderen Browser gehe, erscheint ein anderes Diagramm.Google Visualization API-Grafiken
Es gibt auch eine Datentabelle, die manchmal angezeigt wird und manchmal nicht. Ich verwende eine kostenlose Version von Heroku, um meine Website zu hosten. Glaubst du, dass es mit der Geschwindigkeit der Seite von Heroku zu tun hat? Verwende ich eine aktualisierte Google API-Bibliothek? Jede Hilfe wird geschätzt! Vielen Dank! Hier
ist der Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66892235-1', 'auto');
ga('send', 'pageview');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Analysis Tool</title>
{% load staticfiles %}
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'home/css/bootstrap.min.css' %}" />
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'home/css/grayscale.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'home/css/style.css' %}" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Custom Fonts -->
<link href="{% static 'home/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:300,400,500,600' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
console.log(printContents)
w=window.open();
w.document.write("<html><head><title>Print Page</title>");
w.document.write("{% load staticfiles %}")
w.document.write("<link rel='stylesheet' type='text/css' href='{% static 'home/css/bootstrap.min.css' %}' />")
w.document.write("<link rel='stylesheet' type='text/css' href='{% static 'home/css/style.css' %}' />")
w.document.write("<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>")
w.document.write('</head><body>');
w.document.write(printContents);
w.document.write('</body></html>');
w.print();
w.close();
}
// Load the Visualization API and the piechart package.
google.charts.load('current', {
callback: drawChart,
packages: ['bar', 'corechart', 'line', 'table']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var djangoDataTable = {{ tableArr|safe }};
var dataTable = google.visualization.arrayToDataTable(djangoDataTable);
var djangoDataDeathHBV = {{ deathHBV_Final|safe }}
var dataDeathHBV = google.visualization.arrayToDataTable(djangoDataDeathHBV);
var djangoDataHcc = {{ hcc_Final|safe }}
var dataHcc = google.visualization.arrayToDataTable(djangoDataHcc);
var djangoDataCirrhosis = {{ cirrhosis_Final|safe }}
var dataCirrhosis = google.visualization.arrayToDataTable(djangoDataCirrhosis);
var MortalityRate = {
title: "Mortality Rate HBV",
titleTextStyle :{
fontSize:26,
fontName:'Raleway',
},
colors: ['#ff7f50','#49B7A8'],
width: 400,
height: 400,
vAxis: {
title:'Percentage (%)',
maxValue: 100,
},
hAxis:{
title:'Year',
},
legend:{
position:'none',
maxLines: 2,
}
};
var CirrhosisGraph = {
title: "Cirrhosis",
titleTextStyle :{
fontSize:26,
fontName:'Raleway',
},
colors: ['#ff7f50','#49B7A8'],
width: 400,
height: 400,
vAxis: {
title:'Percentage (%)',
maxValue: 100,
},
hAxis:{
title:'Year',
},
legend:{
position:'none',
maxLines: 2,
}
};
var LiverCancer = {
title: "Liver Cancer",
titleTextStyle :{
fontSize:26,
fontName:'Raleway',
},
colors: ['#ff7f50','#49B7A8'],
width: 400,
height: 400,
vAxis: {
title:'Percentage (%)',
maxValue: 100,
},
hAxis:{
title:'Year',
},
legend:{
position:'none',
maxLines: 2,
}
};
var optionsTable = {
'showRowNumber': false,
'width': '100%',
'height': '100%',
'allowHtml': true,
};
var chart3 = new google.visualization.LineChart(document.getElementById('linechart1'));
chart3.draw(dataDeathHBV, MortalityRate);
if({{ ifCirr }} == 0){
var chart4 = new google.visualization.LineChart(document.getElementById('linechart2'));
chart4.draw(dataCirrhosis, CirrhosisGraph;
}
var chart5 = new google.visualization.LineChart(document.getElementById('linechart3'));
chart5.draw(dataHcc, LiverCancer);
for (y = 0; y < 4; y++){
dataTable.setCell(y,0,String(djangoDataTable[y+1][0]),null,{'style': ' font-size:20px;'})
}
for (j = 1; j < djangoDataTable[1].length; j += 2){
for (i = 0; i < 4; i++) {
dataTable.setCell(i,j,String(djangoDataTable[i+1][j]),null,{'style': 'background-color: rgba(255,127,80,0.7); font-size:18px;'})
}
}
for (j = 2; j < djangoDataTable[1].length; j += 2){
for (i = 0; i < 4; i++) {
dataTable.setCell(i,j,String(djangoDataTable[i+1][j]),null,{'style': 'background-color: #49b7a8; font-size:18px;'})
}
}
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(dataTable, optionsTable);
}
$('#mailform').submit(function(){
var formAction = $("#selectmail").val() == "technical" ? "[email protected]" : "[email protected]";
$("#mailform").attr("action", "MAILTO:" + formAction);
});
</script>
</head>
Hier wird die Github file:
https://github.com/MehlikaToy/Django_AnalysisTool/blob/master/backend/templates/markov/results.html
Mögliche Duplikat [Google API Visualisierung Tabelle funktioniert nicht] (http://stackoverflow.com/questions/38339239/google-api-visualization- chart-not-working) – WhiteHat