Getting JS error when using Rails

MikeBlyth commented 11 years ago

I'm trying Rickshaw for the first time, using the first tutorial example. If I set up an isolated HTML page, it works. But if I try to embed the same code in Rails (3.2), I get a JS error. Firebug "blames" Rickshaw line 181 but I don't know if it's the actual problem since a breakpoint at that line does not prevent the crash. The page has d3 and Rickshaw loaded, in that order, and the character encoding is UTF-8. Any thoughts? Perhaps a name collision (I'm using ActiveScaffold and, of course. jquery & jquery-ui). Thanks for any thoughts.

MikeBlyth commented 11 years ago

Removing ActiveScaffold and JQuery-UI scripts did not solve the problem. The full page source is here:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>PtBase</title>
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/active_scaffold.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/ptbase.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <script src="/assets/d3.js?body=1" type="text/javascript"></script>
    <script src="/assets/rickshaw.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="zsaDfbjt1UUX7e2p6qFc0Ha9+W7k7BDlMDF6MIcAYuU=" name="csrf-token" />
</head>
<body>
<div class='container-fluid'>
    <div class='row-fluid'>
        <div class='span2'>
            <a href="/visits/new?patient=97">New Visit</a>
        </div>
        <div class='span10'>
            <p class='notice'></p>
            <p class='alert'></p>
            <div id="chart">Here</div>
            <script>
                var data = [ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ];
                var graph = new Rickshaw.Graph( {
                    element: document.querySelector("#growth_chart"),
                    width: 580,
                    height: 250,
                    series: [ {
                        color: 'steelblue',
                        data: data
                    } ]
                } );
                graph.render();
            </script>
            <a href="/users/logout" data-method="delete" rel="nofollow">Sign out</a>
        </div>
    </div>
</div>
</body>
</html>

MikeBlyth commented 11 years ago

I found the problem, which is that the graph definition is looking for #growth_chart while the element ID in the page is just #chart. It might be good to add a more informative error like "Element ID not found".

dchester commented 11 years ago

Thanks for following up -- this should be nicer with 7f9e96c967b9b463abd2b2bd310afbec68254b8c.

shutterstock / rickshaw

Getting JS error when using Rails #173