Use jqplot on multiple datasets

I finally completed the jqplot pontoon functionality using data from an HTML table.

However, now I need to use this with many datasets to generate graphs on different pages.

I would like to do this with a variable to point to the file that contains the table and the id for that table. However, at present I can only reuse the encoding by copying and repeating it for every graph I need. These are very time consuming and not ideal, especially since I will probably need to make changes to them at some point. with over 100 graphs, it would be much better to only make one bit of code changes.

$("#TableID").load( "tablefile.html #myTable tr:nth-child(4)", function() {
var tableVariable = '#TableID';

var GetData1 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(1)').text());
var GetData2 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(2)').text());
var GetData3 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(3)').text());
var GetData4 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(4)').text());
var GetData5 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(5)').text());
var GetData6 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(5)').text());
var GetData7 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(4)').text());
var GetData8 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(3)').text());
var GetData9 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(2)').text());
var GetData10 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(1)').text());

var PieChartS1 = [ ['first', 1], ['second', 2], ['third', 3], ['fourth', 4], ['fifth', 5] ];
var PieChartS2 = [['Tenth', 10], ['ninth', 9], ['eight', 8], ['seventh', 7], ['sixth', 6]];
var PieChartS3 = [['Tenth', GetData10], ['ninth', GetData9], ['eight', GetData8], ['seventh', GetData7], ['sixth', GetData6]];
var PieChartS4 = [ ['first', GetData1], ['second', GetData2], ['third', GetData3], ['fourth', GetData4], ['fifth', GetData5] ];


var PieChartPlot = $.jqplot('PieChart', [PieChartS1, PieChartS2], {
 seriesDefaults: {
    renderer:$.jqplot.DonutRenderer,
    rendererOptions:{
    sliceMargin: 1,
    startAngle: -145,
    showDataLabels: true,
    dataLabels: 'label',
    padding: '5',
    ringMargin: '5',
    dataLabelThreshold: '1',
    highlightMouseOver: true,
  }   
},
grid: {background: 'transparent', borderWidth: '0', cursor: 'pointer',},

});
 });

      

        
        
        
      

    

I've developed a jsfiddle to show how it works.

http://jsfiddle.net/6x82om3x/10/

This code is wrapped in a jquery.load () function that loads the right table row from a file to the page with the specified div id, then the data is called from that. I left this for simplicity in the JS script. I know I don't need a second tr call with a normal td call, but for an example jsfiddle.

I need to be able to just change the file invocation and then the table id for each graph, without affecting any of the others, as they can also be on the same page in some situations.

Couldn't manage to implement this so any helpful advice would be appreciated

thank

Richard

Just made a try. I think it will be something in this direction. Jsfiddle.net/6x82om3x/12