SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot croman's Avatar
    Join Date
    Apr 2003
    Location
    Minneapolis, MN
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with editing a Graph Script

    This graph script shows a vertical bar graph based on the numbers variables

    Now as most graphs do, if you had a 1, 9, 15, 20

    It would show the 1 the lowest, and 20 the highest on the bar graph

    I want to reverse that. I would want the 20 to be the lowest bar on the graph and the 1 to be the highest

    Here is the code for the script I am trying to edit. What could I edit to reverse that on the bar graph? Thanks


    Code:
    graph += '<tr align=center valign=bottom> ';
        for(i = 0; i < d.length; i++) {
    
          for(j = 0; j < val[i].length; j++) {
            percent = sum ? Math.round(val[i][j] * 100 / sum) : 0;
            graph += '<td><table border=0 cellspacing=0 cellpadding=0 width=15 align=center>';
            graph += '<tr align=center valign=bottom>';
            graph += '<td></td>';
            if(percent) {
              graph += '</tr><tr align=center valign=bottom>';
              graph += '<td bgcolor=' + bc[j] + ' height=' + Math.round(percent * mul) + '>';
              graph += (document.layers ? '&nbsp;' : '') + '</td>';
            }
            graph += '</tr></table></td>';
          }
        }
        if(showVal) {
          graph += '</tr><tr align=center>';
          for(i = 0; i < d.length; i++) {
            for(j = 0; j < val[i].length; j++) {
              graph += '<td bgcolor=' + lColor + '>' + val[i][j] + '</td>';
            }
          }
        }
        graph += '</tr><tr align=center>';
        for(i = 0; i < d.length; i++) {
          label = (i < r.length) ? r[i] : i+1;
          graph += '<td colspan=' + val[i].length + ' bgcolor=' + lColor + '>' + label + '</td>';
        }
        graph += '</tr>';
      }

  2. #2
    SitePoint Zealot croman's Avatar
    Join Date
    Apr 2003
    Location
    Minneapolis, MN
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, here is some more code that I missed when I pasted.. this is at the top of the script

    Code:
    function bar_graph(type, values, labels, bColor, lColor, showVal, legend) {
      showVal = parseInt(showVal);
      var colors = new Array('#0000FF', '#FF0000', '#00E000', '#A0A0FF', '#FFA0A0', '#00A000');
      var d = (typeof(values) == 'string') ? values.split(',') : values;
      if(labels) var r = (typeof(labels) == 'string') ? labels.split(',') : labels;
      else var r = new Array();
      var label = graph = '';
      var percent = 0;
      if(bColor) var drf = (typeof(bColor) == 'string') ? bColor.split(',') : bColor;
      else var drf = new Array();
      var drw = new Array();
      var val = new Array();
      var bc = new Array();
      if(lColor) lColor = lColor.replace(/\s+/, '');
      if(!lColor) lColor = '#C0E0FF';
    
      for(var i = sum = max = 0; i < d.length; i++) {
        drw = d[i].split(';');
        val[i] = new Array();
        for(var j = cnt = 0; j < drw.length; j++) {
          val[i][j] = parseFloat(drw[j]);
          sum += val[i][j];
          if(val[i][j] > max) max = val[i][j];
          if(!bc[j]) {
            if(cnt >= colors.length) cnt = 0;
            bc[j] = (!drf[j] || drf[j].length < 3) ? colors[cnt++] : drf[j];
          }
        }
      }
      var mDiv = sum ? Math.round(max * 100 / sum) : 0;
      var mul = mDiv ? 100 / mDiv : 1;
      type = type.toLowerCase();
    
      if(legend && type != 'pbar') graph += '<table border=0 cellspacing=0 cellpadding=0><tr valign=top><td>';
      graph += '<table border=0 cellspacing=2 cellpadding=0>';

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is a bit messy, so I didn't read through it all. However, I think you're storing the data in an array.

    Two ways to approach this. If your array is already sorted in ascending order, then you can just reverse it
    Code:
    var arr = [1,9,15,20];
    arr.reverse();
    If it isn't already in some sort of order, then you'll need to sort it.
    Code:
    var arr = [9,20,1,15];
    arr.sort( function( a, b )
    {
    	if ( a == b ) return 0;
    	return ( a < b ) ? 1 : -1;
    } );
    Hope this helps.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming that it isn't the order of the bars that is important just that you want 1 to appear tall and, say 20, to appear small?

    Is so, the easiest way is to find the maximum value in the array. the replace each value in the array with (max-{value}). This would make (in your example) the 20 have a height of 0 and the 1 have a height of 20. Of course, you might want to add a standard offset on in order to make the 20-bar actually show!

    HTH
    Paul Simpson, BSc, MCNI, MCNE


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
  •