[Patternfly] Charting library for PatternFly

Tue Feb 17 14:52:44 UTC 2015

> On Feb 16, 2015, at 7:58 PM, mike thompson <mithomps at redhat.com> wrote:
> 
>> 
>> On 16 Feb 2015, at 10:37, Robb Hamilton <rhamilto at redhat.com> wrote:
>> 
>> 
>>> On Feb 16, 2015, at 12:23 PM, mike thompson <mithomps at redhat.com> wrote:
>>> 
>>> 
>>>> On 16 Feb 2015, at 07:06, Robb Hamilton <rhamilto at redhat.com> wrote:
>>>> 
>>>> 
>>>>> On Feb 16, 2015, at 3:52 AM, Gabriel Cardoso <gcardoso at redhat.com> wrote:
>>>>> 
>>>>> Did you talk to someone from the RHQ Metrics team? They work with charts, and other projects will use their solution (LiveOak, Hawkular). 
>>>> 
>>>> thanks, gabriel!  i have not spoken with anyone, but it sounds like they’d be a great resource.
>>>> 
>>>>> I’m adding Mike Thompson to the thread, he works on that project.
>>>> 
>>>> mike, any insights would be greatly appreciated.
>>> 
>>> 
>>> Hi Robb,
>>> 
>>> I thought there already was a compiled list that Emily Dirsh did that looked pretty complete to me:
>>> 
>>> https://docs.google.com/a/redhat.com/spreadsheets/d/1VORiNFZxhpTLD0a3mDLgeY8g8rmMG-p7c36dWoCpd3Y/pubhtml
>> 
>> thanks, mike!  i was moreso looking for specific recommendations based on experience.  have you used any of these?  
> 
> I would recommend a d3 based solution as there are tons of resources on d3 and since it is a toolkit and not an API/library. d3t can be customised to do all kinds of visualisations not just traditional charts. The toolkit aspect also means that it can be a steeper learning curve than other API based solutions. However, there are many API wrappers around d3 that fill this gap and make it easier to use — selecting one of these solutions is probably to best bet.
> 
> d3 Gallery: http://christopheviau.com/d3list/gallery.html
> 
> My experience with these libraries via RHQ/JON (ordered by Chronological time) is: 
> flot(http://www.flotcharts.org/) —> Cubism(http://square.github.io/cubism/) —> Rickshaw (http://code.shutterstock.com/rickshaw/examples/) —> nvd3(http://nvd3.org/) —> native d3
> 
> We started out with Flot but wanted more customization. Cubism was d3 based and looked cool for realtime but we quickly realised what it conveyed was difficult to understand the real meaning of the data (example chart: https://www.evernote.com/l/AAhn0q9rq_lMLoE0oh6p7XFPkejzhDE7QNg). Rickshaw was d3 based but when we changed designs it didn’t have the graph types we were looking for. nvd3 gave us any easy API over d3 so it was easy to get started with and provided a lot of out-of-the-box functionality. Later, when we wanted to customise the nvd3 code it was very difficult and new versions produced many conflicts. At this point, I was already familiar enough with d3 to just use it natively (without a wrapping API) and have been happy with this approach since then (2 years now).
> 
> Early prototypes were very custom designs (that required custom d3 code) like: 
> https://www.evernote.com/l/AAiIijdKhTFLSIytE4ydEGm3fgTGLOUNBm4
> but have ended up with a more reasonable:
> https://docs.jboss.org/author/display/RHQ/d3+Charts
> 
> The current focus is on Hawkular Charts: https://github.com/hawkular/hawkular-charts which is a set of angular directives specifically focused on Hawkular metrics display and interaction (pay no attention to the colors or chart types we are in the process of changing all of this to new UXD recommendations). Essentially a set of Angular directives to quickly create dashboards and other visualizations with interactivity to the backend (minimal coding).
> 
> 
> IMO: I would *not* recommend nvd3 (although it is popular on github) because from my experience, the code is not very maintainable.
> 
> My current favs (of libs I have played with and like but not used in production):
> 
> dimple : http://dimplejs.org/examples_index.html
> c3 : http://c3js.org/examples.html
> d4 : http://visible.io/examples.html
> 
> and for time series:
> metricsgraphics.js : http://metricsgraphicsjs.org/examples.htm
> 
> 
> Some general (but maybe not so obvious) questions to ask about the various implementations:
> 1) How are tooltips supported
> 2) How is drill down supported (can I click on a line and have it take me somewhere else?)
> 3) How do I change the selected data range (i.e., click and drag a date range over a graph) + Zoom/pan
> 3) How easy is it to add support for something custom like a right click menu option (on a line or point)
> 5) On multi-line charts, can de-select lines from a legend
> 6) How easily can it support a Dark-mode/Light mode
> 7) Are the graphs responsive (if I resize will the chart resize automatically)
> 8) Can it do real-time updates (or do you need to re-render whole graph)
> 9) Do you need bullet charts or other specialised chart types?
> 10) How easy is it to animate data transitions?
> 11) Does it need to render on IE8?
> 12) Is mobile support needed (i.e., touch events, responsive)
> 
> 
> Hope that is what you were looking for…

this is fantastic!  many, many thanks, mike!

> 
> — Mike
> 
> 
>> 
>>> 
>>> — Mike
>>>> 
>>>>> 
>>>>> Thanks,
>>>>> Gabriel
>>>>> 
>>>>>> On Feb 13, 2015, at 11:19 PM, Andres Galante <agalante at redhat.com> wrote:
>>>>>> 
>>>>>> Hi Robb,
>>>>>> 
>>>>>> I did use google charts and charts.js for very simple implementations. 
>>>>>> 
>>>>>> I don't know how they work on complex or large projects, but I guess that google should support them without a problem.
>>>>>> 
>>>>>> Have nice weekend,
>>>>>> 
>>>>>> Andrés
>>>>>> 
>>>>>> ----- Original Message -----
>>>>>> From: "Robb Hamilton" <rhamilto at redhat.com>
>>>>>> To: patternfly at redhat.com
>>>>>> Sent: Friday, February 13, 2015 6:13:13 PM
>>>>>> Subject: [Patternfly] Charting library for PatternFly
>>>>>> 
>>>>>> Hi, all.
>>>>>> 
>>>>>> PatternFly needs a charting library.  Do any of you have recommendations on which one to choose?  Are there libraries you *wouldn’t* recommend.
>>>>>> 
>>>>>> Thanks!
>>>>>> Robb.
>>>>>> 
>>>>>> _______________________________________________
>>>>>> Patternfly mailing list
>>>>>> Patternfly at redhat.com
>>>>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>>>> 
>>>>>> _______________________________________________
>>>>>> Patternfly mailing list
>>>>>> Patternfly at redhat.com
>>>>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>>> 
>>>>> ---
>>>>> Gabriel Cardoso
>>>>> User Experience Designer @ Red Hat