Я хочу сбросить и перестроить свою диаграмму при нажатии кнопки сброса
Я построил диаграмму, которая соответствует моим потребностям - jsfiddle
Я добавил несколько пользовательских элементов управления, чтобы позволить пользователю отображать/ скрыть все серии и проверить / снять все серии.
Все это отлично работает.
Последняя часть, которую я хочу сделать, - позволить пользователю сбросить график с исходными параметрами.
Пожалуйста, смотрите мой код.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel='stylesheet prefetch' href='https://tyleryasaka.github.io/semantic-ui-range/range.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://tyleryasaka.github.io/semantic-ui-range/range.js'></script>
<!-- #Content -->
<div id="Content">
<div class="content_wrapper clearfix">
<!-- .sections_group -->
<div class="sections_group">
<div class="entry-content" itemprop="mainContentOfPage">
<div class="section mcb-section " style="padding-top:0px; padding-bottom:0px; background-color:">
<div class="section_wrapper mcb-section-inner">
<div class="wrap mcb-wrap one valign-top clearfix" style="">
<div class="mcb-wrap-inner">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script type="text/javascript">
var vtotal=0;
var surfing=0;
var emails=0;
var social=0;
var apps=0;
var music=0;
var video=0;
var standard_definition=0;
var high_definition=0;
var fourK_video=0;
var online_games=0;
var total=0;
function myChart(flag) {
// alert('gdfgd');
var ctx = document.getElementById("myChart").getContext('2d');
/*Chart.defaults.global.legend.display = false;*/
Chart.defaults.global.animation = false;
var resetCanvas = function () {
$('#results-graph').remove(); // this is my <canvas> element
$('#chartContainer').append('<canvas id="myChart"><canvas>');
canvas = document.querySelector('#myChart'); // why use jQuery?
ctx = canvas.getContext('2d');
};
var qnt_total = Math.floor(total/10);
/*Get Hidden value*/
$("#qt_value").val(qnt_total);
$("#qt_value").trigger('keyup');
var myChart = new Chart(ctx, {
type: 'bar',
interaction: {
enabled: false
},
data: {
labels: [""],
datasets: [{
label: total +' GB',
fill: false,
data: [total],
hover: {mode: null},
backgroundColor: [
'rgb(128,177,234)'
],
borderColor: [
'rgb(128,177,234)'
],
borderWidth: 1
}]
},
options: {
scales: {
responsive: true,
legend: { display: false },
display: true,
yAxes: [{
ticks: {
beginAtZero:true,
stepValue: 20,
max: 200
},
scaleLabel: {
display: true,
labelString: 'GB'
}
}]
}
}
});
// alert(flag);
// if(flag == 'reset'){
// myChart.clear();
// }
}
function rPlan() {
if (vtotal === 0){
$('#display-8').html("Select Data Amount ");
}
else if (vtotal > 0 && vtotal < 2){
$('#display-8').html("2GB plan for $35p/month");
}
else if (vtotal > 2 && vtotal < 6){
$('#display-8').html("6GB plan for $50p/month");
}
else if (vtotal > 6 && vtotal < 10){
$('#display-8').html("10GB plan for $65p/month");
}
else if (vtotal > 10 && vtotal < 14){
alert('test');
}
else if (vtotal > 14 && vtotal < 18){
$('#display-8').html("18GB plan for $95p/month");
}
else if (vtotal > 18 ){
$('#display-8').html("22GB plan for $110p/month");
}
$("#texens").val(total);
if(total == 0)
{
$("#data_plane_1").hide();
$("#data_plane_2").hide();
$("#data_plane_3").hide();
}
else if(total > 0 && total < 10)
{
$("#data_plane_1").show();
$("#data_plane_3").hide();
$("#data_plane_2").hide();
}
else if(total > 10 && total < 20)
{
$("#data_plane_1").hide();
$("#data_plane_2").show();
$("#data_plane_3").hide();
}
else if(total > 20 && total < 2000)
{
$("#data_plane_1").hide();
$("#data_plane_2").hide();
$("#data_plane_3").show();
}
}
rPlan();
$(document).ready(function(){
// Browsing
$('#range-1').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-1').html(value);
surfing = value*0.015*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart();
}
});
// Emails
$('#range-2').range({
min: 0,
max: 600,
step: 10,
start: 0,
onChange: function(value) {
$('#display-2').html(value);
emails = value*0.005/10*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart();
}
});
// Social
$('#range-3').range({
min: 0,
max: 100,
start: 0,
step: 5,
onChange: function(value) {
$('#display-3').html(value);
social = value*0.025/5*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// Apps
$('#range-4').range({
min: 0,
max: 50,
start: 0,
step: 1,
onChange: function(value) {
$('#display-4').html(value);
apps = value*0.005*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// Music
$('#range-5').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-5').html(value);
music = value*0.12*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// Video
/* $('#range-6').range({
min: 0,
max: 24,
step: .25,
start: 0,
onChange: function(value) {
$('#display-6').html(value);
video = value*2.5*30;
total = Number(total).toFixed(2);
total= surfing+emails+social+apps+music+video;
$('#display-7').html(total);
rPlan();
myChart()
}
});*/
// Standard-definition
$('#range-7').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-9').html(value);
standard_definition = value*0.7*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// High-definition
$('#range-8').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-10').html(value);
high_definition = value*2.5*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// 4K video
$('#range-9').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-11').html(value);
fourK_video = value*5.85*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// online games
$('#range-10').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-12').html(value);
online_games = value*0.012*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
});
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
// $(function () {
// $("#dialog").dialog({
// modal: true,
// autoOpen: false,
// width: '100%',
// height: 'auto',
// open: function() {
// myChart();
// },
// draggable: false,
// dialogClass: 'calculator-modal-main'
// });
// $("#btnShow").click(function () {
// $('#dialog').dialog('open');
// });
// });
</script>
<div id="dialog" title="Estimate your monthly usage to assist you in choosing the right plan.">
<div id="main-content">
<div id="content-area" class="clearfix">
<div id="left-area" class="clearfix left-area">
<div class="ui segment">
<h3><strong>Hours browsing the web</strong></h3>
<div class="ui range" id="range-1"></div>
<div class="indicator">
<strong> <span id="display-1"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Emails sent/received with attachments</strong></h3>
<div class="ui range" id="range-2"></div>
<div class="indicator">
<strong> <span id="display-2"></span></strong> Emails/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Social media posts with photos</strong></h3>
<div class="ui range" id="range-3"></div>
<div class="indicator">
<strong> <span id="display-3"></span></strong> Posts/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Apps/games/songs downloaded</strong></h3>
<div class="ui range" id="range-4"></div>
<div class="indicator">
<strong> <span id="display-4"></span></strong> Apps/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Hours of streaming music</strong></h3>
<div class="ui range" id="range-5"></div>
<div class="indicator">
<strong> <span id="display-5"></span></strong> Hours/Day
</div>
</div>
<!-- <div class="ui segment">
<h3><strong>Hours of streaming video</strong></h3>
<div class="ui range" id="range-6"></div>
<div class="indicator">
<strong> <span id="display-6"></span></strong> Hours/Day
</div>
</div> -->
<div class="ui segment">
<h3><strong>Hours of streaming Standard-definition video</strong></h3>
<div class="ui range" id="range-7"></div>
<div class="indicator">
<strong> <span id="display-9"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Hours of streaming High-definition video</strong></h3>
<div class="ui range" id="range-8"></div>
<div class="indicator">
<strong> <span id="display-10"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Hours of streaming 4K video</strong></h3>
<div class="ui range" id="range-9"></div>
<div class="indicator">
<strong> <span id="display-11"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Online games</strong></h3>
<div class="ui range" id="range-10"></div>
<div class="indicator">
<strong> <span id="display-12"></span></strong> Hours/Day
</div>
</div>
</div>
<div id="right-area" class="right-area">
<div class="ui segment data_plan_chart">
<div id="chartContainer"><canvas id="myChart" width="200" height="300"></canvas></div>
</div>
</br>
<input type="hidden" id="texens" name="user" value="texens" />
<input type="hidden" id="qt_value" name="qt_value" value="qt_value" />
<div class="plans-block">
<label>We Recommended:</label>
<div class="products" id="data_plane_1">
<p><?php
/*$args = array( 'post_type' => 'product', 'posts_per_page' => 5, 'product_cat' => 'dataplans', 'orderby' => 'rand' );
$loop = new WP_Query( $args );*/
$product = wc_get_product('596');
echo $product->get_title();
?></p>
<!-- <a id='cal_cart_1' class='recommend-btn' href='<?php // echo site_url(); ?>/?add-to-cart=596'>Add Recommended Plan</a> -->
<a id='cal_cart_1' class='recommend-btn' href='<?php echo esc_url_raw( add_query_arg( 'add-to-cart', '596', wc_get_checkout_url() ) ); ?>'>Add Recommended Plan</a>
</div><!--/.products-->
<div class="products" id="data_plane_2">
<p><?php
/*$args = array( 'post_type' => 'product', 'posts_per_page' => 5, 'product_cat' => 'dataplans', 'orderby' => 'rand' );
$loop = new WP_Query( $args );*/
$product = wc_get_product('1740');
$product_2 = wc_get_product('596');
$product_name = $product->get_title();
$product_name_2 = $product_2->get_title();
echo $product_merge_name = $product_name_2 . ' + ' . 'Additional 10GB Data';
?></p>
<script type="text/javascript">
jQuery(function(){
//var data_cart_id = "<?php //echo site_url(); ?>/shop/?add-to-cart=596,1740";
var data_cart_id = "<?php echo esc_url_raw( add_query_arg( 'add-to-cart', '596,1740', wc_get_checkout_url() ) ); ?>";
jQuery("#cal_cart_2").attr("href",data_cart_id);
});
</script>
<a id='cal_cart_2' class='recommend-btn' href=''>Add Recommended Plan</a>
</div><!--/.products-->
<div class="products" id="data_plane_3">
<?php
$a = " <script>
jQuery(document).ready(function(){
jQuery('#qt_value').on('keyup',function(){
var qnt_value = jQuery(this).val();
$('.listprice').html(qnt_value);
});
});
</script>";
?>
<p>
<?php
$product = wc_get_product('1740');
$product_2 = wc_get_product('596');
$product_name = $product->get_title();
$product_name_2 = $product_2->get_title();
echo $product_merge_name = $product_name_2 .' + '. '<span class="listprice">' . $a . '</span>'. 'x Additional 10GB Data';
?>
</p>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#qt_value').on('keyup',function(){
var qnt_value = jQuery(this).val();
var data_cart_id_2 = "<?php echo site_url(); ?>/checkout/?add-to-cart=596:1,1740:"+qnt_value;
jQuery("#cal_cart_3").attr("href",data_cart_id_2);
});
});
/* jQuery(function(){
var bla = $('#qt_value').val();
console.log(bla);
var data_cart_id_2 = "<?php echo site_url(); ?>/shop/?add-to-cart=1740:"+bla+",596:1";
jQuery("#cal_cart_3").attr("href",data_cart_id_2);
}); */
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#reset').click(function() {
total=0;
$('#range-1').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-1').html(value);
}
});
$('#range-2').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-2').html(value);
}
});
$('#range-3').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-3').html(value);
}
});
$('#range-4').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-4').html(value);
}
});
$('#range-5').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-5').html(value);
}
});
$('#range-6').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-6').html(value);
}
});
$('#range-7').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-9').html(value);
}
});
$('#range-8').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-10').html(value);
}
});
$('#range-9').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-11').html(value);
}
});
$('#range-10').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-12').html(value);
}
});
});
});
</script>
<a id='cal_cart_3' class='recommend-btn' href=''>Add Recommended Plan</a>
<!-- ///cart/?add-to-cart=7781 -->
</div>
<input type="button" id="reset" value="Reset" />
<!-- <button id='reset' class='reset-btn'> Reset the data </button> --><!--/.products-->
</div>
</div>
<div class="text-right print-block">
<a class="print-btn" onClick="window.print()" href="javascript:void(0);">Print this page</a>
</div>
<script>
function myFunction() {
window.print();
}
</script>
<div class="usage-calculated">
<div class="usage-left">
<label>How is your usage calculated?</label>
<p>To calculate your usage, these approximations were applied:</p>
<table>
<tr>
<td width="65%"><label>Activity</label></td>
<td width="35%"><label>Approx. Data Usage</label></td>
</tr>
<tr>
<td>Hours Browsing the Web</td>
<td>15 MB/hour</td>
</tr>
<tr>
<td>Emails Sent/Received with Photos</td>
<td>500 KB/email</td>
</tr>
<tr>
<td>Social media posts with photos</td>
<td>5 MB/item</td>
</tr>
<tr>
<td>Apps/games/songs downloaded</td>
<td>5 MB/item</td>
</tr>
<tr>
<td>Hours of streaming music</td>
<td>2 MB/minute</td>
</tr>
<tr>
<td>Hours of streaming HD video</td>
<td>2.5 GB/hour</td>
</tr>
<tr>
<td>Standard-definition video</td>
<td>700 MB/hr</td>
</tr>
<tr>
<td>High-definition video</td>
<td>2500 MB/hr</td>
</tr>
<tr>
<td>4K video</td>
<td>5850 MB/hr</td>
</tr>
<tr>
<td>Online games</td>
<td>12 MB/hr</td>
</tr>
</table>
<p>
<label>1 MB = 1,024KB</label>
<label>1 GB = 1,024MB</label>
</p>
</div>
<div class="usage-right">
<p>*These are just estimates and data transfer amounts will vary. Video applications and settings along with network conditions may impact the amount of data consumed. Downloads and buffers, such as streaming music and video, will bill for the entire download. Please regularly check and manage your usage.</p>
</div>
</div>
</div>
</div>
</div>