Hello Stackoverflow I have made a chart data filter based on platform arrays and i have set if/else statements for every permutation of 3 checkboxes and when i press facebook checkbox after unchecking all of them it is no longer functional Is there something bad with my if/else logic if so why i am really interested to know a alternative for this case i think the main problem is that the checked facebook case is firing with the checked both facebook and twitter case , full code here at the end of script tag many thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> Analytics
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'
/>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/now-ui-dashboard.css?v=1.1.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/demo/demo.css" rel="stylesheet" />
</head>
<body class="">
<div class="wrapper ">
<div class="sidebar" data-color="blue">
<!--
Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
-->
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-mini">
CT
</a>
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li>
<a href="./dashboard.html">
<p>Dashboard</p>
</a>
</li>
</li>
<li>
<a class="active" href="./Analytics.html">
<p>
Analytics
</p>
</a>
</li>
<li>
<a href='./Events.html'>
<p>Events</p>
</a>
</li>
<li>
<a href='./Campaign.html'>
<p>Campaigns</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute bg-primary fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo">Icons</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="btn btn-primary btn-lg nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Filter Data </a>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<ul id="ToggleController">
<li>
<input id="Checkbox1" type="checkbox" checked="checked" />Facebook</li>
<li>
<input id="Checkbox2" type="checkbox" checked="checked" />Twitter</li>
<li>
<input id="Checkbox3" type="checkbox" checked="checked" />Website</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="panel-header panel-header-sm">
</div>
<div class="content">
<div class="row">
<div class="col-lg-4">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category"> Total Messages</h5>
<h4 class="card-title">8K</h4>
<div class="dropdown">
<button type="button" class="btn btn-round btn-default dropdown-toggle btn-simple btn-icon no-caret" data-toggle="dropdown">
<i class="now-ui-icons loader_gear"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item text-danger" href="#">Remove Data</a>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="lineChartExample"></canvas>
</div>
</div>
<div class="card-footer">
<div class="stats">
<i class="now-ui-icons arrows-1_refresh-69"></i> Just Updated
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Total Sent Messages</h5>
<h4 class="card-title">5K</h4>
<div class="dropdown">
<button type="button" class="btn btn-round btn-default dropdown-toggle btn-simple btn-icon no-caret" data-toggle="dropdown">
<i class="now-ui-icons loader_gear"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item text-danger" href="#">Remove Data</a>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="lineChartExampleWithNumbersAndGrid"></canvas>
</div>
</div>
<div class="card-footer">
<div class="stats">
<i class="now-ui-icons arrows-1_refresh-69"></i> Just Updated
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Total Recieved Messages</h5>
<h4 class="card-title">3K</h4>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="barChartSimpleGradientsNumbers"></canvas>
</div>
</div>
<div class="card-footer">
<div class="stats">
<i class="now-ui-icons ui-2_time-alarm"></i> Last 7 days
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category"> Total Message1212s</h5>
<h4 class="card-title">8K</h4>
<div class="dropdown">
<button type="button" class="btn btn-round btn-default dropdown-toggle btn-simple btn-icon no-caret" data-toggle="dropdown">
<i class="now-ui-icons loader_gear"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="lineChartExample2"></canvas>
</div>
</div>
<div class="card-footer">
<div class="stats">
<i class="now-ui-icons arrows-1_refresh-69"></i> Just Updated
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Total Sent Messages</h5>
<h4 class="card-title">5K</h4>
<div class="dropdown">
<button type="button" class="btn btn-round btn-default dropdown-toggle btn-simple btn-icon no-caret" data-toggle="dropdown">
<i class="now-ui-icons loader_gear"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item text-danger" href="#">Remove Data</a>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="lineChartExampleWithNumbersAndGrid1"></canvas>
</div>
</div>
<div class="card-footer">
<div class="stats">
<i class="now-ui-icons arrows-1_refresh-69"></i> Just Updated
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Total Recieved Messages</h5>
<h4 class="card-title">24 Hours Performance</h4>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="lineChartExample1"></canvas>
</div>
</div>
<div class="card-footer">
<div class="stats">
<i class="now-ui-icons ui-2_time-alarm"></i> Last 7 days
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav>
<ul>
<li>
</li>
<li>
<a href="http://presentation.creative-tim.com">
About Us
</a>
</li>
<li>
<a href="http://blog.creative-tim.com">
Blog
</a>
</li>
</ul>
</nav>
<div class="copyright">
©
<script>
document.write(new Date().getFullYear())
</script>, Designed by
<a href="https://www.invisionapp.com" target="_blank">Invision</a>. Coded by
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
</div>
</div>
</footer>
</div>
</div>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/now-ui-dashboard.min.js?v=1.1.0" type="text/javascript"></script>
<script src="../assets/demo/anademo.js"></script>
<script>
$(document).ready(function () {
// Javascript method's body can be found in assets/js/demos.js
demo.initDashboardPageCharts();
});
var Cdata = []
var Tdata = [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 30]
var Fdata = [300, 400, 300, 200, 100, 200, 300, 500, 1000, 900, 1200, 1400]
var Wdata = [200, 300, 100, 100, 50, 200, 300, 500, 100, 900, 900, 100]
var dt = [];
function change1() {
for (var i = 0; i < Tdata.length; i++) {
Cdata.push(Tdata[i] + Wdata[i] + Fdata[i]);
}
}
change1()
$("input[type=checkbox]").change(function () {
if (!$('#Checkbox1').is(':checked')) {
change2()
}
if (!$('#Checkbox2').is(':checked')) {
change3()
}
if (!$('#Checkbox3').is(':checked')) {
change4()
}
if (!$('#Checkbox1').is(':checked') && !$('#Checkbox2').is(':checked')) {
change5()
}
if (!$('#Checkbox1').is(':checked') && !$('#Checkbox2').is(':checked')) {
change5()
}
if (!$('#Checkbox2').is(':checked') && !$('#Checkbox3').is(':checked')) {
change6()
}
if (!$('#Checkbox1').is(':checked') && !$('#Checkbox3').is(':checked')) {
change7()
}
if (!$('#Checkbox1').is(':checked') && !$('#Checkbox2').is(':checked') && !$('#Checkbox3').is(':checked')) {
change0()
}
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked') && $('#Checkbox3').is(':checked')) {
change()
}
});
function change2() {
var dt = Fdata
change(dt)
}
function change3() {
var dt = Tdata
change(dt)
}
function change4() {
var dt = Wdata
change(dt)
}
function change5() {
var dt = []
for (var i = 0; i < Tdata.length; i++) {
dt.push(Tdata[i] + Fdata[i]);
}
change(dt)
}
function change6() {
var dt = []
for (var i = 0; i < Tdata.length; i++) {
dt.push(Tdata[i] + Wdata[i]);
}
change(dt)
}
function change7() {
var dt = []
for (var i = 0; i < Tdata.length; i++) {
dt.push(Fdata[i] + Wdata[i]);
}
change(dt)
}
change0 = () => {
var dt = []
for (var i = 0; i < Tdata.length; i++) {
dt.push(Tdata[i] + Fdata[i] + Wdata[i]);
}
change(dt)
}
change = (dt) => {
var Cdata = []
var Cdata2 = []
for (var i = 0; i < Tdata.length; i++) {
Cdata.push(Tdata[i] + Wdata[i] + Fdata[i] - dt[i]);
}
for (var i = 0; i < Tdata.length; i++) {
Cdata2.push(Tdata[i] + Wdata[i] + Fdata[i] - dt[i]);
}
var cardStatsMiniLineColor = "#fff",
cardStatsMiniDotColor = "#fff";
ctx = document.getElementById('lineChartExample').getContext("2d");
gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#80b6f4');
gradientStroke.addColorStop(1, chartColor);
gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill.addColorStop(1, "rgba(249, 99, 59, 0.40)");
myChart = new Chart(ctx, {
type: 'line',
responsive: true,
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Active Users",
borderColor: "#f96332",
pointBorderColor: "#FFF",
pointBackgroundColor: "#f96332",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: Cdata
}]
},
options: gradientChartOptionsConfiguration
});
ctx = document.getElementById('lineChartExampleWithNumbersAndGrid').getContext("2d");
gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#18ce0f');
gradientStroke.addColorStop(1, chartColor);
gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill.addColorStop(1, hexToRGB('#18ce0f', 0.4));
myChart = new Chart(ctx, {
type: 'line',
responsive: true,
data: {
labels: ["12pm,", "3pm", "6pm", "9pm", "12am", "3am", "6am", "9am"],
datasets: [{
label: " Stats",
borderColor: "#18ce0f",
pointBorderColor: "#FFF",
pointBackgroundColor: "#18ce0f",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: Cdata2
}]
},
options: gradientChartOptionsConfigurationWithNumbersAndGrid
});
}
//------------------------------------------------------------------------
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire