HighChart Sparkline Chart with dynamic data for the table

Question

I am trying to simulate the sparkline chart offered by highcharts for a project, but the js fiddle offered by highchart has a very static data for the table data. But I want to fill values dynamically for the table instead of hard coding them. I am very new to this highcharts and have been trying to find examples where I can make this highchart dynamic but haven't found many. Any information on this topic would be greatly appreciated. Please find a sample of the current jsfiddle (statically defined table data) for this sparkline chart.

<div id="result"></div>
<table id="table-sparkline">
    <thead>
        <tr>
            <th>State</th>
            <th>Income</th>
            <th>Income per quarter</th>
            <th>Costs</th>
            <th>Costs per quarter</th>
            <th>Result</th>
            <th>Result per quarter</th>
        </tr>
    </thead>
    <tbody id="tbody-sparkline">
        <tr>
            <th>Alabama</th>
            <td>254</td>
            <td data-sparkline="71, 78, 39, 66 "/>
            <td>296</td>
            <td data-sparkline="68, 52, 80, 96 "/>
            <td>-42</td>
            <td data-sparkline="3, 26, -41, -30 ; column"/>
        </tr>
        <tr>
            <th>Alaska</th>
            <td>246</td>
            <td data-sparkline="87, 44, 74, 41 "/>
            <td>181</td>
            <td data-sparkline="29, 54, 73, 25 "/>
            <td>65</td>
            <td data-sparkline="58, -10, 1, 16 ; column"/>
        </tr>
    </tbody>
</table>

I would like to get this above data dynamically within the scope of highcharts.

Thanks in advance !

EDIT CubanGuy, Thanks for your reply. I am getting the data in the form of a JSON . Below is the json format I have it in.

$(document).ready(function(){
        getReportDataTestStatus();
    });

    function getReportDataTestStatus() {
        var url ="/reports/allTenantLevelData";
        console.log("+++---",url);
        $.get(url).success(function(data){
        /* console.log("dare",data); */     
        var seriesData = [];
        var xCategories = [];
        var i, cat;         
        for(i = 0; i < data.length; i++){
             cat =  data[i].Tenants;
             if(xCategories.indexOf(cat) === -1){
                xCategories[xCategories.length] = cat;
             }
        }   

        for(i = 0; i < data.length; i++){
            if(seriesData){
              var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
              if(currSeries.length === 0){
                  seriesData[seriesData.length] = currSeries = {name: data[i].status, data: []};
              } else {
                  currSeries = currSeries[0];
              }
              var index = currSeries.data.length;
              currSeries.data[index] = parseInt(data[i].studentSizes);
            } else {
               seriesData[0] = {name: data[i].status, data: [parseInt(data[i].studentSizes)]}
            }
        }

What I am not following is how to fill the table with this data. The chart (like highchart) will have multiple columns with data and 1 column with a graph representing some data. Highchart puts the value for the data columns statically using tags. Sorry for any confusion, I am new to this forum too.

Answer 1

I need 50 reputation to make a comment (question) to your question, so I'll write it here. You have to specify how and from where your are trying to get the dynamic data (AJAX, JSON, SharePoint, etc). For example the attached code fetches the data from SharePoint using SPServices:

JS:

 $(document).ready(function () {

 var namesArray = [];
 var valuesArray = [];
 $().SPServices({
     operation: "GetListItems",
     async: false,
     listName: "Test",
     completefunc: function (xData, Status) {
         $(xData.responseXML).SPFilterNode("z:row").each(function () {
             var names = $(this).attr("ows_Names");
             var values = Math.round($(this).attr("ows_Earnings"));
            valuesArray.push([names, values]);
            });
     }
 });
 chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },


    title: {
        text: 'Total values',
        x: -20, //center
    },
    credits: {
        enabled: false
    },

    plotOptions: {
        pie: {
            allowPointSelect: true,
            showInLegend: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function () {                            
                    return '<b>' + this.point.name + '</b>: $' + this.y;
                }
            },
        }
    },

    subtitle: {
        text: 'This chart shows value from a SharePoint list using SPServices',
        x: -20
    },

    tooltip: {
        shared: true,
        pointFormat: '{series.name}: <b>{point.values}$</b>{point.y}',
        valueDecimals: 2,
        shared: true,
        useHTML: true,
    },

    exporting: {
        enabled: true,
        sourceWidth: 600,
        sourceHeight: 400,
        scale: 2
    },

     legend: {
         layout: 'vertical',
         enabled: true,
         align: 'right',
         verticalAlign: 'bottom',
         padding: 5,
         itemMarginTop: 10,
         itemMarginBottom: 5,
         itemStyle: {
             lineHeight: '14px'
         }
     },

     series: [{
         showInLegend: true,
         type: 'pie',
         name: 'Earnings',
         data: valuesArray
     }]
 });


 });

HTML:

<div id="mychart"></div>
<div id="container" style="width:100%; height:100%;position:relative"></div>