1

I have two tables, one that shows the sales history of salespeople per year, and another table that shows the sales history in months. As you can see in the image below:

enter image description here

I need to create a composite chart (I believe it is a composite chart, as it will have more than 01 line) that is exactly the representation of the month table.

After creating the chart when I click on the seller Miguel for example, the chart will be rendered with the history of that seller.

And for example if I click on month 03 of the graph, the table of sellers will be rendered only with the sales that were made in month 03.

I don't know how to do it, I managed to create a composite chart that presents the same data as the month table, however, I was unable to integrate my chart together with my tables.

enter image description here

Can you tell me how I can do that?

I put the codes I made in JSFiddle, here are the links:

Sales/Month Table: https://jsfiddle.net/bernalvinicius/ejxcfpvz/15/

Month Chart: https://jsfiddle.net/bernalvinicius/kanm158j/17/

Thanks in advance.

vbernal
  • 673
  • 8
  • 21

1 Answers1

1

Just put all your code in the same file(s), combine your crossfilter instances, and put all the charts in the same chart group (the default), and it should work fine.

The chart group is the second parameter to each chart constructor. If it's not specified, then the chart goes into the default chart group.

When any chart is filtered in a chart group, it will tell all the other charts in that chart group to redraw, and they will pull their new data from their respective crossfilter groups. (Sorry about the naming, a dc.js chart group has nothing to do with a crossfilter group.)

In order to combine your code, I renamed both of the crossfilter instances to cf. Then I added the new fields you are generating to the existing rows, instead of mapping the data:

  data.forEach(d =>
    Object.assign(d,  {
      mes: d.Month,
      atual: d.Vendas_Ano,
      passado: d.Vendas_Ant
    })
  );

In your table fiddle, you were initializing the table for every row in the data with a data.forEach() which wasn't necessary. That's why it was so slow to load.

Other than that, both fiddles had the same general structure so I just copied and pasted the code from the table fiddle to the composite fiddle, HTML, JS, and CSS.

In the JS I made sure to put the same lines outside and inside the d3.json() callback as before.

It looks like it works?

https://jsfiddle.net/gordonwoodhull/0q1y5ftr/15/

Gordon
  • 19,811
  • 4
  • 36
  • 74
  • Hi Gordon, thank you very much for your help and sorry for the delay in responding. That was exactly what I needed. I was really in doubt to know why it took so long to load the page, really the problem was the forEach() I had. If I can, just one more question. Is it possible to add a `click` event on the chart? For example, if I click on month 03 in the chart, the salesperson table will be rendered only with sales made in month 03. – vbernal Feb 10 '20 at 09:59
  • It’s easiest to turn the brush on ([demo](https://jsfiddle.net/gordonwoodhull/0q1y5ftr/17/)). dc.js only supports clicking to select in ordinal charts. – Gordon Feb 10 '20 at 10:50
  • [Here is a way to make the brush snap around points](https://stackoverflow.com/a/59511037), which also allows clicking on individual points. I think it should be applicable; if not please ask another question. – Gordon Feb 10 '20 at 11:01
  • Okay, I will study here the way you sent it and see your boss accept as my boss accepts. Thanks again. – vbernal Feb 10 '20 at 11:04
  • 1
    You're very welcome. There are a few revisions in that answer, because I was figuring it out as I went along. The last version should work. – Gordon Feb 10 '20 at 11:39