CODEWITHSUNDEEP
javascriptjquerychartshighcharts
saeed mojtabaei
saeed mojtabaei

Reputation: 11

Select row display to chart

Display datatable selected in the chart

(When we click on the check box, the data of the selected row of the table will be displayed in the chart), (The graph page must be empty at the beginning of loading),

To put it more clearly and simply, when I click on each checkbox, it graphs the data in it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link
      href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css"
      rel="stylesheet"
    />
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
  
    <title>Document</title>
  </head>
  <body>
    <table
      id="table"
      cellpadding="0"
      cellspacing="0"
      data-toggle="table"
      data-filter-control="true"
      data-checkbox-header="false"
      data-click-to-select="true">
      <thead>
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="id" data-filter-control="input">Id</th>
          <th data-field="sum" data-filter-control="input">Sum</th>
          <th data-field="Avg" data-filter-control="input">Avg</th>
          <th data-field="Max" data-filter-control="input">Max</th>
          <th data-field="Min" data-filter-control="input">Min</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <th>001</th>
          <td>60.3</td>
          <td>47.5</td>
          <td>23.8</td>
          <td>36.5</td>
        </tr>
        <tr>
          <td></td>
          <th>002</th>
          <td>20.3</td>
          <td>47.5</td>
          <td>13.9</td>
          <td>25.3</td>
        </tr>
        <tr>
          <td></td>
          <th>003</th>
          <td>50.6</td>
          <td>70.2</td>
          <td>65.9</td>
          <td>45.3</td>
        </tr>
        <tr>
          <td></td>
          <th>004</th>
          <td>20.1</td>
          <td>55.9</td>
          <td>86.4</td>
          <td>75.6</td>
        </tr>
        <tr>
          <td></td>
          <th>005</th>
          <td>33.1</td>
          <td>25.9</td>
          <td>46.4</td>
          <td>10.6</td>
        </tr>
      </tbody>
    </table>

    <figure class="highcharts-figure">
      <div id="container"></div>
    </figure>

    <script>
      Highcharts.chart("container", {
        data: {
          table: "table",
        },
        chart: {
          type: "column",
        },
        title: {
          text: "Data extracted from a HTML table in the page",
        },
        yAxis: {
          allowDecimals: false,
          title: {
            text: "Units",
          },
        },
        tooltip: {
          formatter: function () {
            return (
              "<b>" +
              this.series.name +
              "</b><br/>" +
              this.point.y +
              " " +
              this.point.name.toLowerCase()
            );
          },
        },
      });
    </script>
  </body>
</html>

Upvotes: 1

Views: 206

Answers (1)

Patrick Hume
Patrick Hume

Reputation: 2214

Hi is this what you were after:

https://jsfiddle.net/PatrickHume/1Lthsjfk/

// For demo purpose only, the Highcharts is throwing warnings !!!
console.warn = () => {};
//

let chart = null;
let Data = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
]
let Id = 0;
$(function() {
  chart = Highcharts.chart("container", {
    data: {
      table: "table",
    },
    chart: {
      type: "column",
    },
    title: {
      text: "Data extracted from a HTML table in the page",
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Units",
      },
    },
    tooltip: {
      formatter: function() {
        return (
          "<b>" +
          this.series.name +
          "</b><br/>" +
          this.point.y +
          " " +
          this.point.name.toLowerCase()
        );
      },
    },
  });
  $('#table').on('post-body.bs.table', function() {
    $("input:checkbox").each(function() {
      $(this).unbind().off().undelegate().on("click", function(event) {
        event.stopPropagation();
        GetTableData($(this).closest("tr"), $(this).is(':checked'))
      });
    })
  })

  chart.series[0].update({
    data: [0, 0, 0, 0, 0]
  })
  chart.series[1].update({
    data: [0, 0, 0, 0, 0]
  })
  chart.series[2].update({
    data: [0, 0, 0, 0, 0]
  })
  chart.series[3].update({
    data: [0, 0, 0, 0, 0]
  })
  chart.series[4].update({
    data: [0, 0, 0, 0, 0]
  })
})


function GetTableData(item, ischecked) {
  Id = parseFloat(item.find('td:eq(1)').text())
  //console.log(Id)
  Data[Id - 1][0] = parseFloat(item.find('td:eq(1)').text())
  Data[Id - 1][1] = parseFloat(item.find('td:eq(2)').text())
  Data[Id - 1][2] = parseFloat(item.find('td:eq(3)').text())
  Data[Id - 1][3] = parseFloat(item.find('td:eq(4)').text())
  Data[Id - 1][4] = parseFloat(item.find('td:eq(5)').text())
  // console.log(Data[Id - 1][0], Data[Id - 1][1],
  //   Data[Id - 1][2], Data[Id - 1][3], Data[Id - 1][4])
  chart.series[0].update({
    data: [Data[0][0], Data[1][0], Data[2][0], Data[3][0], Data[4][0]]
  })
  chart.series[1].update({
    data: [Data[0][1], Data[1][1], Data[2][1], Data[3][1], Data[4][1]]
  })
  chart.series[2].update({
    data: [Data[0][2], Data[1][2], Data[2][2], Data[3][2], Data[4][2]]
  })
  chart.series[3].update({
    data: [Data[0][3], Data[1][3], Data[2][3], Data[3][3], Data[4][3]]
  })
  chart.series[4].update({
    data: [Data[0][4], Data[1][4], Data[2][4], Data[3][4], Data[4][4]]
  })
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/accessibility.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet" />
  <!-- <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

  <title>Document</title>
</head>

<body>
  <table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-filter-control="true" data-checkbox-header="false" data-click-to-select="true">
    <thead>
      <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-filter-control="input">Id</th>
        <th data-field="sum" data-filter-control="input">Sum</th>
        <th data-field="Avg" data-filter-control="input">Avg</th>
        <th data-field="Max" data-filter-control="input">Max</th>
        <th data-field="Min" data-filter-control="input">Min</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <th>001</th>
        <td>60.3</td>
        <td>47.5</td>
        <td>23.8</td>
        <td>36.5</td>
      </tr>
      <tr>
        <td></td>
        <th>002</th>
        <td>20.3</td>
        <td>47.5</td>
        <td>13.9</td>
        <td>25.3</td>
      </tr>
      <tr>
        <td></td>
        <th>003</th>
        <td>50.6</td>
        <td>70.2</td>
        <td>65.9</td>
        <td>45.3</td>
      </tr>
      <tr>
        <td></td>
        <th>004</th>
        <td>20.1</td>
        <td>55.9</td>
        <td>86.4</td>
        <td>75.6</td>
      </tr>
      <tr>
        <td></td>
        <th>005</th>
        <td>33.1</td>
        <td>25.9</td>
        <td>46.4</td>
        <td>10.6</td>
      </tr>
    </tbody>
  </table>

  <figure class="highcharts-figure">
    <div id="container"></div>
  </figure>

</body>

</html>

I hope this helps

Upvotes: 1

Related Questions