CODEWITHSUNDEEP
javascriptjqueryhighcharts
Aaron
Aaron

Reputation: 545

Highcharts: Generate chart from tables having HTML tags in TD's

I am trying to generate a chart from a table that has various HTML tags, links etc in the TD's and i am trying to strip the HTML to use in the charts but keep the existing table with links etc.

This is my code:

$(function() {
    function stripHTML(html)
    {
        var tmp = document.createElement("DIV");
        tmp.innerHTML = html;
        return tmp.textContent || tmp.innerText || "";
    }

    $('#chart-cont').highcharts({
        data: {
            table: 'datatable',
            parsed: function(columns) {
                for(var i = 0; i < columns[1].length; i++)
                    columns[1][i] = parseInt(stripHTML(columns[1][i]));
            }
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
    });
});

You can see a fiddle here https://jsfiddle.net/6e2bfdk8/9/

Also think the $ in the td breaks it and i can not figure out how specify which columns to use for the chart.

Upvotes: 0

Views: 115

Answers (1)

Aleksandar Misich
Aleksandar Misich

Reputation: 487

With your "real-world" example: https://jsfiddle.net/6e2bfdk8/21/ with your test example: https://jsfiddle.net/6e2bfdk8/12/

I suggest you go back and review the documentation for highcharts if you want something more dynamic.

In general, you want to handle all your processing in each iteration safely...and thoroughly:

columns[1][i] = (parseInt(stripHTML(columns[1][i]).trim().replace('$', '')));

Note the .trim() which strips off excess whitespace and the .replace() which takes out those pesky dollar signs.

Unfortunately, this means you have a LOT of processing you have to chain together to get a catch-all function.

Play around with it until you have a reliable model to work off of for your charts.

Upvotes: 1

Related Questions