0

I am trying to use the dc.js library for charts. However, what I found was my charts were not loading properly. If I write my code as following, it would not show the charts or error messages. But if I include my script (except the first line of the script) in the ready function like below, the charts load well.

$(document).ready(function (){
    d3.json('data/GDX_partial.json', function (data) {
        //code goes here......
    }
})

Any idea? I omitted the library references and data and I am sure the data is not the issue.

<script type="text/javascript">    
    observerPieChart = dc.pieChart("#observer-pie-chart");
    d3.json('data/GDX_partial.json', function (data) {
        var dateFormat = d3.time.format('%m/%d/%Y %I:%M:%S %p').parse;
        var numberFormat = d3.format('.2f');

        var features = data.features;            
        features.forEach(function (d) {
            d.date = dateFormat(d.attributes.ADD_DATE);
            d.newX = Math.round(d.geometry.x);
            d.newY = Math.round(d.geometry.y);
        });

        var gdx = crossfilter(features);

        var observerDim = gdx.dimension(function (d) {
            return d.attributes.OBSERVER;
        });

        var obsvCount = observerDim.group().reduce(
            function (p, v) {
                return p + 1;
            },
        function (p, v) {
            return p - 1;
        },
        function (p, v) {
            return 0;
        });

        observerPieChart
                .width(400)
                .height(150)
                .dimension(observerDim)
                .group(obsvCount);

        dc.renderAll();
    });
    </script>
</head>
<body>
    <div class="container-fluid">
        <div id="observer-pie-chart"></div>
    </div>
</body>
Siyu
  • 11
  • 1
  • 1
    I suspect you have this script tag in the of your HTML page. It needs to be at the bottom, or you need to use the `.ready` callback. The problem is likely that the necessary HTML elements such as the element with id `observer-pie-chart` don't exist at the time the dc.js script runs. – Ethan Jewett Mar 06 '17 at 22:51
  • I'd advise looking at the browser developer console - it should give you some errors pointing to the problem. It's probably what @Ethan said, but it's hard for us to know without seeing the errors. – Gordon Mar 07 '17 at 00:56

0 Answers0