SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jQplot - having trouble adding another column to the graph

    Hi folks,

    Hopefully someone can answer this one for me. I am trying to modify some jscript to include a second column of data that has been added to the table for a graph. The trouble is I cannot get it to display the new column in the data

    Here is the js:

    Code JavaScript:
    function buildGraph (table) {
      // Build Graph
      var graphData = [];
      var gType = '';
      var chartDiv = table.prev('.chart-container').attr('id');
      $('tr', table).each(function(i) {
        if(i > 0){
          var tableData = [$(this).children('td').eq(0).text(),parseInt($(this).children('td').eq(1).text().replace(/,/g, ''))];
          graphData.push(tableData);
        }
      });
      // check which type of Graph to draw
      if('%asset_metadata_graphType%' == 'line') {
        gType = $.jqplot.LineRenderer;
      }
      else if('%asset_metadata_graphType%' == 'bar') {
        gType = $.jqplot.BarRenderer;
      }
     
     
    //$.jqplot('target', data, options)
      $.jqplot(chartDiv, [graphData], {
    //title: '%asset_metadata_graphTitle%',
        series:[{
            renderer:gType, 
            rendererOptions: {
               barWidth: 30,
               highlightMouseOver: true
            },
    	pointLabels: { show: true },
     
        }],
        seriesColors: ['#2166ac','#666666'],
    	seriesDefaults: {
              pointLabels: { show: true },
              renderer: $.jqplot.BarRenderer,
        },
     
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                fontSize: '8pt'
            }
        },
        axes: {
         xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer, 
    		rendererOptions:{sortMergedLabels:true},		
            label:$('th', table).eq(0).text(),
            labelOptions: {
           }
          },
     
         yaxis: {
            label:$('th', table).eq(1).text(),
            labelOptions: {
            }
          }
        }
      });

    and here is the table data. The 'Actual' column data displays fine in the graph. The 'Forecast' column is the new data.

    Code HTML4Strict:
    <table id="barchart-table" class="graph-data" summary="Commodity Import Totals" border="1" height="85" width="280">
      <thead>
        <tr>
          <th id="_td0_0"> Month </th>
          <th id="_td0_1"> Actual </th>
          <th id="_td0_2"> Forecast </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="_td1_0" align="center"> July </td>
          <td headers="_td0_1 _td1_0" id="_td1_1" align="center"> 963240 </td>
          <td headers="_td0_2 _td2_0" id="_td1_2" align="center"> 1999000 </td>
        </tr>
        <tr>
          <td id="_td2_0" align="center"> August </td>
          <td headers="_td0_1 _td2_0" id="_td2_1" align="center"> 1158807 </td>
          <td headers="_td0_2 _td2_0" id="_td2_2" align="center"> 2000500 </td>
        </tr>
        <tr>
          <td id="_td3_0" align="center"> September </td>
          <td headers="_td0_1 _td3_0" id="_td3_1" align="center"> 1069036 </td>
          <td headers="_td0_2 _td3_0" id="_td3_2" align="center"> 3400500 </td>
        </tr>
        <tr>
          <td id="_td4_0" align="center"> October </td>
          <td headers="_td0_1 _td4_0" id="_td4_1" align="center"> 1186653 </td>
          <td headers="_td0_2 _td4_0" id="_td4_2" align="center"> 2500500 </td>
        </tr>
        <tr>
          <td id="_td5_0" align="center"> November </td>
          <td headers="_td0_1 _td5_0" id="_td5_1" align="center"> 1182294 </td>
          <td headers="_td0_2 _td5_0" id="_td5_2" align="center"> 1500000 </td>
        </tr>
        <tr>
          <td id="_td6_0" align="center"> December </td>
          <td headers="_td0_1 _td6_0" id="_td6_1" align="center"> 1102414 </td>
          <td headers="_td0_2 _td6_0" id="_td6_2" align="center"> 1000000 </td>
        </tr>
      </tbody>
    </table>

    Any help is extremely appreciated.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump. Anyone able to help?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •