Documentation Omits Required Element Height #4

Closed
JeffPaine opened this Issue Dec 6, 2012 · 2 comments

4 participants

@JeffPaine

My apologies in advance if this is not the proper place to raise this issue.

In step 4 of the documentation, users are instructed to

4) Add an element to your page to display your chart:

    <figure id="myChart"></figure>

However, the chart will fail to appear unless a height is set on that element (or a containing element).

Steps to Reproduce

  1. load the following html into a browser
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://tenxer.github.com/xcharts/css/master.css">

  <script src="http://tenxer.github.com/xcharts/js/d3.v2.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://tenxer.github.com/xcharts/js/xcharts.min.js"></script>
</head>
<body>
    <figure id="example1"></figure>
    <script>
    (function () {

        var data = {
          "xScale": "ordinal",
          "yScale": "linear",
          "main": [
            {
              "className": ".pizza",
              "data": [
                {
                  "x": "Pepperoni",
                  "y": 4
                },
                {
                  "x": "Cheese",
                  "y": 8
                }
              ]
            }
          ]
        };
        var myChart = new xChart('bar', data, '#example1');

      }());
    </script>
</body>
</html>

Expected Behavior

You will see a chart.

Actual Behavior

You do not see a chart (it's there, but with a height of 0px).

In order to see the chart, change the <figure> element to (for example)

<figure style="height: 300px;" id="example1"></figure>

Perhaps this should be obvious to most users, but I know it tripped me up for a second. In the interest of making this library easy to use, perhaps it's worth mentioning in the documentation. Humbly submitted.

@jcoene

+1

@Bambofy

nice find, i was wondering why it wasn't working!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment