CODEWITHSUNDEEP
dc.jscrossfilter
Trang Le
Trang Le

Reputation: 71

dc.js Line Chart doesn't show Data

Data doesn't show in my line chart. It just shows the y-axis and x-axis.

My data arrays are like this:

time_list = ['00:00:00', '01:00:00', '02:00:00']
 val_list = [0.7274859768018719, 0.6894762867153069, 0.6994151884676558]

I set up the chart like this:

<div id="#chart-cpu-performance"></div>

  <script type="text/javascript">
      var cpuperformance  = dc.lineChart("#chart-cpu-performance");

      var connection = new WebSocket(`ws://localhost:8001/websocket`);

      function render_plots(dim, val) {
          cpuperformance
          .width(990)
          .height(540)
          .dimension(dim)
          .group(val)
          .x(d3.scaleBand().domain(['00:00:00', '04:00:00', '08:00:00','12:00:00', 
              '16:00:00', '20:00:00','23:00:00']).rangeRound([0,100]))
          .y(d3.scaleLinear().domain([0,1]))
          .curve(d3.curveLinear)
          .renderArea(false)
          .renderDataPoints(true);

          cpuperformance.render();
      }

      connection.onmessage = function(event){        
          //get data and parse
          var newData = JSON.parse(event.data);

          var updateObject = []

          newData.time_list.forEach(function additem(item, index) {
            updateObject.push({time: item, avg_value: newData.val_list[index]})
          });

          var xfilter = crossfilter(updateObject)

          var timeDim = xfilter.dimension(function(d) {return d.time;});

          var avg_vPertime = timeDim.group().reduceSum(function(d) {return +d.avg_value;});

          render_plots(timeDim, avg_vPertime)
      }
</script>

Did I miss some parameters for cpuperformance in the render_plots function?

Upvotes: 1

Views: 275

Answers (1)

Gordon
Gordon

Reputation: 20120

Yes, you missed xUnits. Also I suggest using .elasticX(true) rather than specifying the domain yourself.

Unfortunately most coordinate grid charts are not able to determine automatically what kind of data keys they are dealing with, the primary kinds being numeric, ordinal, and time.

So if your data is ordinal, you need to have

.xUnits(dc.units.ordinal)

A lot of the logic is different for charts with an ordinal X scale, and this parameter directs dc.js to use the ordinal logic. Other values tell bar charts how wide to make the bars for the numeric (dc.units.integers, dc.units.fp.precision) and time scales (d3.timeHours etc).

Also in this example, only one of the data points matches the domain you passed to scaleBand. So you'll only see one point.

It's easier to use

.elasticX(true)
.x(d3.scaleBand().rangeRound([0,100]))

and let the chart figure out what to put in the domain.

working line chart

Fiddle with a working version of your code.

Upvotes: 1

Related Questions