Vislib Point Series Charts #9642

ppisljar · 2016-12-26T19:07:16Z

Summary:

In Kibana Visualize, the ability for users to customize and style charts has been greatly improved. Users can now overlay multiple chart types on a single plot, use horizontal layouts, and modify the styling of axes and gridlines.

Vislib Point Series Charts - adds new functionality to Axis, Line and Bar charts

Multiple chart types per plot #4566
Add option to suppress scale values #9026
Second Y-Axis #2390
Horizontal bar chart #1396
Optional chart grids #5747

epixa · 2016-12-26T20:16:52Z

Let's scale up test coverage on this. A 2000 line PR will likely have a considerable amount of test changes/additions.

epixa · 2016-12-26T20:17:20Z

Is this PR reviewable at this point, or are you just putting it here as a WIP?

ppisljar · 2016-12-26T20:19:29Z

just WIP

UI review
selenium tests
review code style

jimmyjones2 · 2016-12-27T13:19:21Z

Is it possible to address #2021 in this PR as well?

ppisljar · 2016-12-27T14:20:05Z

i would prefer to keep this PR as small as possible (its already big). once this is merged adding things like #2021 will be quite easy.

ppisljar · 2017-01-09T09:40:43Z

I updated based on suggestions I got in the UI review:

wording was updated
ordering of options was updated
capitalization was fixed
axis under options shows which series belong to it
rotate label is a dropdown with horizontal, vertical, sideways options

also X/Y axis in the data screen were renamed to Category/Value axis. there were some mixed opinions regarding this in the UI review. for now i am implementing it like this, if there is strong objection let me know.

thomasneirynck · 2017-01-11T18:00:31Z

jenkins, test this

thomasneirynck · 2017-01-11T18:02:33Z

needs a merge/rebase

thomasneirynck · 2017-01-12T05:09:09Z

Below comments are for area-charts in particular, not the smaller changes to the other charts.

I think the splitting the options in tabs is a good idea. It avoids overwhelming the user. It is a great improvement over the earlier design with everything in a single tab.

I really like the power of the charts. It solves many pain points of current users, notably overlapping multiple chart types and offering a more data-driven design.

After working with the new Area-charts for a while, I am concerned about the current naming and UI, which remains complex. It is hard to work with. I think partially due to:

We introduce unfamiliar terminology like Value-axis and Category-axis.
We use "generic"-sounding terms like 'Series', 'Dot size' for very specific things
The four tabs are interdependent. I see how the Data-tab informs the other tabs, but we are making modifications to the value-axes in both Axes, Series, and Other Options.

With the risk of this being just another opinion to throw on the pile, I propose a different scheme of organizing the UI, without taking away any of the power.

We introduced new names for things that already have names. We are creating common f(x)=y charts. IMHO, there is a more familiar vocabulary already in place for these charts.

X is the independent variable, `
Y is the dependent variable, or the measurement for a given feature X.

In the new scheme, we should replace all occurences as follows:
Value-axis -> Y-axis
Category-axis -> X-axis

I don't think we need to worry too much about how XY would imply the actual rotation of the chart.
Right now, we need to define this in the 'Axes' tab at the Category Axes-section. This selection then cascades down to the Value Axes.

This whole flow I would just change to a single combo-box: [horizontal layout|vertical layout]. For the time being, I would omit the option of having the category-axes be either right or top aligned.

Series does not seem like a good name to indicate the chart-type. Also, these are in fact options for the Value Axes, so it seems it is somewhat floating apart. I would do away with this section, and move these options to the existing modifiers in the Axes tab.
Dot size is odd name. Not sure what to do here ;)
I am not sure if we need to be as fine-grained to allow users to manually configure each value-axis. Why can't we just correspond to a metric to a Value-axes?
allowing any number of value-axes makes the UI perhaps a little too generic. I feel limiting this to 2 would focus the chart's purpose more, and keep the UI more simple.

Given these thoughts, I think we should consider following rearrangement:

We retain the four tabs, but rearrange some of the contents:

Data

the same as now
(but with something better than 'dot-size')

X-axis

this contains now the options of Axes-Category Axis
remove the Position combo-box
add a show-gridlines checkbox

Y-axes
For each Y-axes (corresponding to a metric in Data)

This contains the options of Axes>ValueAxis*
This also contains the options of what is now in the Series-tab.
remove the Position combo-box
use Chart Type instead of Series to indicate options like type & mode.
add a show-gridlines checkbox

Options

keep Other options>Settings
remove Other options->Grid
add a 'horizontal' or 'vertical' layout combo-box. This would flip the chart. As for label position, let's assume label positions are relative to the axis-line, not the chart (then they can rotate along).

All the above is somewhat speculative, and I don't expect it to be the best solution.

The gist I think is this. This is an awesome introduction of advanced charting, but very dense in terms of new functionality.

Let's consider:

make this more simple: mainly, imho, this is restricting the number of value-axis.
try and use more commonplace naming.
avoid as many dependencies between the different tabs.

ppisljar · 2017-01-12T10:19:32Z

Im gonna try to answer to your comments above one by one .... let me know if i missed anything:

Value Axis/ Category Axis terminology ... seems we have a lot of different opinions around this one. I am gonna change it back to X/Y axis (thats how it was before UI review and before this PR) and lets stick with that. If we decide to change that it should be a separate PR.
'Dot Size' ... nothing has changed, it was like this before this PR. i would prefer to keep this PR centered on what it is and do all the not-directly-changed-by-this things out of this scope and handled in separate PR.
yes, the four tabs are interdependent ... after all they are all options for one chart. however I don't agree that series and other settings tabs are modifying axes ... ? which option do you think it does that ?
for series ... you can choose the value axis ... but thats it. you cant change it
for other options .... you can set the grid lines on value axis ... but you cant change the value axis

X/Y naming ... i don't know ... i would associate X with horizontal usually. But as proposed above, lets not change the naming (so lets stick to the X/Y we had before this PR) ... and lets update the naming in separate PR if we decide to do so.
Series is what is used in every other charting tool I saw, but i agree it doesn't apply best here but i have no suggestion for a better term. there are no options for the value axes. You only select WHICH value axis a series is using. think of it as foreign key .... we cant move this settings to the axes ... (well we could move it under the same tab .... but then splitting tabs didn't make that much sense (we have just the grid in the last tab ... and this is actually the tab that would grow the most (adding multiple series) so i like it being separate.
Dot size .... this PR didn't touch it.

we don't want every metric on separate axis.
axis options are nothing new ... only now with multiple axes you have them defined per axis. i think its a must have if you have multiple axes (multiple axes ... but all with same config ... sounds wrong)
we definetely don't want to stick that options to Data tab. lets keep that about data selection only.

i am sure we need more than 2. i am also sure we don't need unlimited. however my feeling about this is that this are advanced options, so lets give the responsibility to use them correctly to the user. if he wants 10 axes ... im ok with it. If we would to imply a limit i would go with 4 and nothing less.

grid lines: i don't think it would be better this way. so right now you have one place to set your grid. you would split it up to two places. (two tabs actually) which i think will be confusing for the user. also it will allow them to add multiple value axis grid lines which is not very usefull.
I think that when you want grid on your chart ... you look for grid ... and you are not thinking about grid when you are configuring your x/y axes.
we cant remove position, its already there ... so that would be a regression.

------- finally:

making more simple: i dont think restricting of value axis will make it simpler.

whole options i would consider advanced setting, simple user would not go there ...
so if only an advanced user would go there ... i think its valid to expect he might need more than 2 axes
also interface which allows you to add only one would not be any simpler i think ?

use better naming: lets go back to X/Y axis .... lets not change the naming of things that were not directly changed by this PR (like dot size) ... and lets try to improve the naming of the new options this PR added.

dependencies between tabs: as little as possible. however i series specifying value axes in a series tab ... i woulnd't count that as a dependency. you have value axes, you have series, they are connected ... but separate.

ppisljar · 2017-01-12T10:23:11Z

@thomasneirynck i hope above comment doesn't sound like "no i am gonna keep it this way". I really liked your long comment, it had me rethink some things which is really good. I am also open for discussing anything about you think we should further discuss. But I do have some strong opinions on this as I already put quite a lot of taught into this ... please bear with me :)

ppisljar · 2017-01-12T10:28:36Z

yesterday we had a zoom session with CJ and we came up with these changes (already implemented)

reverse axis and series tab (series should come first)
reverse value axis and cat axis (to match order we have on Data tab)
new axis in dropdown takes you to the axis tab (so you dont need to go back and forth)
instead of other options rename to settings
expand grid options by default

ppisljar · 2017-01-12T10:33:49Z

PS: selenium tests are failing due to rearrangement of UI .... i'm gonna wait a bit in case we do some more reorganization before fixing them.

thomasneirynck · 2017-01-12T15:01:13Z

@ppisljar that's alright, I'm not wedded to any of the suggestions ;)!

kobelb · 2017-01-13T21:34:39Z

Nice work! I'm really impressed with the level of configuration that you've exposed to the user, and the unification of the three chart types is awesome.

A lot has changed since the last UI review, and I feel like it'd be beneficial to present what's currently implemented to a larger audience. Could we potentially host this version like you did for the Heatmap demo?

There are a few UI inconsistencies between the tabs that could be addressed to increase usability. However, I also have some hesitation regarding the experience of configuring the Axis, but I might be alone in this opinion, hence my recommendation that we demo this to a larger audience.

ppisljar · 2017-01-14T15:25:05Z

https://ppisljar.hopto.org .... its still there

I got some feedback from the previous version of demo running there, but apart from some bugs ppl noticed nothing concrete except that they liked the new features. We probably should ask more concrete questions if we are looking to get more concrete answers.

ppisljar · 2017-02-15T09:12:42Z

thanks @thomasneirynck

I updated based on your comments and fixed the error. I agree that area chart error should be handled in separate PR.

this is ready for another look.

thomasneirynck · 2017-02-15T15:16:35Z

jenkins, test this

thomasneirynck

👏

Backports PR #9642 **Commit 1:** adding vislib chart grid * Original sha: 066c3fe * Authored by ppisljar <[email protected]> on 2016-12-24T17:38:16Z **Commit 2:** updating vislib to correctly render all new features * Original sha: 6d642ca * Authored by ppisljar <[email protected]> on 2016-12-24T17:40:32Z **Commit 3:** adding new options to kibana visualizations * Original sha: ec9a614 * Authored by ppisljar <[email protected]> on 2016-12-24T17:41:33Z **Commit 4:** update vis icon on save * Original sha: 401ed70 * Authored by ppisljar <[email protected]> on 2016-12-24T19:20:05Z **Commit 5:** updating documentation * Original sha: 978e9e2 * Authored by ppisljar <[email protected]> on 2016-12-25T09:49:48Z **Commit 6:** fixing unit tests * Original sha: d2168d7 * Authored by ppisljar <[email protected]> on 2016-12-25T12:12:20Z **Commit 7:** cleaning up * Original sha: 3d90a32 * Authored by ppisljar <[email protected]> on 2016-12-25T21:06:32Z **Commit 8:** updating based on UI review * Original sha: d00dc51 * Authored by ppisljar <[email protected]> on 2017-01-09T09:38:12Z **Commit 9:** adding visualize editor unit tests * Original sha: 5e76d9c * Authored by ppisljar <[email protected]> on 2017-01-09T14:42:46Z **Commit 10:** selenium tests * Original sha: 68e953b * Authored by ppisljar <[email protected]> on 2017-01-09T15:47:55Z **Commit 11:** additional option tabs * Original sha: af6ad11 * Authored by ppisljar <[email protected]> on 2017-01-11T12:59:06Z **Commit 12:** some more changes to the tabs/options [thanks CJ] * Original sha: 3a5ab5c * Authored by ppisljar <[email protected]> on 2017-01-12T10:26:34Z **Commit 13:** going back from Category/Value axis to X/Y axis * Original sha: 08b01f0 * Authored by ppisljar <[email protected]> on 2017-01-12T10:36:53Z **Commit 14:** fixing unselected dropdown options * Original sha: 8544079 * Authored by ppisljar <[email protected]> on 2017-01-16T11:38:43Z **Commit 15:** updating based on last UI review * Original sha: e9de4f7 * Authored by ppisljar <[email protected]> on 2017-01-20T12:47:02Z **Commit 16:** updating based on last review * Original sha: 2b97717 * Authored by ppisljar <[email protected]> on 2017-01-25T11:07:35Z **Commit 17:** updating based on last review * Original sha: 5a499db * Authored by ppisljar <[email protected]> on 2017-01-25T11:15:27Z **Commit 18:** fixing issue with axis titles * Original sha: a2a2681 * Authored by ppisljar <[email protected]> on 2017-01-25T13:38:05Z **Commit 19:** allowing to specify only upper or only lower data bound * Original sha: 87804d1 * Authored by ppisljar <[email protected]> on 2017-01-25T14:24:43Z **Commit 20:** updating based on brandons review * Original sha: 7e74262 * Authored by ppisljar <[email protected]> on 2017-02-10T11:05:54Z **Commit 21:** fixing horizontal bar chart labels * Original sha: 3d437e5 * Authored by ppisljar <[email protected]> on 2017-02-13T11:30:08Z **Commit 22:** fixing test * Original sha: b93c84d * Authored by ppisljar <[email protected]> on 2017-02-13T13:18:43Z **Commit 23:** adding backward compatibility * Original sha: b9a78c4 * Authored by ppisljar <[email protected]> on 2017-02-13T17:40:40Z **Commit 24:** updating based on last review * Original sha: 37634bf * Authored by ppisljar <[email protected]> on 2017-02-15T09:10:15Z **Commit 25:** fixing selenium tests * Original sha: c3c818c * Authored by ppisljar <[email protected]> on 2017-02-15T15:55:41Z

tbragin · 2017-02-17T13:21:23Z

Some examples of charts that this pull enables:

ndimer · 2017-02-20T16:47:44Z

Hey Guys! When these changes will be in the GA version of Kibana? Is there any released version of Kibana with secondary y-axis support?

Thanks!

ppisljar · 2017-02-20T18:53:26Z

unfortunately not. if everything goes well this will be part of 5.4 ... lets keep our fingers crossed :)

ndimer · 2017-02-20T21:51:00Z

Thanks Peter! Any estimated release date?

…

On 20 Feb 2017, at 20:53, Peter Pisljar ***@***.***> wrote: unfortunately not. if everything goes well this will be part of 5.4 ... lets keep our fingers crossed :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

epixa · 2017-02-21T00:10:41Z

@ndimer Sorry, but we don't put estimates on release dates since they can change over time based on circumstances and features.

pmriyazu · 2017-03-14T07:50:32Z

Hi
In which version dual Y axis is available.otherwise can u tell me the changes to make in our current version. bcoz I have demo in two days and I need to implement that. could you plz provide me the changes.

ppisljar · 2017-03-14T21:42:19Z

@pmriyazu its sufficient to ask the question on one thread.
as i replied in the others, this will be available in 5.x if everything goes well.

ppisljar requested a review from thomasneirynck December 26, 2016 19:42

ppisljar added v6.0.0 Feature:New Vis Request for a new visualization type Feature:Visualizations Generic visualization features (in case no more specific feature label is available) labels Dec 26, 2016

epixa changed the title ~~Vislib Point Series Charts~~ WIP Vislib Point Series Charts Dec 26, 2016

thomasneirynck self-assigned this Dec 26, 2016

ppisljar force-pushed the vislib-pointseries branch from 6a2d3d6 to 6924f80 Compare December 27, 2016 09:05

ppisljar force-pushed the vislib-pointseries branch from 6924f80 to f13a9cd Compare December 30, 2016 13:44

ppisljar added the v5.3.0 label Jan 9, 2017

ppisljar force-pushed the vislib-pointseries branch from 63de159 to f3e8b6c Compare January 10, 2017 14:01

ppisljar added the review label Jan 10, 2017

ppisljar changed the title ~~WIP Vislib Point Series Charts~~ Vislib Point Series Charts Jan 10, 2017

ppisljar requested a review from kobelb January 12, 2017 12:23

ppisljar assigned kobelb Jan 12, 2017

ppisljar added 2 commits February 15, 2017 10:11

adding backward compatibility

b9a78c4

updating based on last review

37634bf

ppisljar force-pushed the vislib-pointseries branch from 30883ad to 37634bf Compare February 15, 2017 09:11

thomasneirynck approved these changes Feb 15, 2017

View reviewed changes

fixing selenium tests

c3c818c

ppisljar force-pushed the vislib-pointseries branch from 1dd6f01 to c3c818c Compare February 15, 2017 16:23

ppisljar merged commit 4c85fd4 into elastic:master Feb 15, 2017

elastic-jasper mentioned this pull request Feb 15, 2017

[5.x] Vislib Point Series Charts #10370

Merged

This was referenced Feb 15, 2017

Horizontal bar chart #1396

Closed

Second Y-Axis #2390

Closed

Add option to suppress scale values #9026

Closed

Multiple chart types per plot #4566

Closed

ppisljar deleted the vislib-pointseries branch February 15, 2017 17:30

trevan mentioned this pull request Feb 15, 2017

Vislib Point Series Charts minor issues #10375

Closed

tbragin mentioned this pull request Feb 16, 2017

Heatmap y-axis labels broken on master #10413

Closed

weltenwort mentioned this pull request Feb 20, 2017

Selecting Set Y-Axis Extents ignores min value if zero #10468

Closed

weltenwort mentioned this pull request Mar 27, 2017

Label rotation in visualizations #10897

Closed

tbragin mentioned this pull request May 4, 2017

Change visualisation chart type #1607

Closed

ppisljar restored the vislib-pointseries branch September 26, 2018 10:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vislib Point Series Charts #9642

Vislib Point Series Charts #9642

ppisljar commented Dec 26, 2016 •

edited by thomasneirynck

Loading

epixa commented Dec 26, 2016

epixa commented Dec 26, 2016

ppisljar commented Dec 26, 2016 •

edited

Loading

jimmyjones2 commented Dec 27, 2016

ppisljar commented Dec 27, 2016

ppisljar commented Jan 9, 2017 •

edited

Loading

thomasneirynck commented Jan 11, 2017

thomasneirynck commented Jan 11, 2017

thomasneirynck commented Jan 12, 2017

ppisljar commented Jan 12, 2017

ppisljar commented Jan 12, 2017

ppisljar commented Jan 12, 2017

ppisljar commented Jan 12, 2017

thomasneirynck commented Jan 12, 2017

kobelb commented Jan 13, 2017

ppisljar commented Jan 14, 2017

ppisljar commented Feb 15, 2017

thomasneirynck commented Feb 15, 2017

thomasneirynck left a comment

tbragin commented Feb 17, 2017

ndimer commented Feb 20, 2017

ppisljar commented Feb 20, 2017

ndimer commented Feb 20, 2017 via email

epixa commented Feb 21, 2017

pmriyazu commented Mar 14, 2017

ppisljar commented Mar 14, 2017

Vislib Point Series Charts #9642

Vislib Point Series Charts #9642

Conversation

ppisljar commented Dec 26, 2016 • edited by thomasneirynck Loading

epixa commented Dec 26, 2016

epixa commented Dec 26, 2016

ppisljar commented Dec 26, 2016 • edited Loading

jimmyjones2 commented Dec 27, 2016

ppisljar commented Dec 27, 2016

ppisljar commented Jan 9, 2017 • edited Loading

thomasneirynck commented Jan 11, 2017

thomasneirynck commented Jan 11, 2017

thomasneirynck commented Jan 12, 2017

ppisljar commented Jan 12, 2017

ppisljar commented Jan 12, 2017

ppisljar commented Jan 12, 2017

ppisljar commented Jan 12, 2017

thomasneirynck commented Jan 12, 2017

kobelb commented Jan 13, 2017

ppisljar commented Jan 14, 2017

ppisljar commented Feb 15, 2017

thomasneirynck commented Feb 15, 2017

thomasneirynck left a comment

Choose a reason for hiding this comment

tbragin commented Feb 17, 2017

ndimer commented Feb 20, 2017

ppisljar commented Feb 20, 2017

ndimer commented Feb 20, 2017 via email

epixa commented Feb 21, 2017

pmriyazu commented Mar 14, 2017

ppisljar commented Mar 14, 2017

ppisljar commented Dec 26, 2016 •

edited by thomasneirynck

Loading

ppisljar commented Dec 26, 2016 •

edited

Loading

ppisljar commented Jan 9, 2017 •

edited

Loading