Home/ Questions/Q 9228765
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:24:23+00:00

I am displaying data from html table to pie chart (HighChart). I want to

  • 0

I am displaying data from html table to pie chart (HighChart).
I want to display text which are between <th>..</th> tag of table tag.
But instead of text .. it displays slice … slice .. slice everywhere wherever is partition.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pie Charts</title>
    <script src="js/jquery-migrate-1.0.0.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script>
        $(function () 
        {
            // On document ready, call visualize on the datatable.
            $(document).ready(function () 
            {
                /**
                * Visualize an HTML table using Highcharts. The top (horizontal) header
                * is used for series names, and the left (vertical) header is used
                * for category names. This function is based on jQuery.
                * @param {Object} table The reference to the HTML table to visualize
                * @param {Object} options Highcharts options
                */
                Highcharts.visualize = function (table, options) 
                {
                    // the categories
                    options.xAxis.categories = [];
                    $('tbody th', table).each(function (i) 
                    {
                        options.xAxis.categories.push(this.innerHTML);
                    });

                    // the data series
                    options.series = [];
                    $('tr', table).each(function (i) 
                    {
                        var tr = this;
                        $('th, td', tr).each(function (j) 
                        {
                            if (j > 0) { // skip first column
                                if (i == 0) 
                                { // get the name and init the series
                                    options.series[j - 1] = 
                                    {
                                        name: this.innerHTML,
                                        data: []
                                    };
                                }
                                else 
                                { // add values
                                    options.series[j - 1].data.push(parseFloat(this.innerHTML));
                                }
                            }
                        });
                    });

                    var chart = new Highcharts.Chart(options);
                }

                var table = document.getElementById('datatable'),
        options = {
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            title: {
                text: 'Data extracted from a HTML table in the page'
            },
            xAxis: {
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        tooltip: 
       {
            formatter: function() 
           {
               return '<b>'+ this.series.name +'</b><br/>'+
                  this.y +' '+ this.point.name;
            }
       },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                    }
                }
            }
        }
    };

                Highcharts.visualize(table, options);
            });

        });

    </script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

<table id="datatable" border=1>
    <thead>
        <tr>
            <th>Fruits</th>
            <th>Qty</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>3</td>

        </tr>
        <tr>
            <th>Pears</th>
            <td>2</td>

        </tr>
        <tr>
            <th>Plums</th>
            <td>5</td>

        </tr>
        <tr>
            <th>Bananas</th>
            <td>1</td>

        </tr>
        <tr>
            <th>Oranges</th>
            <td>2</td>

        </tr>
    </tbody>
</table>
</body>
</html>

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should not give the slices name through xAxis’ categories field. Slice names should be included in the data object. Try this:

    sliceNames = [];
$('tbody th', table).each(function (i) 
{
    sliceNames.push(this.innerHTML);
});

options.series[j - 1].data.push({name: sliceNames[i - 1], y: parseFloat(this.innerHTML)});

    You don’t need categories object at all, just populate the slices name into any array variable and use that while pushing data.

    • 0