if(this.adjusttodata == true){ this.adjustToData(); } this.dataclip.datapane.breakDown(); this.clearLines(); this.refreshData(); this.buildLines(); this.chartbg.clearHTickLabels(); this.chartbg.clearVTickLabels(); this.chartbg.renderAll(); if(this.findLegend() != null){ if(this.subnodes[this.findLegend()].legenddrawn != true){ this.subnodes[this.findLegend()].buildLegend(); } } if(this.zooming == false){ this.dataclip.datapane.breakDown(); this.chartbg.clearHTickLabels(); this.datazoom.setAttribute('origminimum', this.minimum); this.chartbg.renderGrid(); this.clearLines(); this.buildLines(); } if(this.zooming == false){ this.dataclip.datapane.breakDown(); this.chartbg.clearHTickLabels(); this.datazoom.setAttribute('origmaximum', this.maximum); this.chartbg.renderGrid(); this.clearLines(); this.buildLines(); } if(this.zooming == false){ this.dataclip.datapane.breakDown(); this.chartbg.clearVTickLabels(); this.datazoom.setAttribute('origaltminimum', this.altminimum); this.chartbg.renderAltGrid(); this.clearLines(); this.buildLines(); } if(this.zooming == false){ this.dataclip.datapane.breakDown(); this.chartbg.clearVTickLabels(); this.datazoom.setAttribute('origaltmaximum', this.altmaximum); this.chartbg.renderAltGrid(); this.clearLines(); this.buildLines(); } if(this.dataclip.datapane.pldraw.drawready){ this.dataclip.datapane.pldraw.clear(); } if(this.dataclip.datapane.ptdraw.drawready){ this.dataclip.datapane.ptdraw.clear(); } if(this.dataclip.datapane.bfilldraw.drawready){ this.dataclip.datapane.bfilldraw.clear(); } if(this.dataclip.datapane.afilldraw.drawready){ this.dataclip.datapane.afilldraw.clear(); } this.setAttribute('datadrawn', false); 1) { pvis = null; } else { pvis = ld.pointsvisible; } var lvis; if(ld.lvdata != null && ld.lvdata.length != 0){ if(typeof ld.lvdata[i] != 'undefined'){ lvis = ld.lvdata[i]; } else { lvis = null; } } else { lvis = ld.linesvisible; } var lthick; if(ld.lthickdata != null && ld.lthickdata.length != 0){ if(typeof ld.lthickdata[i] != 'undefined'){ lthick = ld.lthickdata[i]; } else { lthick = null; } } else { lthick = ld.linethickness; } if(lvis == null || (typeof xposit == 'undefined' || xposit == null || typeof yposit == 'undefined' || yposit == null)){ this.setAttribute('lastlinenotvis', true); } var pborder; if(ld.pborderdata != null){ if(typeof ld.pborderdata[i] != 'undefined'){ pborder = ld.pborderdata[i]; } else { pborder = null; } } else { pborder = ld.pointborder; } var pshape; if(ld.pshapedata != null){ if(typeof ld.pshapedata[i] != 'undefined'){ pshape = ld.pshapedata[i]; } else { pshape = null; } } else { pshape = ld.pointshape; } var pbthick; if(ld.pbwidthdata != null){ if(typeof ld.pbwidthdata[i] != 'undefined'){ pbthick = ld.pbwidthdata[i]; } else { pbthick = null; } } else { pbthick = ld.pointborderwidth; } var popac; if(ld.popacdata != null){ if(typeof ld.popacdata[i] != 'undefined'){ popac = ld.popacdata[i]; } else { popac = null; } } else { popac = ld.pointopacity; } var lopac; if(ld.opacdata != null){ if(typeof ld.opacdata[i] != 'undefined'){ lopac = ld.opacdata[i]; } else { lopac = 1; } } else { lopac = (ld.dataopacity != null ? ld.dataopacity : 1); } var bfill = ld.fillbelow; var fbopac = ld.fbopacity; var fzero = this.minimum * this.scaler * -1; if(pointy != undefined){ var yposit = this.dataclip.datapane.height - fzero - (pointy * scaler); } else { var yposit = pointy; } if(pointx != undefined){ var xposit = this.altzero + (pointx * altscaler); } else { var xposit = pointx; } if(bfill != null && this.dataclip.datapane.bfilldraw.drawready == true){ this.dataclip.datapane.bfilldraw.globalAlpha = fbopac; this.dataclip.datapane.bfilldraw.fillStyle = bfill; if(i == spos){ this.dataclip.datapane.bfilldraw.beginPath(); this.setAttribute('closepoint', xposit); this.dataclip.datapane.bfilldraw.moveTo(xposit, this.dataclip.datapane.height - fzero); } if(yposit != undefined && xposit != undefined){ this.dataclip.datapane.bfilldraw.lineTo(xposit, yposit); } if(i + 1 == ylength){ this.dataclip.datapane.bfilldraw.lineTo(xposit, this.dataclip.datapane.height - fzero); this.dataclip.datapane.bfilldraw.lineTo(this.closepoint, this.dataclip.datapane.height - fzero); this.dataclip.datapane.bfilldraw.fill(); } } if(this.dataclip.datapane.pldraw.drawready == true){ this.dataclip.datapane.pldraw.globalAlpha = lopac; this.dataclip.datapane.pldraw.strokeStyle = lvis; this.dataclip.datapane.pldraw.lineWidth = lthick; if(lvis && (i == spos || this.lastlinenotvis == true)){ this.dataclip.datapane.pldraw.beginPath(); this.dataclip.datapane.pldraw.moveTo(xposit, yposit); } if(lvis && (lastcolor != lvis && i > 0 && this.lastlinenotvis == false)){ this.dataclip.datapane.pldraw.beginPath(); this.dataclip.datapane.pldraw.moveTo(lastx, lasty); } if(lvis && (yposit != undefined && xposit != undefined)){ this.dataclip.datapane.pldraw.lineTo(xposit, yposit); if(i + 1 == ylength || (lvis != lastcolor && i > 0)){ this.dataclip.datapane.pldraw.stroke(); } } if(yposit == null){ this.dataclip.datapane.pldraw.stroke(); spos++; } } this.setAttribute('lastlinenotvis', false); var lastcolor = lvis; var lastx = xposit; var lasty = yposit; if(pvis && yposit != undefined && xposit != undefined && this.dataclip.datapane.ptdraw.drawready == true){ this.drawPoint(pshape, xposit, yposit, pddata, pborder, pvis, pbthick, popac); } if(ld.labeldata != null && yposit != undefined && xposit != undefined && this.rendercomplete != true){ var ltxtsize = ld.labeltextsize; var lborder = ld.labelborder; var lbwidth = ld.labelborderwidth; var lbcolor = ld.labelcolor; var ltcolor = ld.labeltextcolor; var labelheight = 15; if(ld.labeldata[i] != null){ var ltext = ld.labeldata[i]; new lz.label(dataclip.datapane, {height:labelheight, x:xposit, labelnumber:i, y:yposit - labelheight - 3, bgcolor:lbcolor, name:"label"+j+i, fadein:false, ltext:ltext, labelset:j, ltextsize:ltxtsize, lborder:lborder, lbwidth:lbwidth, ltcolor:ltcolor, charttype:"line", rvalx:truevaluex, rvaly:truevaluey}); } } } } } } this.setAttribute('rendercomplete', true); this.setAttribute('datadrawn', true); ]]> if(parent.parent.draggable){ dragger.setAttribute('applied', true); } if(parent.parent.draggable){ dragger.setAttribute('applied', false); parent.parent.setAttribute('paneslider', this.x); parent.parent.setAttribute('altslider', this.y); } this.setAttribute('drawready', true); this.setAttribute('drawready', true); this.setAttribute('drawready', true); this.setAttribute('drawready', true); The linechart class draws data in lines using the information in the child dataseries object(s).

This is an example of a simple linechart with minimal customization. By specifying additional attributes, one can exercise much greater control over the visual appearance of the chart. (See: /test/charting/ for more detailed examples.)