var labelType, useGradients, nativeTextSupport, animate; (function() { var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); //I'm setting this based on the fact that ExCanvas provides text support for IE //and that as of today iPhone/iPad current text support is lame labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; nativeTextSupport = labelType == 'Native'; useGradients = nativeCanvasSupport; animate = !(iStuff || !nativeCanvasSupport); })(); var Log = { elem: false, write: function(text){ if (!this.elem) this.elem = document.getElementById('log'); this.elem.innerHTML = text; this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px'; } }; function init(){ //init data var json = { 'label': ['White Letter', 'Black Letter'], 'values': [ { 'label': '1560', 'values': [0, 10] }, { 'label': '1580', 'values': [0, 7] }, { 'label': '1600', 'values': [0, 13] }, { 'label': '1620', 'values': [3, 181] }, { 'label': '1640', 'values': [9, 292] }, { 'label': '1660', 'values': [55, 335] }, { 'label': '1680', 'values': [247, 1333] }, { 'label': '1700', 'values': [213, 403] }, { 'label': '1720', 'values': [34, 1] }, { 'label': '1740', 'values': [91, 0] }, { 'label': '1760', 'values': [109, 0] }, { 'label': '1780', 'values': [48, 0] }, { 'label': '1800', 'values': [28, 0] }] }; //end var infovis = document.getElementById('infovis'); //init AreaChart var areaChart = new $jit.AreaChart({ //id of the visualization container injectInto: 'infovis', //add animations animate: true, //separation offsets Margin: { top: 5, left: 5, right: 5, bottom: 5 }, labelOffset: 10, //whether to display sums showAggregates: true, //whether to display labels at all showLabels: true, //could also be 'stacked' type: useGradients? 'stacked:gradient' : 'stacked', //label styling Label: { type: labelType, //can be 'Native' or 'HTML' size: 13, family: 'Arial', color: 'white' }, //enable tips Tips: { enable: true, onShow: function(tip, elem) { tip.innerHTML = "" + elem.name + ": " + elem.value; } }, //add left and right click handlers filterOnClick: true, restoreOnRightClick:true }); //load JSON data. areaChart.loadJSON(json); //end var list = $jit.id('id-list'); //dynamically add legend to list var legend = areaChart.getLegend(), listItems = []; for(var name in legend) { listItems.push('
 
' + name); } list.innerHTML = '  ' + listItems.join('  ') + ''; }