Linechart with JSON object in dc.js

user_12714139 0
Viewed 117

I'm new to dc.js and I want to create a simple line chart with object.

The Object (/signalData.json):

"1": 10, 
"2": 20,
"3": 30, 
"4": 40,
"5": 50, 
"6": 60

The keys should be the x coordinates and the values should be the y coordinates

I Tried something like this but it does not work:

var data = {
  "1": 10,
  "2": 20,
  "3": 30,
  "4": 40,
  "5": 50,
  "6": 60
};

var dataModel = [{
  "keys": Object.keys(data).map(function(d) {
    return +d;
  }),
  "values": Object.values(data)
}, ]

signalCF = crossfilter(dataModel)

signalDim = signalCF.dimension(function(d) {
  return d.keys
}, true)
signalGroup = signalDim.group().reduceSum(function(d) {
  return d.values
});


var linechart = dc.lineChart("#linechart")
  .width(700)
  .height(300)
  .x(d3.scale.linear().domain([0, 6]))
  .renderArea(true)
  .brushOn(false)
  .renderDataPoints(true)
  .clipPadding(10)
  .yAxisLabel("This is the Y Axis!")
  .dimension(signalDim)
  .group(signalGroup);

linechart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.0-alpha.6/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.js"></script>
<div id="linechart"></div>

crossfilter dc.js d3.js
1 Answers

You made an incorrect assumption about the data structure. You need an array with one value per tick, not an array with all values directly after each other:

[{ keys: [], values: [] }]

becomes

[{ key: number, value: number }, { key: number, value: number }, ...]


var data = {
  "1": 10,
  "2": 20,
  "3": 30,
  "4": 40,
  "5": 50,
  "6": 60
};

var dataModel = Object.keys(data).map(function(d) {
  return {
    key: +d,
    value: data[d]
  };
})

signalCF = crossfilter(dataModel)

signalDim = signalCF.dimension(dc.pluck("key"))
signalGroup = signalDim.group().reduceSum(function(d) {
  return d.value;
});


var linechart = dc.lineChart("#linechart")
  .width(700)
  .height(300)
  .x(d3.scale.linear().domain([0, 6]))
  .renderArea(true)
  .brushOn(false)
  .renderDataPoints(true)
  .clipPadding(10)
  .yAxisLabel("This is the Y Axis!")
  .dimension(signalDim)
  .group(signalGroup);

linechart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.0-alpha.6/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.js"></script>
<div id="linechart"></div>

user_50153560
Related