Add another chart

#1

Hi guys,

I’ve been trying the demo as in: https://chartfactor.com/doc/1.10/quick_start/ and it did work. I would like to add another visualization and sync them by using some filter criteria. I added this:

var chart2 = cf.provider('Elastic')
                .source('test_source')
                .groupby(...groups)
                .metrics(...metrics)
                .graph('Pie')
                .element('chart')

But I can’t see the new visualization. What is the best way to do this?

#2

Hi @oliver, If I understood correctly what you want is to have the two visualizations in the same page and then apply some filters that affect both right?

If that’s the case you just need to create a new html element (a new div) and use that div as the .element() of your new visualization. Probably you are using the same. Check this demo of multiple charts for a better example.

Regarding to the filtering, we do provide a special component that allows to automatically connect any visualization and acts as a control center to filter, drill, and define the behaviour of your visualizations that will drastically improve you data analysis, you can check it here, but this component is not free.

However you can use the event API provided by the Toolkit to manually connect your charts and manage them in your own filter control system. You can learn more about events in this topic and check a working demo here.

Hope it helps

#3

Hi @eduardo, yes exactly what I wanted to accomplish. I followed the examples you mentioned and I made it work, I actually created 4 charts. I was also able to capture the events and the data being clicked and hovered. But to filter them with that data is where I’m stuck right now.

#4

Oh of course, I forgot to mention that one :slight_smile: You can follow this example on how to build the filters with the data obtained from the events. You can also check about the filter object to know more on how to use it.