Menu

Plotting a 'squared' graph with a fill below the line (= area with straight lines)

2015-03-05
2015-03-11
  • lbayuk

    lbayuk - 2015-03-05

    I came up with two ways to do this, although neither is ideal. You can use a bar chart (plot type: bars), adjust the bars to full width, and turn off the data borders. Or, you can use a filled area plot (plot type: area), with the data array specially set up up to get the horizontal and vertical steps.

    Example scripts and output are here: [wiki:squarefilled]

    Both scripts make nice 'filled square' plot, but I'm not really happy with them. With the bars plot, you have to use the text-data data type, with implied X values, so you can't have specific X values. With the area plot, you have to generate the data array in a specific way, with 2 entries per data point.

    At first glance, it doesn't look like it would be hard to add this to PHPlot as a new plot type. What would it be called? Filled Square Plot - squarefilled - maybe?

     

    Related

    Wiki: squarefilled

  • legolas_a20

    legolas_a20 - 2015-03-10

    squarefilled sounds good! A nice option would be to have the line in a different color than the fill (I really like the look in the examples where the fill is a lighter shade of the line, very visual without looking overly 'heavy').

    Thanks for the 2 ways to do this now, I'll see if there is one I can use. I tried something like the 1st a bit before asking, but didn't quite get what I wanted. The second looks promising, I hadn't thought about doing it that way.

     
  • legolas_a20

    legolas_a20 - 2015-03-10

    I added this as feature request #57.

     
  • lbayuk

    lbayuk - 2015-03-10

    Thanks for writing up [feature-requests:#57]

    As I started looking into this, an issue came up with the data. The way the squared (unfilled) plot works, it draws a horizontal line (back), then a vertical step (up or down), at each data point after the first.

    When I made a version of the plot that fills in the area, I found that the last Y value was never used. In a squared (unfilled) plot, you would get a vertical line drawn up or down to this last (X,Y) position. But with squarefilled, there is no area to fill beyond the last X, so the last Y is ignored. Does this make any sense? I can post a picture to make it clear.

    I can't think of how to plot this last Y value, and still make the 'squarefilled' plot consistent with 'squared'. Do you have any ideas on this?

    As for borders and colors, I was going to fill the area only, like the 'area' plot does, but it looks like it would be useful to have the line drawn too. I can do the area with Data Colors (SetDataColors()) and use Data Border Colors (SetDataBorderColors()) to draw the line. And SetDrawDataBorders() would control whether you get the line or not. Maybe the default should be no lines, otherwise you would get a color area with black lines (because black is the default data border color).

     

    Related

    Feature Requests: #57

    • legolas_a20

      legolas_a20 - 2015-03-11

      That last datapoint poses an interesting question indeed. Looking at the example I looked at, most of which are from atlassion's jira agile, they don't have the issue because the data 'stops' but the graph 'continues', so they just add a horizontal line to the end of the graph.
      I see these options:
      ** draw just the line as in squared. No surprises in using it (no datapoint that isn't shown), and users can emulate any sort of 'end' they want to the line by adding the appropriate datapoints. I think this would give maximum 'predictability' (through consistency with squared) and usability (user can still get any look they want)?

      This still poses some strange effects if the 'line' itself isn't drawn, although they could be solved easily maybe (but it's hard to explain): draw the area up until this datapoint (but not including it), and draw a 1 pixel wide area for this datapoint. I've include a picture of what I mean for the case where the last datapoint is smaller, the left is a 'zoomed in' version of the smaller one. A 1 pixel line is hard to see, but if you zoom in it becomes clear and I think the 'why' is obvious from that. (The effect is that the last item has a 1 pixel wide 'area' only.)

      ** draw a horizontal area until the end of the graph, like in the examples. I think this would be useful to get exactly that type of graph, but drawing where there is no data is not done by any of the other plot types I think, so users may be surprised (also, if this is the only plot type or the longest one on the chart, the question becomes how much of an extra line to draw, esp. with data-data plots?).

      ** don't draw the last datapoint. I'm afraid this will be a support nightmare, as everyone will keep reporting this as a bug?

      Datacolors and databordercolors for the line sound logical.

      The default you mention (no line) sound ok, except that maybe drawing the line would make it clearer for people that this plot type can do that too, but this is really a detail (my thinking was that people will go looking for options to turn something off/change color sooner than they will look for an option to draw something extra? although if it's mentioned in the help, it should be obvious anyway).

       

      Last edit: legolas_a20 2015-03-11
  • legolas_a20

    legolas_a20 - 2015-03-11

    I found another example which looks like it does more or less what I mean in my first option, although it's for a 'text-data' data type: http://jpgraph.net/features/src/show-example.php?target=new_step1.php

     

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.