Miguel Flores Miguel Flores - 1 month ago 6
Javascript Question

How to put data in one column

I'm using

Highcharts.js
plugin and everything it's fine, but what I want to show is for example this data:


1, 5, 10, 20


The problem here is that every value it's displayed in one column and what I want is to display all the values in one column, so my question is what can I do to show my chart like I want? Here is my current code:



$(document).ready(function() {
$('#xd').click(function() {
draw();
});
});

function draw() {
var myArray = [];
myArray = [1, 5, 10, 11, 8];

$('#grafic').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Sampled Parts'
},
xAxis: {
categories: ['Data'],
labels: {
rotation: -33,
}
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Resultados'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},

legend: {
reversed: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'My Data',
data: myArray
}]
});
}

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






<div id="grafic">
</div>

<button id="xd">Click</button>





If you see my code I have 5 columns and what I want is to have all the values in only one column but to be honest I don't have any idea of what can I do.

Codepen code

Answer

If you want to stack the values, then you need to create multiple series (each with only one value in it, I guess). Change it from this:

var myArray = [];
myArray = [1, 5, 10, 11, 8];

to this:

series: [{
      name: 'mydata',
      data: [1]
    }, {
      name: 'mydata2',
      data: [5]
    }, {
      name: 'mydata3',
      data: [10]
    }, {
      name: 'mydata4',
      data: [11]
    }, {
      name: 'mydata5',
      data: [8]
    }]

See running sample below:

$(document).ready(function() {
  $('#xd').click(function() {
    draw();
  });
});

function draw() {
  $('#grafic').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Sampled Parts'
    },
    xAxis: {
      categories: ['Data'],
      labels: {
        rotation: -33,
      }
    },
    yAxis: {
      allowDecimals: true,
      min: 0,
      title: {
        text: 'Resultados'
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br/>' +
          this.series.name + ': ' + this.y + '<br/>' +
          'Total: ' + this.point.stackTotal;
      }
    },

    legend: {
      reversed: true
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    //  var myArray = [];
    //  myArray = [1, 5, 10, 11, 8];

    series: [{
      name: 'mydata',
      data: [1]
    }, {
      name: 'mydata2',
      data: [5]
    }, {
      name: 'mydata3',
      data: [10]
    }, {
      name: 'mydata4',
      data: [11]
    }, {
      name: 'mydata5',
      data: [8]
    }]
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="grafic">
</div>

<button id="xd">Click</button>