I have a chart that is displaying data from my api link however I want the chart to be replicated under the other tabs,I tried drawing the chart under the link for the tab but when I click the link it is empty, I read that I'm supposed to destroy the chart and redraw it under the tab but that still isn't working.I visit a tab and go back to the tab that had a graph and it certainly is destroyed but doesn't redraw, how may I fix this (have charts under different tabs) and also get it to animate like when the page first loaded?
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<link href="../dist/css/custom.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="../dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" 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="http://ift.tt/1fK4qT1"></script>
<script src="http://ift.tt/1knl5gY"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1 class="page-header">Aquaponics Dashboard</h1>
</div>
<div class="col-md-3 col-md-offset-3">
<div class="avatar"></div>
<p class="details"><strong>Welcome!</strong></p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<br>
<br>
<br>
<br>
<br>
<br>
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Chart 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<div class="tab-pane" id="chart2">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
<div class="row col-lg-offset-2">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="../img/water.png">
</div>
<div class="col-xs-9 text-right">
<div class="huge">26</div>
<div>New Comments!</div>
</div>
</div>
</div>
<a href="#">
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="../img/temp.png">
</div>
<div class="col-xs-9 text-right">
<div class="huge">12</div>
<div>New Tasks!</div>
</div>
</div>
</div>
<a href="#">
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<img src="../img/waterdrop.png">
</div>
<div class="col-xs-9 text-right">
<div class="huge">124</div>
<div>New Orders!</div>
</div>
</div>
</div>
<a href="#">
</a>
</div>
</div>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/Chart.js"></script>
<script>
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
};
var json = getJSON('http://ift.tt/1RGeXlJ').then(function(data) {
alert(data.data[0].waterLevel);
var chartData =[];
for (var i = 0; i < data.data.length; i++){
chartData.push(data.data[i].temperature);
}
alert(chartData);
var chartData2 =[];
for (var i = 0; i < data.data.length; i++){
chartData2.push(data.data[i].waterLevel);
}
alert(chartData2);
var chartData3 =[];
for (var i = 0; i < data.data.length; i++){
chartData3.push(data.data[i].ph);
}
alert(chartData3);
var barData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: chartData
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: chartData2
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: chartData3
}
]
};
var options = {
scaleFontColor: "#0000",
datasetStrokeWidth: 5
};
var context = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(context).Line(barData,options);
$('#tab1').on('shown.bs.tab', function (e) {
myChart.destroy();
myChart = new Chart(context).Bar(barData);
});
$('#tab2').on('shown.bs.tab', function (e) {
myChart.destroy();
myChart = new Chart(context).Line(barData,);
});
result.innerText = data.data; //display the result in an HTML element
},
function(status) { //error detection....
alert('Something went wrong.');
});
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire