Click button to create chart - Javascript highcharts

Javascript examples for highcharts:Chart Creation

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Creation

Description

Click button to create chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from   ww w.j  a  v  a 2s .  c  o m
var array1 = new Array();
$(document).ready(function() {
  $('#bt').click(function() {
    ResultadoDimensionalByDate();
  });
});
function chart(arreglo) {
console.log(arreglo);
  $('#Grafica').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Inspeccion Dimensional'
    },
    xAxis: {
      categories: ['Pieza 1', 'Pieza 2', 'Pieza 3', 'Pieza 4', 'Pieza 5']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Resultados'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
      name: 'Thickness',
      data: arreglo.map(function (value) {
         return Number(value);
      })
    }, {
      name: 'Width',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Length',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Diameter',
      data: [3, 4, 4, 2, 5]
    }]
  });
}
function ResultadoDimensionalByDate() {
  var fecha = $('#fecha').val();
  var t = "1, 2, 3 ,4 ,5 ,6 ,7 ,8 ,9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20";
  var split;
  var datos = t.split(",");
  //Thickness
  for (var i = 0; i < datos.length; i++) {
    array1.push(datos[i]);
    i++;
    i++;
    i++;
  }
  //Width
  for (var w = 0; w < datos.length; w++) {
    w++;
    //array2.push(datos[w]);
    w++;
    w++;
  }
  chart(array1);
}
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <button id="bt"> Click to create chart </button> 
      <div id="Grafica"> 
      </div>  
   </body>
</html>

Related Tutorials