AjaMyAjax Site

AjaMyChart.js source listing

/***
 **  AjaMyAjax --> Table Chart functions library
 **  use with the core AJAX lib routines in ajaMyCore.js.
 */

pbChartLibReady = true; // notifies core that lib is available

var pbChartLibHeader = "[AjaMyAjax Chart Lib]";

this.processChart = function() {
  var dataDoc = (arguments[0]) ? arguments[0] : null;
  var strcontainer = (arguments[1]) ? arguments[1] : null;
  var stroutputFormat = (arguments[2]) ? arguments[2] : null;
  var strSearchElement = (arguments[3]) ? arguments[3] : null;
  var strdataType = (arguments[4]) ? arguments[4] : null;

  var row_labels = [], row_values = [], tablebarColor = "";

  if (!dataDoc || !strcontainer) {
    return;
  }

  // load chart data from files into array, if possible
  var output_array = [];

  switch (strdataType) {
    case "XML":
      if (strSearchElement) {
        var nodes = dataDoc.getElementsByTagName(strSearchElement).item(0);
        if (nodes) {
          nodes = nodes.parentNode;
        }
      }
      else {
        var nodes = dataDoc.getElementsByTagName('*').item(0);
      }

      if (!nodes) {
        aja_empty(strcontainer);
        if (pbshowAlertMsgs) {
          var errmsg = "Sorry, cannot retrieve XML data requested ";
          if (strSearchElement) {
            errmsg += ": " + strSearchElement;
          }
          aja_alertMsg(pbChartLibHeader, errmsg);
        }
        return;
      }

      var nodetext = chart_getnodeData(nodes);
      break;

    case "JSON":
      var lbracket = dataDoc.indexOf("[");
      var rbracket = dataDoc.indexOf("]");
      var jsonData = "";

      if (lbracket > 0 && rbracket > 0) {
        jsonData = dataDoc.substr(lbracket + 1, (rbracket - lbracket) - 1);
      }
      else {
        jsonData = dataDoc;
      }

      var jsonArray = jsonData.split(",");
      var arrlen = jsonArray.length;
      for (var i=0; i < arrlen; i++) {
        var tempstr = jsonArray[i];
        var dataArray = tempstr.split(":");
        if (dataArray.length == 2) {

          // clean data, put label (0) and value (1) in chart array
          dataArray[0] = dataArray[0].replace(/[{"]/g, "");
          dataArray[1] = dataArray[1].replace(/[}"]/g, "");
          dataArray[0] = dataArray[0].replace(/^\s+|\s+$/g,'');
          dataArray[1] = dataArray[1].replace(/^\s+|\s+$/g,'');

          if (!strSearchElement || strSearchElement === dataArray[0]) {
            if (isNaN(dataArray[0]))
              output_array.push(dataArray[0]);
            if (!isNaN(dataArray[1])) {
              output_array.push(dataArray[1]);
            }
          }
        }
      }
      break;
  }

  if (output_array.length == 0) {
    aja_empty(strcontainer);
    if (pbshowAlertMsgs) {
      aja_alertMsg(pbChartLibHeader, strdataType + " data unavailable to chart");
    }
    return;
  }

  // data collected, now set the arrays used for chart..
  // note only two chart columns supported: labels + values
  var arrlen = output_array.length;
  for (var i=0; i < arrlen; i++) {
    if (i % 2) {
      if (!isNaN(output_array[i]))
        row_values.push(output_array[i]);
    }
    else {
      if (isNaN(output_array[i]))
        row_labels.push(output_array[i]);
    }
  }

  var chart = aja_TableChart(row_labels, row_values);
  if (chart) {
    aja_fill(strcontainer, chart);
    chart = null;
  }

  function aja_TableChart(row_labels, row_values) {
    var max_value = 0;
    var disp_px = 0;
    var label_px = 90;
    var max_bars = 0;

    // default table bar color: cyan
    var bar_color = (tablebarColor) ? tablebarColor : "#00ffff";

    var row_count = row_values.length;

    // get max data value first
    for (i=0; i < row_count; i++) {
      if (row_values[i] > max_value) {
        max_value = row_values[i];
      }
    }

    if (row_count > 0 && max_value > 0) {
      if (max_bars == 0) {
        max_bars = row_count;
      }

      var chartstr = "";
      for (i=0; i < max_bars; i++) {
        // set relative screen offsets for table and data display
        if (row_values[i] == max_value) {
          disp_px=70;  // limit max bar display size
        }
        else {
          disp_px=(row_values[i]/max_value)*70;
        }

        var row_label = row_labels[i];
        var row_value = chart_number_format(row_values[i]);

        var tablestr = "<table id='myTableID'><tr>";
        tablestr += "<td width=" + label_px + "px>" + row_label + "</td>";
        tablestr += "<td width=" + disp_px + "px; bgcolor='" + bar_color + "'></td>";
        tablestr += "<td>&nbsp;" + row_value + "</td>";
        tablestr += "</tr></table>";
        chartstr += tablestr;
      }
      return chartstr;
    }
    else {
      if (pbshowAlertMsgs) {
        aja_alertMsg(pbChartLibHeader, "No data found to chart, check file compatibility");
      }
    }
  }

  function chart_number_format(val, precision) {
    var int_delimiter = ",", dec_delimiter = ".";
    var decimals = "", tempchar = "";

    if (precision && !isNaN(precision)) {
      // rounds decimals to this precision
      val = val.toFixed(precision);
    }

    var valuestr = val.toString();

    if (Math.floor(val) != val) {
      // split decimals, integer first
      var strarray = valuestr.split(dec_delimiter);
      valuestr = strarray[0];
      decimals = strarray[1];
    }
    var valstrlen = valuestr.length-1;

    if (valstrlen >= 3) {
      var output = "", tempstr = "", tempstrlen = 0;

      for (var i=valstrlen; i >= 0; i--) {
        tempchar = valuestr.substr(i,1);
        tempstr = tempchar + tempstr;
        tempstrlen = tempstr.length;

        // insert comma after three digits
        if (i > 0 && tempstrlen == 3) {
          output = int_delimiter + tempstr + output;
          tempstr = "";
        }
      }
      // insert any remaining digits
      if (tempstrlen != 0) {
        output = tempstr + output;
      }
      valuestr = output;
    }
    // fix decimal precision (any dropped zeroes)
    if (precision && !isNaN(precision)) {
      var declen = decimals.length;
      for (var i=declen; i < precision; i++) {
        decimals += "0";
      }
    }
    if (decimals)
      valuestr += (dec_delimiter + decimals);
    return valuestr;
  }

  function chart_getnodeData(nodes) {
    var nodeslen = nodes.childNodes.length;
    for (var i=0; i < nodeslen; i++) {
      var node = nodes.childNodes[i];

      if (node.nodeType == 3) {
        var nodedata = node.nodeValue;

        if (nodedata) {
          // trim for null string comparison
          nodedata = nodedata.replace(/^\s+|\s+$/g,'');

          if (nodedata !== "") {
            output_array.push(nodedata);
          }
        }
      }
      if (node.hasChildNodes()) {
        chart_getnodeData(node);
      }
    }
  }
} // eof

[eof]

More Resources from AjaMyAjax.com