CODEWITHSUNDEEP
javascriptdc.jscrossfilter
Tinwor
Tinwor

Reputation: 7973

Not able to render a series chart using data outside the dimension object

I have a dataset with the following schema:

{
    "time": Date,
    "foo": Number,
    "bar": Number,
    "change": Number
    "place1": String,
    "description": String,
    "place2": String
}

And I want plot a series-chart grouping the place1 and place2 together, display time as x data, foo as y data and the other fields inside the tooltip.
Taking a look at this example the first thing I have done is to create a dimension and grouping the dataset using place1 and place2.

const placeDimension = ndx.dimension((d) => [d.place1, d.place2]);

After that I've created a group, since I want display data without aggregation I've only used the group function:

const placeGroup = placeDimension.group();

And from this point on I'm confused on how to use the two object created before for plotting the series-chart.
How can I select the property to plot in the X and Y-Axis? (In this case time for X and foo for Y?) . How can I display the other properties inside the tooltip? (I know how to use the tooltip but I don't know how to use data that are not inside the dimension).

Upvotes: 1

Views: 29

Answers (1)

Gordon
Gordon

Reputation: 20120

In dc.js and crossfilter, the X axis is usually the "keys" of your grouped data, and the Y axis is the counts (or other aggregations).

If each of your keys are unique and you do

const placeGroup = placeDimension.group().reduceSum(d => d.foo)

then it will sum up the one value and return it to you. So your keys (X) will be place1,place2 and your values will be foo.

Then you can use the seriesAccessor and keyAccessor to pull the keys back apart, as in the example you linked.

Tooltips are called "titles" in dc.js, after the HTML/SVG element which implements them. You can format your text however you want in the accessor, including line breaks. The annotated stock example shows this in action.

Caveat

All this said, there aren't very many good reasons for using dc.js with unaggregated data. The library only shines when there are interactions by filtering the charts, and filtering will only work if the data is aggregated with crossfilter.

It will probably be easier to learn another charting library, since you aren't using any of the functionality that makes dc.js special.

Upvotes: 1

Related Questions