vertical histogram in javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • pyrokat
    New Member
    • Jan 2010
    • 5

    vertical histogram in javascript

    All the information is asked for. so the number of values is unknown, the data points are unknown and so forth. this is what i have thus far...




    Code:
    var array = userValues;
    maximumValue(array);
    var maxRows = max;
    var maxCols = valuesToPlot.length;
    var secondArray = createTwoDimArray(maxRows, maxCols);

    the number of values and the datas points have been stored in the userValues array.
  • RamananKalirajan
    Contributor
    • Mar 2008
    • 608

    #2
    Can you please elaborate the problem you are facing with this code?

    Thanks and Regards
    Ramanan Kalirajan

    Comment

    • pyrokat
      New Member
      • Jan 2010
      • 5

      #3
      I don't know how/what to do next.
      for example: given 5 entries with the following data points [2,3, 4, 5, 6] we are suppose to make a vertical histogram using functions made [maximum value of array and createTwoDimens ionalArray]

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5388

        #4
        given that the array would be:

        Code:
        [2,2,3,4,5,5,6]
        the output should look like:

        Code:
        2     *     *
        1     * * * * *
          0 1 2 3 4 5 6
        or what should be produced?

        kind regards

        Comment

        • pyrokat
          New Member
          • Jan 2010
          • 5

          #5
          given that the array would be

          [2,2,3,4,5,5,6]

          the output would be

          **
          **
          ***
          ****
          *****
          *****
          ******

          but vertical.. once vertical, reading from left to right there is a positive slope

          Comment

          • gits
            Recognized Expert Moderator Expert
            • May 2007
            • 5388

            #6
            so basicly you need to sort the array ascending and then transform it to a 'vertical' structure ... that would mean you could do something like the following steps:

            1. sort the array - have a look at the array's sort() method
            2. the last value in the array should then be the max

            now you could produce:

            Code:
            a0 = [' ', ... , '*']; // where the length == length of the base array
            ...
            an = ['*', ... , '*']; // where n == max value of the base array
            then display a0 ... an linewise on the page ... for a simple line concat for every array you might use the join()-method.

            kind regards

            Comment

            • pyrokat
              New Member
              • Jan 2010
              • 5

              #7
              it doesnt have to be ascending though and I am not allowed to use join method or any method.

              i am having problems in creating the two dimensional array right now to create the histogram.

              this is what i have so far

              Code:
              
              function createTwoDimArray(maxRows, maxCols) {
                   var newArray = new Array(maxRows);
                   for (var row=0; row<maxRows; row++) {
                             newArray[row] = new Array(maxCols);
                   }
                   return newArray;
              }        
                              
                              
              function createArrayVerticalGraph(valuesToPlot, symbol) {
                                              var array = valuesToPlot;
                                              var maxRows = maximumValue(array);
                                              var maxCols = valuesToPlot.length;
                                              var secArray = createTwoDimArray(maxRows, maxCols);
                                              var secArray = newArray[row];
                                              var row = (maxRows - 1);
                                              for (col = 0; col < secArray[row].length; col++) {
                                                      for (value = valuesToPlot[col]; value > 0; value--) {                                           
                                                              secArray[row][col] = symbol;
                                                              row--;
                                                          }
                                                  }
                                              return secArray;
                                      }

              Comment

              • gits
                Recognized Expert Moderator Expert
                • May 2007
                • 5388

                #8
                basicly it could look like this - i just use the document.write( ) method for simplicity ... it shouldn't be used in reality for such purposes:

                Code:
                var a = [2,2,3,7,4,5,6];
                
                function createPlotArray(a) {
                    var plotArray       = [];
                    var plotArrayLength = 0;
                    
                    var check = function(arr, max) {
                        var ret = [];
                
                        for (var k = 0, l = arr.length; k < l; ++k) {
                            var r = arr[k];
                            var val = r >= max ? '*' : ' ';
                            ret.push(val);
                        }
                
                        return ret;
                    };
                
                    for (var i = 0, l = a.length; i < l; ++i) {
                        if (a[i] > plotArrayLength) {
                            plotArrayLength = max = a[i];
                        }
                    }
                
                    for (var j = 0; j < plotArrayLength; ++j) {
                        plotArray.push(check(a, max).join(''));
                        max--;
                    }
                    
                    return plotArray;
                }
                
                var p = createPlotArray(a);
                
                document.write('<pre>');
                
                for (var i = 0, l = p.length; i < l; ++i) {
                    document.write(p[i] + '<br/>');
                }
                
                document.write('</pre>');
                when you need to avoid the join() then use an iteration for that step.

                Comment

                Working...