Я использовал инструмент Google Visualization API, чтобы сделать 3 графика. Однако каждый раз, когда я запускаю код, появляется другой график. Кроме того, если я обновлю страницу или перейду в другой браузер, появится другой график.
Существует также таблица данных, которая иногда появляется, а иногда нет. Я использую бесплатную версию Heroku для размещения своего сайта. Как вы думаете, это связано со скоростью страницы из Heroku? Использую ли я обновленную библиотеку Google API? Любая помощь приветствуется! Спасибо!
Вот код:
<!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>
Вот файл Github:
https://github.com/MehlikaToy/Django_AnalysisTool/blob/master/backend/templates/markov/results.html
