anson920520 anson920520 - 6 months ago 92
Javascript Question

HighChart : generate onclick() by for loop to addSeries

For example i have a chart like this:

$(function () {
$('#KeywordTrend').highcharts({
chart:{
width:500
},
title: {
text: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name:'kit',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});


And i have created three buttons in order to allow the user to add the desire data into the chart like below

var name = ['john','mary','july'];

var executed = false;
var executed2 = false;
var executed3 = false;

$(".test0").click(function(){
console.log(executed);
if (!executed) {
var chart = $('#KeywordTrend').highcharts();
var data = [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];
chart.addSeries({
name: name[0],
data: data
});
}
executed = true;
console.log(executed);
});


$(".test1").click(function(){
console.log(executed2);
if (!executed2) {
var chart2 = $('#KeywordTrend').highcharts();
chart2.addSeries({
name:name[1],
data: [194.1, 35.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]

})
executed2 = true;
console.log(executed2);
}
});

$(".test2").click(function(){
console.log(executed3);
if (!executed3) {
var chart3 = $('#KeywordTrend').highcharts();
chart3.addSeries({
name:name[2],
data: [194.1, 85.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]

})
executed3 = true;
console.log(executed3);
}
});


The above's
click()
is just duplicate and not good when it come to maintenance therefore i'd like to ask if there's a way to put these
click()
in a for loop.

The
var executed
s are just a checker which only allow user execute the function once.

Answer

Please take a look at below approach. Here I have removed the use of boolean flags executed, executed2 and executed3 as those will kind of tricky to use in a generic logic. Instead of that I am using $.data() technique to store the information about whether that particular button got previously clicked or not. Hope this will help you:

var name = ['john', 'mary', 'july'];

var data_array = [];

data_array[0] = [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];
data_array[1] = [194.1, 35.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];
data_array[2] = [194.1, 85.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4];



$(function() {
  $('#KeywordTrend').highcharts({
    chart: {
      width: 500
    },
    title: {
      text: false
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      name: 'kit',
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  });


  $("[class^='test'").click(function() {
    var current_id = $(this).attr("class");
    var number = current_id.replace("test", "");
   
    var isExecuted = $(this).data("executed");

    console.log(isExecuted);
    if (!isExecuted) {
      var chart = $('#KeywordTrend').highcharts();
      var data = data_array[number]
      chart.addSeries({
        name: name[number],
        data: data
      });
    }
    $(this).data("executed", true);
    console.log($(this).data("executed"));
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="KeywordTrend"></div>

<button class="test0">button 1</button>
<button class="test1">button 2</button>
<button class="test2">button 3</button>