Generate chart from tables having linked data - Javascript highcharts

Javascript examples for highcharts:Chart Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Data

Description

Generate chart from tables having linked data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#chart-cont {/*from   w  ww .j av a2s . co m*/
   min-width: 310px;
   height: 400px;
   margin: 0 auto;
}
      </style> 
      <script type="text/javascript">
    window.onload=function(){
$(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) {
                // Loop over all the values from the table
                for(var i = 0; i < columns[1].length; i++) {
                    // Strip away HTML content
                    columns[1][i] = parseInt(stripHTML(columns[1][i]));
                }
            }
        },
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
    });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/data.js"></script> 
      <div id="chart-cont"></div> 
      <table id="datatable"> 
         <tbody>
            <tr> 
               <th>Colors</th> 
               <th>Values</th> 
            </tr> 
            <tr> 
               <th>Blue</th> 
               <td>
                  <a href="#">40</a> 
               </td> 
            </tr> 
            <tr> 
               <th>Black</th> 
               <td>30</td> 
            </tr> 
            <tr> 
               <th>Green</th> 
               <td>20</td> 
            </tr> 
         </tbody>
      </table>  
   </body>
</html>

Related Tutorials