Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="chartchtEmpWageCompOcc" style="width:900px; height: 800px; margin: 0 auto"></div>

<table id="tblEmpWageCompOcc" class="table table-condensed table-hover table-striped tablesorter-datatable" cellpadding="4" cellspacing="1" summary="Esta Tabla Contiene Clasificación, Ocupación, Mediano, y *Relacionados Por"><thead><tr class="tablesorter-headerRow">
							<th id="thRank" data-column="0" class="header" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner">Clasificación</div></th>
							<th id="thRelatedOnettitle" class="analyzerTextLeft header" data-column="1" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner">Ocupación</div></th>
							<th id="thmedian" class="analyzerTextRight header" data-column="2" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner">Mediano</div></th>
							<th id="thRelatedSource" class="analyzerTextRight header" data-column="3" tabindex="0" unselectable="on" style="user-select: none;"><div class="tablesorter-header-inner">*Relacionados Por</div></th>
						</tr>
						</thead><tbody><tr>
							<td id="tdRank" style="width:10%;text-align:center">1<input name="ctl00$Main_content$ucSectionEmpWageCompOcc$ucSectionTable$lvTable$ctrl0$hdnSortValueRankNum" type="hidden" id="hdnSortValueRankNum" runat="server" value="1"></td>
							<td id="tdRelatedOnettitle"><a href="javascript:void();" onclick="javascript:selectParameters(this, 'hdnarea=4701000000|hdnoccupation=15201100'); return false;">Actuarios</a><img id="imgDemandRank" title="More stars means greater demand. Rankings are based on Tennessee’s future job demand, wage level and current job posting data. Ranking is set by occupation and geographic area."...

JavaScript

$(document).ready(function () {
    window.assetChartchtEmpWageCompOcc = function () {
        var charts = [],
            options = {},
            labelFontStyle;

        Highcharts.visualize = function (table, options) {
            var longestCatLen = 0;
            var theTable = table.clone();
             $('tr', theTable).find('td:eq(' + 0 + '),th:eq(' + 0 + ')').remove();

            $('tr', theTable).each(function (l) {
                if (l === 1) {
                    var tr = this;
                    var indexIteration = 0;
                    $('td', tr).each(function (m) {
                        if (m > 0) {
                         var theStyle = this.style.cssText;
                         if ((theStyle.indexOf('display: none;') != -1) ||(theStyle.indexOf('display:none;') != -1))  {
                             var indexRemove = m - indexIteration;
                             $('tr', theTable).find('td:eq(' + indexRemove + '),th:eq(' + indexRemove + ')').remove();
                             indexIteration = indexIteration + 1;
                         }
                        }
                });
               }
             });

            //Build categories
            $('tr', theTable).each(function (i) {
                var tr = this;
                var dataCategory;
                var val;
                if (i > 0) {
                    $('th, td', tr).each(function (j) {
                        if (j === 0) {
                            var spans = this.querySelectorAll("*[style]");
                            for (b = 0; b < spans.length; b++) {
                             if (spans[b].style.cssText == 'display: none;') {
                                 spans[b].parentElement.removeChild(spans[b]);
                             }
                            }
                            var catValue = this.innerText;
                            if (catValue.indexOf('<strong') != -1) {
                               ...