Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I debugged the file and it says <code>“Cross origin requests are only supported for HTTP."</code> </p> <p>You need to actually run a webserver, and make the get request to a URI on that server something like <code>http://localhost/graph/creator.htm</code>, rather than making the get request to a file; e.g. <code>file:///C:/Users/myuser/Downloads/Creator.htm</code></p> <p>Not all time,everything will work when you save the site locally.Sometimes not all referenced used on the site will also be save that's why some portion of it will really not work.</p> <p>On # 3 : <strong>Source Code Editor</strong> just click <strong>Export HTML</strong> </p> <p>HTML Export Source:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;!-- Generated with d3-generator.com --&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bar Chart&lt;/title&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=9"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="chart"&gt;&lt;/div&gt; &lt;script src="http://d3js.org/d3.v2.min.js"&gt;&lt;/script&gt; &lt;script&gt; function renderChart() { var data = d3.csv.parse(d3.select('#csv').text()); var valueLabelWidth = 40; // space reserved for value labels (right) var barHeight = 20; // height of one bar var barLabelWidth = 100; // space reserved for bar labels var barLabelPadding = 5; // padding between bar and bar labels (left) var gridLabelHeight = 18; // space reserved for gridline labels var gridChartOffset = 3; // space between start of grid and first bar var maxBarWidth = 420; // width of the bar with the max value // data aggregation var aggregatedData = d3.nest() .key(function(d) { return d['Average Life Expectancy']; }) .rollup(function(d) { return { 'value': d3.sum(d, function(e) { return parseFloat(e['Average Life Expectancy']); }) }; }) .entries(data); // accessor functions var barLabel = function(d) { return d.key; }; var barValue = function(d) { return d.values.value; }; // sorting var sortedData = aggregatedData.sort(function(a, b) { return d3.ascending(barValue(a), barValue(b)); }); // scales var yScale = d3.scale.ordinal().domain(d3.range(0, sortedData.length)).rangeBands([0, sortedData.length * barHeight]); var y = function(d, i) { return yScale(i); }; var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; }; var x = d3.scale.linear().domain([0, d3.max(sortedData, barValue)]).range([0, maxBarWidth]); // svg container element var chart = d3.select('#chart').append("svg") .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth) .attr('height', gridLabelHeight + gridChartOffset + sortedData.length * barHeight); // grid line labels var gridContainer = chart.append('g') .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')'); gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text") .attr("x", x) .attr("dy", -3) .attr("text-anchor", "middle") .text(String); // vertical grid lines gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line") .attr("x1", x) .attr("x2", x) .attr("y1", 0) .attr("y2", yScale.rangeExtent()[1] + gridChartOffset) .style("stroke", "#ccc"); // bar labels var labelsContainer = chart.append('g') .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); labelsContainer.selectAll('text').data(sortedData).enter().append('text') .attr('y', yText) .attr('stroke', 'none') .attr('fill', 'black') .attr("dy", ".35em") // vertical-align: middle .attr('text-anchor', 'end') .text(barLabel); // bars var barsContainer = chart.append('g') .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')'); barsContainer.selectAll("rect").data(sortedData).enter().append("rect") .attr('y', y) .attr('height', yScale.rangeBand()) .attr('width', function(d) { return x(barValue(d)); }) .attr('stroke', 'white') .attr('fill', 'steelblue'); // bar value labels barsContainer.selectAll("text").data(sortedData).enter().append("text") .attr("x", function(d) { return x(barValue(d)); }) .attr("y", yText) .attr("dx", 3) // padding-left .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "start") // text-align: right .attr("fill", "black") .attr("stroke", "none") .text(function(d) { return d3.round(barValue(d), 2); }); // start line barsContainer.append("line") .attr("y1", -gridChartOffset) .attr("y2", yScale.rangeExtent()[1] + gridChartOffset) .style("stroke", "#000"); } &lt;/script&gt; &lt;script id="csv" type="text/csv"&gt;Name,Population (mill),Average Life Expectancy,Area (1000 sq mi),Continent Canada,33.9,80.7,3854.085,America US,308.3,78.2,3784.191,America Germany,82.3,79.4,137.847,Europe Russia,141.9,65.5,6601.668,Europe Mexico,108.4,76.06,758.449,America Brazil,193.3,71.99,3287.612,America Spain,46.9,80.9,195.365,Europe France,65.4,80.98,244.339,Europe China,1339,73,3705.407,Asia Australia,22.4,81.2,2969.907,Australia UK,62,79.4,93.800,Europe Italy,60.3,80.5,116.346,Europe India,1184,64.7,1236.085,Asia Japan,127.4,82.6,145.920,Asia Iceland,0.3,81.8,40.000,Europe Portugal,10.6,78.1,35.560,Europe South Africa,50,49.3,471.445,Africa Egypt,78.9,71.3,387.000,Africa Sweden,9.3,80.9,170.410,Europe&lt;/script&gt; &lt;script&gt;renderChart();&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Click copy to clip board ,paste it on your text editor then save it as html.</p> <p>Open your Html file and the graph will be generated.</p> <p>Best Regards</p>
    singulars
    1. This table or related slice is empty.
    1. POSaved web pages shows Javascript erros
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USBizApps
    1. USBizApps
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POSaved web pages shows Javascript erros
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThank you so much for looking into this, still I didn't fully understand what to do? I should copy-paste the source you provided and save at as an HTML? Under what name save it? Can you please explain the steps in a little more details. Thanks.
      singulars
      1. PO
      1. USBohn
    2. COoh you mean just save this HTML and open it? well that's not what I am lookig for. I want that saved version of that web site to be functional so at run time I can play with its numbers and draw charts.
      singulars
      1. PO
      1. USBohn
    3. COI debugged the file and it says “Cross origin requests are only supported for HTTP." You need to actually run a webserver, and make the get request to a URI on that server something like http://localhost/graph/creator.htm, rather than making the get request to a file; e.g. file:///C:/Users/myuser/Downloads/Creator.htm
      singulars
      1. PO
      1. USBizApps
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload