dc.js : Barchart cant be display

StackOverflow https://stackoverflow.com/questions/22653902

  •  21-06-2023
  •  | 
  •  

Pregunta

I'm making a bar chart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. i am new in dc.js library.i am trying to display the barchart using csv file but graph can not be display.please give me proper solution.

<html>
<head>
<title>dc.js - Bar Chart Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dc.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>

</head>
 <body>
 <div id="volume-month-chart">
 <span>Days by Gain or Loss</span>
 <a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
 <span class="reset" style="display: none;">Current filter: <span class="filter"></span>     
 </div>
 <script type="text/javascript">
 var fluctuationChart = dc.barChart("#volume-month-chart");
 d3.csv("data/morley.csv", function (data)
 {

    var dateFormat = d3.time.format("%m/%d/%Y");
    var numberFormat = d3.format(".2f");

    data.forEach(function (d) {
           d.Expt = +d.Expt; // coerce to number
           d.Run = +d.Run;
       d.Speed = +d.Speed;
});
     var ndx = crossfilter(data);
     var all = ndx.groupAll();
   fluctuationChart.width(420)
        .height(180)
        .margins({top: 10, right: 50, bottom: 30, left: 40})
        .dimension(fluctuation)
        .group(fluctuationGroup)
        .elasticY(true)
        .centerBar(true)
    .gap(1) 
    .round(dc.round.floor)
        .alwaysUseRounding(true)
        .x(d3.scale.linear().domain([-25, 25]))
        .renderHorizontalGridLines(true)
    .filterPrinter(function (filters) 
        {
           var filter = filters[0], s = "";
           s += numberFormat(filter[0]) + "% -> " + numberFormat(filter[1]) + "%";
           return s;
        });
        fluctuationChart.xAxis().tickFormat(
        function (v) { return v + "%"; });
        fluctuationChart.yAxis().ticks(5);
      </script>
¿Fue útil?

Solución

This looks like the common problem of attempting to use the data outside of the callback from d3.csv - note that this function returns instantly and then later when the data is available, it calls the callback.

So at the time your chart is rendered, it has no data. Try moving the chart initialization into the callback.

(It'd be easier to verify this with a fiddle. ;-)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top