HighChart : generate onclick() by for loop to addSeries

Question

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 executeds are just a checker which only allow user execute the function once.

Answer 1

The biggest problem I found with your code is that you didn't have a way of unifying related bits of data and code. You will now find them under the persons map

HTML

<input class='test test0' type=button value='person1'>
<input class='test test1' type=button value='person2'>
<input class='test test2' type=button value='person3'>

JS

$(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]
    }]
  });

  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];
  var chart = $('#KeywordTrend').highcharts();
  var persons = {
    person1: {
      name: 'john',
      executed: false,
    },
    person2: {
      name: 'mary',
      executed: false,
    },
    person3: {
      name: 'july',
      executed: false,
    }
  }

  $(".test").click(function(event) {
    var person = persons[event.target.value]
    if (!test.executed) {
      chart.addSeries({
        name: person.name,
        data: data
      });
      person.executed = true;
    }
  });
});

Answer 2

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>

Answer 3

You can do that, here I just attached the click handler to the query for all of the elements.

$('.clickMe').click(function(event) {
  alert(event.target.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' class='clickMe' value='give'>
<input type='button' class='clickMe' value='me'>
<input type='button' class='clickMe' value='text'>