How to convert string array to ints to use with Highcharts

Question

HightCharts only accepts an array of integers. I want to convert arrVal array values from strings to ints. How can I do that?

$(document).ready(function(e) {
  $("#btn").on("click", function() {
    var arrVal = $("#selectVal").val(); // I try replace('"','')
    console.log(arrVal);
    
    Highcharts.chart('container', {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Monthly Report Test'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Test'
        }
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true
          },
          enableMouseTracking: false
        }
      },
      series: [{
        name: 'Zaid Test',
        data: [arrVal] //Only accept int with comma sperated values. # 1,15,17,19,2,1,21,54
      }]
    });
  });
});

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

<form id="myform" method="post">
  <select id="selectVal" name="selectVal[]" multiple="multiple">
    	<option value="2">2</option>
    	<option value="22">22</option>
    	<option value="65">65</option>
    	<option value="54">54</option>
    	<option value="32">32</option>
    	<option value="87">87</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
    	<option value="60">60</option>
    </select>
  <input type="button" id="btn" value="submit" name="s">
</form>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Rory McCrossan · Accepted Answer · 2017-06-14 07:13:50Z

2

The issue is because the array holds string values whereas Highcharts expects the values to be integers. To convert the values, you can use map(), like this:

var arrVal = $("#selectVal").val().map(v => parseInt(v, 10));

$(document).ready(function(e) {
  $("#btn").on("click", function() {
    var arrVal = $("#selectVal").val().map(v => parseInt(v, 10));
    console.log(arrVal);
    
    Highcharts.chart('container', {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Monthly Report Test'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Test'
        }
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true
          },
          enableMouseTracking: false
        }
      },
      series: [{
        name: 'Zaid Test',
        data: arrVal //Only accept int with comma sperated values. # 1,15,17,19,2,1,21,54
      }]
    });

  });
});

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

<form id="myform" method="post">
  <select id="selectVal" name="selectVal[]" multiple="multiple">
    	<option value="2">2</option>
    	<option value="22">22</option>
    	<option value="65">65</option>
    	<option value="54">54</option>
    	<option value="32">32</option>
    	<option value="87">87</option>
    	<option value="9">9</option>
    	<option value="10">10</option>
    	<option value="60">60</option>
    </select>
  <input type="button" id="btn" value="submit" name="s">
</form>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

answered Jun 14, 2017 at 7:13

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zaid Bin Khalid Over a year ago

What is meant by 10 in parseInt?

Rory McCrossan Over a year ago

That's the radix: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

How to convert string array to ints to use with Highcharts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related