I'm going to pose this question to the JavaScript InfoVis Toolkit Google Group, but while I'm waiting for that membership to be approved, I thought I'd pose it here.
I'm developing a Rails app and am in need of adding data visualization (and manipulation via that visualization).
I've done some searching and have come accross the JavaScript InfoVis Toolkit. The demos are very appealing to me and are what I'm looking for.
I'm trying to start slow since I'm still relatively new. I've tried numerous iterations of code all to no avail. This seems to be the best I can do:
#HTML source
<!DOCTYPE html>
<html>
<head>
<title>Special</title>
<link href="/stylesheets/BarChart.css?1281492364" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/fileuploader.css?1287396350" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1291059294" type="text/javascript"></script>
<script src="/javascripts/effects.js?1291059294" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1291059294" type="text/javascript"></script>
<script src="/javascripts/controls.js?1291059294" type="text/javascript"></script>
<script src="/javascripts/rails.js?1291059294" type="text/javascript"></script>
<script src="/javascripts/fileuploader.js?1287396350" type="text/javascript"></script>
<script src="/javascripts/info-vis.js?1295643295" type="text/javascript"></script>
<script src="/javascripts/jit.js?1281492366" type="text/javascript"></script>
<script src="/javascripts/application.js?1295548407" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="1yF3pZmI7eUDbIipP66exagwkAGljlU0LlCjaW+ZoaI="/>
</head>
<body onload="init();">
<a href="/">Home</a> | <a href="/mailing_lists/list">List Overview</a><br>
<div id="infovis">
</div>
</body>
</html>
Here's my JavaScript file:
#info-vis.js
var init = function() {
var json = {
'label': ['label A', 'label B', 'label C', 'label D'],
'values': [
{
'label': 'date A',
'values': [20, 40, 15, 5]
},
{
'label': 'date B',
'values': [30, 10, 45, 10]
},
{
'label': 'date E',
'values': [38, 20, 35, 17]
},
{
'label': 'date F',
'values': [58, 10, 35, 32]
},
{
'label': 'date D',
'values': [55, 60, 34, 38]
},
{
'label': 'date C',
'values': [26, 40, 25, 40]
}]
};
var barChart= new $jit.BarChart({
injectInto: "infovis",
width: 900,
height: 500,
backgroundColor: "#222",
animate: true,
barsOffset: 10,
type: 'stacked:gradient'
});
barChart.loadJSON(json);
};
So all I"m trying to do is make a simple bar chart example.
Here's the relevant part of what the Web Inspector (in Safari) shows after the page has fully loaded:
#DOM Inspection
<div id="infovis">
<div id="infovis-canvaswidget" style="position: relative; width: 800px; height: 0px; ">
<canvas id="infovis-canvas" width="800" height="0" style="position: absolute; top: 0px; left 0px; width:800px; height: 0px; ">
<div id="infovis-label" style="overflow-x: visible; overflow-y: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px; "></div>
</div>
</div>
<div style="visibility: hidden; position: absolute; width: auto; height: auto; " class="jit-autoadjust-label"></div>
So, what I'm seeing is that the canvas element is being injected but with a height of 0px and that's why I'm not seeing it?
When I look at the DOM of the demo, the contents of <div id="infovis"> looks very similar to mine...the only difference I see is in the height.
Any insights would be very much appreciated!
The answer ended up being that the container div needed to be styled. Apparently it's a bug and is being looked in to.