Tag Archives: javascript

Java pie

A useful JavaScript library I came across recently is the one created by Balamurugan that is based on the wz_jsgraphics library from walterzorn.

I made some modifications to the Pie library so more ‘properties’ can be specified by the calling script/code which makes it easier to use.

An example:

JavaScript Pie graph

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>
<div id="pieCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>
<script type="text/javascript">

 

var p = new pie();
p.radius = 100;
p.labelDistance = 120;
p.xCenter = 200;
p.yCenter = 150;
p.add("Jan",49);
p.add("Feb",51);
p.add("Mar", 87);
p.add("Apr",120);
p.add("May",56);
p.add("Jun",41);
p.add("Jul",31);
p.add("Aug",65);
p.fontName = "Tahoma";
p.labelFontSize = 14;
p.render("pieCanvas", "This is a test");

With this you will get a plain (but nice) pie graph that can use customize a bit if you like.

Here is a link to my modified version: JavaScriptPie

Javascript tip: innerText or textContent

Just a quick tip how to handle using an UI object’s innerText property properly. Even today there are differences on how web browsers give you access to the ‘Text’ content of an HTML element. Let say you have the following html:

<p id=”mine”>This is some text</p>

To get the ‘content you must use the following:

IE and Chrome

mine.innerText

but in Firefox

mine.textContent

To make a ‘universal function to get this text you can use the following function:

function getInnerText(obj){
  if (obj){
    if (obj.innerText)
      return obj.innerText;
    else
      return obj.textContent
    }
  else
    return "";
}