Line chart and bar graph

[merlinuwe]

Proposal

Some people need only a simple line chart or bar graph. ;-)

Use Cases

No response

Screenshots

This would be very good:

Code Sample

No response

[einarpersson]

This would be very cool. Also look at this: #1564

[subhash-halder]

@sidharthv96 @knsv I will take this up what should be the Ideal syntax over here?
like do we need to have two different charts like lineChart and barChart or a single chart with line/bar as a property?
also, the bar can be horizontal and vertical, should we consider only one dimension or multiple dimensions?

[sidharthv96]

@amsubhash you can give a shot at coming up with a syntax. We can then discuss and finalize it.
If the syntax is similar, we could share the parser between the two charts.

[merlinuwe]

@sidharthv96 @knsv I will take this up what should be the Ideal syntax over here? like do we need to have two different charts like lineChart and barChart or a single chart with line/bar as a property? also, the bar can be horizontal and vertical, should we consider only one dimension or multiple dimensions?

Multiple dimensions would be perfect. ;-)

[subhash-halder]

Here is a rough structure I am thinking of

%%{"init": {"XYChart": {   "orientation": <vertical | horizontal>, "stacked":  <true | false> }}}%%
XYChart // not sure what to name it
  axis
    y-axis [left|right] name --> [0, 100]   // the range (numeric) is optional otherwise will calculate from the data also we can place it in left and right of the chart
    x-axis name --> ["catagory1", catagory2] // list of catagories required (will only render these category in the charts)
  bar
    y-axis-pos <left | right>  // optional we can have it in left side or in right side
    name "some name" // this will be displayed in legend
    category1 --> 45
    category2 --> 65
  line
    y-axis-pos <left | right> // optional we can have it in left side or in right side
    name some name // this will be displayed in legend
    category1 --> 23
    category2 --> 55

we can add multiple charts ( line | bar ) but we should have a common x-axis, and we can have 2 y-axis and each plot will comply to any of the y-axis I have put the left and right with y-axis so we can have two y-axis in both side.

[zm-cttae]

The syntax needs to be able to scale to 4 or even 8 options for the chart mode

It could also need a way to make a combination of the values.. An array might be ideal for that

[subhash-halder]

Hi, @zm-cttae can you please provide an example config that will help us understand better?

[sidharthv96]

This is off the top of my head, we could make it XYChart <line|bar> <vertical|horizontal> instead of lineChart, barChart, etc.

The data formats are what need some thoughts on.

barChart vertical stacked
x-axis "name" ["label1", label2, "label3"] # or range
y-axis "name" [left|right] 0 --> 100

<data>

Below are some different types of how data can be added.
We could support multiple types too, depending on usecase.

# Multiple distinct values

barChart 
x-axis "Fruits"
y-axis "Count" 

Apple, 20
Orange, 30
"Banana, ripe", 15

---

# 2 Lines

lineChart
x-axis "Year" 2010 --> 2020
y-axis "Price"

Apple  [20, 30, 40, 50, 60, 70, 80, 90, 95, 100]
Banana [10, 15, 20, 23, 25, 30, 35, 40, 45, 50]

---

# 3 bars?
barChart
x-axis "Condition" 
y-axis "Count"

Apple
	Bad, 10
	Good, 300
	Excellent, 500
Banana
	Bad, 5
	Good, 100
	Excellent, 200

[subhash-halder]

Hi everyone, I will suggest having the config so that we are able to add multiple plots, like bar and line in the same chart.

XYChart vertical stacked
x-axis "name" ["label1", label2, "label3"] # or range
y-axis "name" [left|right] 0 --> 100

bar // plot type we can add area, dot, and even we can add candlestick 
<data>

line
<data>

cc: @sidharthv96

[zm-cttae]

I'm also thinking "XY scatter graph with trend line 📈" is an important use case especially for performance testing

[sidharthv96]

@amsubhash your grammar looks good, we can use that to start and iterate later if required.

More than the grammar, I'm concerned about edge cases and maintaining the renderer for all these types.
Please check if there are any existing libraries we could use.

[subhash-halder]

@sidharthv96 I am thinking of architecture like this, the complex part is the space management and that will be common for all types of plots. in this architecture, we can easily add plots and axis as we need. and for axis and plot, we will be using d3js.

classDiagram 
   direction BT
    ChartComponent "1..*" --* Orchestrator
    Plot --|> ChartComponent
    Axis --|> ChartComponent
    Title --|> ChartComponent
    Legend --|> ChartComponent
    Plot o-- "2" Axis
    LinePlot --|> Plot
    BarPlot --|> Plot
    LinearAxis --|> Axis
    BandAxis --|> Axis
    class Orchestrator{
      +ChartConfig chartConfig
      +ChartData chartData
      -ChartComponent[] chartComponents
      +getDrawableElement()
    }
    class ChartComponent{
        <<interface>>
        +setOrientation()
        +calculateSpace()
        +setBoundingBoxXY()
        +getDrawableElement()
    }
    class Axis{
        <<interface>>
        +getScaleValue()
        +setRange()
    }
    class Plot{
        <<interface>>
        -Axis xaxis
        -Axis yaxis
        +setAxies()
    }
    class LinearAxis{

    }
    class BandAxis{

    }
    class Title{

    }
    class Legend{

    }
    class LinePlot{

    }
    class BarPlot{

    }

Loading

[sidharthv96]

If the chartData structure is the same for all these charts, this feels like a solid approach. 👍

One anomaly that comes to my mind is stackedBarCharts. Can we handle that? Maybe we'll need a new syntax for it.
No need to add support in this PR anyway, but keep future additions in the back of your mind during design phase.

[camueller]

One anomaly that comes to my mind is stackedBarCharts. Can we handle that?

You didn't post an answer to your question ;-) I think stacked bar charts are really important and missing this type of chart can often not be circumvented by just using a different chart type.

[piranna]

Stacked bar are regular bar charts, just only the bars are stacked ones over others. Just a boolean flag would do the job here.

[eugeneniemand]

+1 for Stacked Bar Charts and potentially allowing more than 1 line would be useful asper the OP, maybe something like this where bars can be stacked and controlled with boolean like bar-stacked

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar-stacked "true"
    bar "Series 1" [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    bar "Series 2" [10500, 11000, 10200, 9200, 8500, 7000, 6000, 5000, 6000, 7500, 8200, 9500]
    line "Line A" [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line "Line B" [10200, 9200, 8500, 7000, 6000, 5000, 6000, 7500, 8200, 9500, 10500, 11000]