JSFiddle - React, Tailwind, and code Playground

by Anri Lafosel

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="hc13" style="width: 100%; "></div>
<table border="1">
  <tr>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_0" value="1" checked>Zinātņu nozare 1
    </td>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_1" value="1" checked>Zinātņu nozare 2
    </td>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_2" value="1" checked>Zinātņu nozare 3
    </td>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_3" value="1" checked>Zinātņu nozare 4
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_4" value="1" checked>Zinātņu nozare 5
    </td>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_5" value="1" checked>Zinātņu nozare 6
    </td>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_6" value="1" checked>Zinātņu nozare 7
    </td>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_7" value="1" checked>Zinātņu nozare 8
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; ">
      <input type="checkbox" name="p_norekinu" id="cb_hc13_8" value="1" checked>Zinātņu nozare 9
    </td>
    <td></td>
  </tr>
</table>

JavaScript

$(function() {
  var toggler_hc13 = [];
  var categories_hc13 = ["Zinātņu nozare 1", "Zinātņu nozare 2", "Zinātņu nozare 3", "Zinātņu nozare 4", "Zinātņu nozare 5", "Zinātņu nozare 6", "Zinātņu nozare 7", "Zinātņu nozare 8", "Zinātņu nozare 9"];
  var series_hc13 = [{
    color: "#3C628F",
    name: 'Sērija 1',
    data: [60, 70, 100, 70, 100, 70, 100, 100, 90]
  }, {
    color: "#4672A8",
    name: 'Sērija 2',
    data: [80, 70, 80, 80, 90, 90, 70, 60, 90]
  }];
  for (i = 0; i < series_hc13[0].data.length; i++) {
    if (i > (10 - 1))
      toggler_hc13.push(0);
    else
      toggler_hc13.push(1);
  }
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'hc13',
      type: 'column'
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Salīdzinošie rādītāji par projektu darbības raksturu'
    },
    xAxis: {
      categories: JSON.parse(JSON.stringify(categories_hc13)),
      crosshair: true,
      title: {
        text: 'Zinātņu nozares/ apakšnozares'
      },
      labels: {
        enabled: true
      }
    },
    yAxis: {
      tickInterval: 50,
      min: 0,
      max: 250,
      title: {
        text: 'Skaits'
      },
      stackLabels: {
        enabled: false
      }
    },
    legend: {
      enabled: true
    },
    tooltip: {
      headerFormat: '<b>{point.x}</b><br/>',
      pointFormat: '{series.name}: {point.y}<br/>Kopā: {point.stackTotal}'
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      },
      dataLabels: {
        enabled: true
      }
    },
    series: JSON.parse(JSON.stringify(series_hc13))
  });

  function RefreshData_hc13(p_type) {
    //window.alert("RD1");              
    var chart = $("#hc13").highcharts();
    //1.solis - kategorijas               
    var newCategories = [];
    for (i = 0; i < toggler_hc13.length; i++) {
      if (toggler_hc13[i] === 1)
        newCategories.push(categories_hc13[i]);
    }
    //2.solis - dati
   ...