search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

Pareto Chart #347

Closed JoshSchoen closed 7 years ago

JoshSchoen commented 7 years ago

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here

Current behavior Not able to create a Pareto Chart. I have tried to create this by using a line chart stacked on top of a bar chart but I don't see a way to move the Y axis labels to the right side of the line chart to create a makeshift combination chart.

Expected behavior Ability to create a Pareto chart or other combination charts. I'm not sure if it is best to create a stand alone Pareto chart component or stack a line chart on top of a bar chart and have an Input to move the Y axis to right side of the chart. I lean towards the Input method to allow flexibility for creating other types of combination charts but there are some UX considerations like tooltips on hover and perhaps scaling issues that might be problematic. Any suggestions?

Example: pareto-chart

What is the motivation / use case for changing the behavior? Ability to add a Pareto chart or other combination charts.

Please tell us about your environment: Mac OS 10.12.2, using https://github.com/Teradata/covalent

JoshSchoen commented 7 years ago

@marjan-georgiev On our road map I can see the need for other combination type charts with dual axis. Is it possible to get a little more information on this? Happy to put the work in creating a PR but want to understand which direction is best to move forward with. Thanks!

Hypercubed commented 7 years ago

Hi @JoshSchoen , what I have done myself is to create a new component by coping an existing ngx-chart component then adding and removing component as needed to the templates. Here is an example of work in progress while creating the scatter/bubble chart: http://plnkr.co/edit/jcXZy6 . I hope this helps.

Hypercubed commented 7 years ago

Also, if you need to access a property on a component that is not an @Intput() you can use template reference variables or @ViewChild. An example is here: http://plnkr.co/edit/yNkJ5G where I needed to modify the margin property. Just a tip.

JoshSchoen commented 7 years ago

@Hypercubed Great! Thanks for the tips... I will take this and try and run with it. I will share my results if you're interested.

JoshSchoen commented 7 years ago

@Hypercubed started to play with this a bit but running into some issues with trying to combined a bar chart and lines. Have you ever attempted using bar and lines on the same chart before?

JoshSchoen commented 7 years ago

@Hypercubed Never mind on the bar and line chart. I figured it out. It's the very beginnings of a Pareto but I have to say once got my head around how things work I could see how these components can work really well together in different combinations. I think the biggest challenge now will be creating Y axis for the right side of the chart. parerto-chart2

marjan-georgiev commented 7 years ago

@JoshSchoen that looks like a great start!

What you will need is a new scale with its own range and domain, and a y axis with the yOrient property set to right:

https://github.com/swimlane/ngx-charts/blob/master/src/common/axes/y-axis.component.ts#L60

This is an internal property at the moment, but I am going to expose that as an input in the next version.

marjan-georgiev commented 7 years ago

Pushed that to master:

https://github.com/swimlane/ngx-charts/blob/master/src/common/axes/y-axis.component.ts#L53

JoshSchoen commented 7 years ago

@marjan-georgiev Yeah I found that and added a new axis by duplicating the component and changing yOrient to right so exposing it would be great to reduce the duplication that is needed.

Current work in progress: parerto-chart

The trick is syncing and scaling the axes depending on how the data is related so not sure if allowing the developer to control that or having controlled options for the developer to choose from is the best method, you can kind of see that in the above gif where the max yDomain is > the max actual value. I did something like the below on the getYDomain method. to control the max yDomain for the bars. I figured this was the most flexible as the axis syncing strategy could change. Let me know if you think there is a better way.

if(this.yLeftAxisScaleFactor) { return [min, this.yLeftAxisScaleFactor(max)]; } else { return [min, max]; }

I found some UX issues with tooltips when the lines are over the bars. You could either reduce the height of the tooltip area on the line which kind of works in some cases but is less that optimal or create a custom tooltip to show both bar and lines as shown in the above gif. Again, the problem comes if you have multiple series and how to display them. Perhaps the series tooltip could work for this. I'm sure is relatively easy to solve but haven't gotten that far yet.

My goal is to create a reusable dual-axis chart for multiple use cases not just a Pareto chart. Do you think a dual-axis chart like this is something that will be on the roadmap or is it your intention to just expose some additional properties and create custom components to achieve this?

Thanks again, this is good stuff!

JoshSchoen commented 7 years ago

Hi @marjan-georgiev, I spent some time creating a dual-axis bar/line chart, see below. I figured it was best to create generic dual-axis combo chart that could handle a Pareto for reusability purposes.

As I was going through the creation process I ran into a number of barriers to get this to work to my satisfaction but in the end I think it does what is required for a dual-axis chart such as this. As @Hypercubed mentioned all the pieces were there to create this chart, just needed to put it altogether. : )

Options include:

dual-axis-chartv2

I know this has come a lot in the issues so I wanted to try and give back for everyone that is looking for such a solution as we are over at Covalent where we are using NGX Charts extensively and need dual-axis combo chart option.

Let me know if this is something you'd consider adding to your feature roadmap and I will create a PR. Thanks!

marjan-georgiev commented 7 years ago

Beautiful, awesome work @JoshSchoen!

Yes, this type of chart has been requested in the past, but the reason we didn't add it to the library is that we would also need to add support for the other types of bar charts (grouped, stacked, normalized, and the horizontal versions), so we would end up with 6 new chart types that we would have to maintain.

However, this would be a great example of how you can use the available components to create a custom chart. If you would be willing to PR this as a component in our demo page (like the sparkline chart in there: https://github.com/swimlane/ngx-charts/tree/master/demo), we would love to feature it.

Please let me know what you think.

JoshSchoen commented 7 years ago

@marjan-georgiev thanks and I can understand your hesitation on wanting to add this type of chart.

However, there was some code I had to add to various standard components in order for this to work properly. For example, you exposed the yOrient for the right axis but the grid lines need to have a negative gridLineWidth value for the grid lines to go from right to left which was not exposed. There were a few other cases where I needed additional hooks as well. If we go the demo route there will need to be some work done on the standard components to support these chart types without a lot component duplicating. I don't think it will be much and shouldn't cause any breaking changes, but it does require some work which I will happily do myself. Is this something you are open to? If so I will take it upon myself to create the additions to the standard components to support the dual axis chart along with documentation and create a separate PR for that. I will also need to refactor some code based on that PR to submit the demo PR. Is that acceptable?

I have two additional questions:

  1. How can a custom chart like this be maintained and upgraded with of the standard set of components? I'm concerned that the custom chart code could break without a way to fix it.

  2. Is the demo area part of your testing process with new releases? I'm happy to be part of this if needed, just want to understand how testing occurs so I can react if required.

Once again, I want to keep contributing to your repo but I would like to understand the best way forward in terms of upgrading and maintenance of custom chart types.

marjan-georgiev commented 7 years ago

Absolutely, please make any changes to the standard components you think are necessary to accomplish this.

To answer your questions:

  1. We will be making sure that all demos are updated as we make changes to the framework. As for custom charts built in other applications, ngx-charts follows semantic versioning, so any breaking change that we introduce will be released in a major version of the library.
  2. We don't have many unit tests at the moment, but we do manually go through all charts in the demo page to make sure nothing is broken before we release.

Thanks, and looking forward to the PR!

JoshSchoen commented 7 years ago

@marjan-georgiev Great! I am committed to help with testing and upgrading any components as well so please reach out when that comes up. I see using this libraries for a lot of different projects. Knowing we are able extend the features in this way is awesome and I plan to help build that out where possible!

I will add the PR in the next few days after I refactor some code to fit this demo scenario.

Appreciate your time and all the work you have done.

niralmunjariya commented 5 years ago

@Hypercubed Never mind on the bar and line chart. I figured it out. It's the very beginnings of a Pareto but I have to say once got my head around how things work I could see how these components can work really well together in different combinations. I think the biggest challenge now will be creating Y axis for the right side of the chart. parerto-chart2

@JoshSchoen Can you please share how you achieved this? I want to draw a reference line on the bar chart without having two Y-axis. Thank you.

danieldiazastudillo commented 5 years ago

Any directions for creating or implementing a linear regression with scatter. Of course all data is provided but had no luck combining the components as suggested in docs and examples. It would be a bubble + line chart.

image

Bernoulli-IT commented 1 year ago

Is there any code available for the combo chart (bar(s) + line(s)) that conforms to Typescript syntax. When the available sources are put in an (existing) Angular 12 project a bunch of syntax errors are present unfortunately.