Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need to show multiple colours for differentiating between data on the same line graph. #998

Open
SaiVikas0801 opened this issue May 13, 2020 · 3 comments

Comments

@SaiVikas0801
Copy link

Hi,

I have requirement to show multiple colours on the same line graph. This is basically to differentiate the various stages of data.

I haven't found any such option available in dygraph. Can someone help on how to achieve this.

@andnorxor
Copy link

andnorxor commented May 15, 2020

Solution 1:
Split your data in different time series for each color and assign the colors as usual. This may blow up your underlying dataset, but is quite easy to implement. You may have to add a value/or LegendFormatter to display values properly.

Solution 2:
If your drawing only points you can use the drawPointCallbacks. Refer to the docs or Stack Overflow on how to achieve this.

Solution 3:
Implement a custom plotter. http://blog.dygraphs.com/2012/08/introducing-custom-plotters.html

Solution 3 is the cleanest way to achieve your goal.

@SaiVikas0801
Copy link
Author

Thanks for the response andnorxor.

If possible can you share some more light on solution 1. Any example or sample link would be really useful. Thanks

@andnorxor
Copy link

andnorxor commented May 15, 2020

Sry, I have no minimal example to share.
I did this already, but there's too much code overhead (additional functionalities) to share it as an example.

Maybe this will help you to get a better understanding.

The following represents values over time:

Time: 0 1 2 3 4 5
Serie: 5 2 3 1 2 8

To get different colors you just have to split this series and fill the missing values with nulls.

Let's say we want show the values from time 1 to 2 and from 4 to 5 in another color. Then you have to transform your underlying data s follows:

Time:     0      | 1       |  2          | 3         |  4        | 5
SeriesA:  5      | 2       |   null      | 1         |  2        | null
SeriesB:  null   | 2       |  3          |  null     |  2        |  8

Then you have to format the legend, otherwise a value for each series shows up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants