Latest: 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 decPercentage = (arguments[5]) ? arguments[5] : 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; row_labels = []; row_values = []; } 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; } // user param to display percentage size full chart (e.g. 0.5 = 50 percent) if (decPercentage && !isNaN(decPercentage)) { disp_px=disp_px * decPercentage; } var row_label = row_labels[i]; var row_value = chart_number_format(row_values[i]); var tablestr = "<table id='myChart'><tr id= 'chart_tr'>"; tablestr += "<td width=" + label_px + "px>" + row_label + "</td>"; tablestr += "<td id= 'chart_td' width=" + disp_px + "px; bgcolor='" + bar_color + "'></td>"; tablestr += "<td> " + 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