Dynamic modifying appearance of single data point

[cssyphus]

When click or hover over a data point in chart #1, I need to enlarge and colorize the datapoint in same position in (identical) data series on Chart #2.

This will use the updateChart() function, but I'm unsure how to reference the data point and how to apply the new formatting.

Here is a jsFiddle to illustrate:

http://jsfiddle.net/7uoa8o7o/

PS - I am new to chartNew.js. I chose it over chart.js v2, Google charts, D3.js and other charting solutions because (1) excellent enhancement of chart.js (fully backwards compatible), and (2) your impressive support and active development. Today I created a tag for chartNew.js on StackOverflow and have referred a few questioners to this github.

[FVANCOP]

Hi @gibberishbc ,

Thanks for your compliment, but since the new version of Chart.js, the compatibility is no more 100 % :-)

For your issue, I'm sure it is possible; I'll try to make a sample in the coming days.

François

[cssyphus]

Merci bien François,

You’ve done a remarkable job on ChartNew. I will continue to direct other StackOverflow questioners toward ChartNew.

[cssyphus]

One more quick request. I’ve been having difficulty understanding the chartNew.js / chart.js “object model” (not sure if that is correct term).

Would you mind adding a couple of notes about how this works (from samples\mouse_actions.html):

window.alert("["+data.labels[other.v12]+","+data.datasets[other.v11].data[other.v12]+"]")

In the variable mydata1 defined above, I see that data.labels and data.datasets are defined in the variable. But how do you get:

data.labels[other.v12] and data.datasets[other.v11].data[other.v12]

How do those work?

[markosko]

hope that @FVANCOP dont mind data.labels[other.v12] and data.datasets[other.v11].data[other.v12]

are from function parameter function fnMouseDownLeft(event,ctx,config,data,other)

there you see "data" parameter, data are from data variable of graph on which is clicked

[cssyphus]

Thanks for the speedy reply. I did understand that these come from the fnMouseDownLeft() function:

data.labels and data.dataset

The part I do not understand is where these come from:

labels[other.v12] and datasets[other.v11].data[other.v12]

Especially, “other.v12” is documented as the position in the series (v3 is the value at that datapoint). But the line above displays the value! Why is it not “.data[other.v3]” ? But even more than that, why

datasets[other].data[other]

How does that work?

[markosko]

other.v11 other.v12 are positions of clicked point on graph v11 is number of dataset and v12 is point on dataset data variable are copied from graph mydata1/mydata2 variable to function based on clicked graph and here link to changing graph its not best maybe but works http://jsfiddle.net/a02Lo2ah/2/

[cssyphus]

I am grateful for that example. I am studying it BUT I am embarrassed to say that I still don’t understand enough.

You did exactly what I need to do: make the corresponding point on chart2 turn red on click.

But I also must make those same points turn red / return to normal on hover. As the mouse highlights each point in graph1, the same point in graph2 must turn red – and then go back to normal when the next point is highlighted and turns red. As the mouse moves from point to point (graph1), the red dot should follow the mouse (graph2)

Then, I must click on a point and get the data from both graphs. (In my example, they have identical data sets. This is not true in the real data – the x-axis IS always identical, but the y-axis data is different. So I need to grab both sets of data.)

I am sorry to ask so much, but I hope with one more example I can understand better.

Thank you.

[markosko]

http://jsfiddle.net/a02Lo2ah/12/ with hovering over point set color of point on other graph to red color should work with multiple datasets

if something u can send me mail so we dont spam here to other people, u can see mail in my profile

[FVANCOP]

A new sample has been added; This is a solution for your problem.

see : Samples\issue396.html

I agree with @markosko : please take contact with us by mail for additionnal information about this issue otherwise lot of people receives mails they don't want to get.