Simple way to add raw data to dc.js composite chart via Ajax

问题

I have a composite chart of 2 line charts however I need to add a third chart to it.

This third chart will have these unique properties:

The data will come in via an ajax call and be available as a two dimensional array [[timestamp,value],[timestamp,value]...]
Every new ajax call needs to replace the values of the previous one
It does not need to respect any of the filters and will not be used on any other charts
It will however need to use a differently scaled Y axis.. (and labeled so on the right)

This is how the chart currently looks with only two of the charts

This is my code with the start of a third line graph... Assuming I have the array of new data available i'm at a little loss of the best/simplest way to handle this.

timeChart
    .width(width).height(width*.333)
    .dimension(dim)
    .renderHorizontalGridLines(true)
    .x(d3.time.scale().domain([minDate,maxDate]))
        .xUnits(d3.time.months)
        .elasticY(true)
        .brushOn(true)
        .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
    .yAxisLabel(displayName)
    .compose([
      dc.lineChart(timeChart)
      .colors(['blue'])
      .group(metric, "actual" + displayName)
      .valueAccessor (d) -> d.value.avg
      .interpolate('basis-open')
      .dimension(dim),
    dc.lineChart(timeChart)
      .colors(['red'])
      .group(metric, "Normal " + displayName)
      .valueAccessor (d) -> d.value.avg_avg
      .interpolate('basis-open'),
     dc.lineChart(timeChart)
        .colors(['#666'])
        .y()#This needs to be scaled and labeled on the right side of the chart
        .group() #I just want to feed a simple array of values into here
     ])

Also side note: I've noticed what I might be a small bug with the legend rendering. As you can see in the legend both have the same label but i've used different strings in the second .group() argument.

回答1:

Currently your best bet is to create a fake group. Really the .data method on the charts is supposed to do this, but it doesn't work for charts that derive from the stack mixin.

https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted

回答2:

I believe you are asking a few questions here. I will try to answer the main question: how do you add data to a dc chart.

I created an example here: http://jsfiddle.net/djmartin_umich/qBr7y/

In this example I simply add random data to the crossfilter, though this could easily be adapted to pull data from the server:

function AddData(){
  var q = Math.floor(Math.random() * 6) + 1;
  currDate = currDate.add('month', 1);
  cf.add( [{date: currDate.clone().toDate(), quantity: q}]);  
  $("#log").append(q + ", ");
}

I call this method once a second. Once it completes, I reset the x domain and redraw the chart.

window.setInterval(function(){
  AddData();
  lineChart.x(d3.time.scale().domain([startDate, currDate]));
  dc.redrawAll();
}, 1000);

I recommend trying to get this working in isolation before trying to add the complexity of multiple y-axis scales.

来源：https://stackoverflow.com/questions/24857553/simple-way-to-add-raw-data-to-dc-js-composite-chart-via-ajax

标签

d3.js

charts

dc.js

crossfilter