question (not issue) : event management

[brucou]

Hi there, first of all congratulations for a really nice library with good-looking defaults.

I am evaluating several graph libraries and there is one thing that is mandatory for me to move forward with a given library, and I could not get that information from the API documentation.

I need to be able to capture (left and right) click on specific points of the graph, and associate that to an event handler which would receive in parameters the specific points which were clicked on. Then the clicked-on point might have to change its colour (to indicate selection).

Is there a way to do this with tauCharts??

(BTW : your slack channel seems to be dead and gone : https://www.slack.taucharts.com/)

Thanks!

[vladminsky]

Hi @brucou

Thank you for a kind words.

Have you seen an examples on https://api.taucharts.com/plugins/create-plugin.html page?
Does it look similar to what you need?

Actually taucharts doesn't support right-click handling at the moment. But left-click event expose data of the clicked point. The look and feel of highlighted point is controlled using special CSS class which can be customized.

[brucou]

Thanks for a quick answer. Alright, I should be able to do without right-clicking.
Yes I saw the examples previously but I am a bit dumbfounded here. None of those examples feature an event handler. Maybe I should look at tooltip plugin code? What I miss is the description of the parameters that event handler take, and where does that event handler appear. Is it in onSpecReady: function(chart, specRef) ?? Going to have a look now.

It would be great to have some, even succint description, of the API for API-users. The existing documentation is pretty good for end-users though.

---

Alright, I can see a node.on('data-hover, (sender, e)', and a node.on('data-click', (sender, e) with an e which seems to have a data property. chart seems to have a select and forEach properties to iterate through nodes (which I assume are points in the graph?). So the event handler would have to be set directly on each point/node. The entry point is the render plugin callback which is called in the context of the plugin (i.e. this set to plugin). There is also a addBalloon method on the chart object that I am curious to know what it does.

Alright, I just need to capture a click and the clicked-on piece of data, so I might be able to do so, but going forward, with more complex customization needs which will unavoidably arise, we might struggle to reverse engineer the API to understand how it all works. Any chance you can apply one of those automatic documentation tools, to produce an API doc? At the very minimum, events should be documented, because that is the most maintainable way to integrate or interface the graph with the surrounding environment.

In the current documentation also, in https://api.taucharts.com/plugins/create-plugin.html page, it would be good to be more specific :

• destroy, onRender, etc. what arguments do these functions take? The way it is written I thought they took no arguments. It seems that some do, and some don't

I have to say I love the grammar of graphics this is based upon, it is a big differentiating point, as is the design. I hope that you can free some time to work on the API doc a bit more.

[vladminsky]

@brucou you right. I have to reconsider documentation and some technical decisions.
Indeed the project api is not ready for public plugins development at the moment.

[brucou]

That is all right. Everyhing will come in its due time. As mentioned, one of the important part of the plugin features will be bi-directional event communication with outside environment, (read and write) access to data enclosed in the graph (and more generally the interesting parts of the graph state), and handling rerendering of the graph if its inner data changes due to the plugin operation.

In my use case (tracing tool, analyzing incoming log messages), my data is streamed so I update the graph for every (more or less) incoming piece of data. I also seek to allow brushing facilities, so I am interested in the user being able to select a rectangle of the graph and get the data point selected for some external tool to process and display reports.

To that purpose, for instance http://www.chartjs.org/docs/latest/developers/api.html i.e. chartjs exposes an .getElementAtEvent(e) and .getElementsAtEvent(e) to get the selected (brushed data), so one probably can declare an event handler on the chart css selector, and get the selected data from there. There also is a render method (http://www.chartjs.org/docs/latest/developers/updates.html) which updates the graph if the data has changed.

I am not seeking to recommend to copy this approach at all, I am just giving you this information to feed your reflection and technical decisions. As is, tauCharts is already an amazing piece of work.

[brucou]

@vladminsky Hi Vladimir. Was wondering if there any progress with this issue. If not, I am happy to close it.

[Mavrin]

Hi @brucou.
This issue is still relevant. Of course you can close issue. It is up to you.
Thank you.

[brucou]

Thanks @Mavrin for maintaining this superb piece of software. ALright I will leave it open still.