I will try to ask this question in the Google JavaScript group of the InfoVis Toolkit Google, but while I wait for this membership to be approved, I thought I would be here.
I am developing a Rails application and need to add data visualization (and manipulation with this visualization).
I did some searches and came through the JavaScript InfoVis Toolkit . The demonstrations are very attractive to me and are what I am looking for.
I am trying to start slowly since I am still relatively new. I tried multiple code iterations, but 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 is 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 am trying to do is make a simple histogram example.
Here is the relevant part of what the web inspector (in Safari) shows after the page is 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 see is that the canvas element is introduced, but with a height of 0px, and why can't I see it?
When I look at the DOM demo, the content of the <div id="infovis"> looks very similar to mine ... the only difference I see is in height.
Any ideas would be greatly appreciated!