3-axis charting? about go-chart HOT 14 CLOSED

is it sort of like this ?

if it is, you can use that example as a basis for adding multiple series that use the same scale

from go-chart.

so, i've looked at N-axis charting before, there are a couple of key considerations;

1. what incremental value would that add visually?
2. where would the other axes live? would we do away with the single left right placement and have a stack of axes to the left and right?

i tried implementing this over a weekend a while ago and it got away from me very fast, mostly because we have to adjust the canvas to fit the various elements on the chart and each new axis introduced complexity around what the final chart canvas box would look like.

i'm happy to take another stab but what i hope this helps with is to explain why it isn't a trivial refactor. going to keep this ticket open for now and see if i can figure out a lightweight way of doing this

from go-chart.

This might call for a new type of chart as the current N-axis charting assumes we need to scale everything so they all have their own y-axis we can compare.

Consider the following use case where there is a single, universal x & y axis (of the highest series range) which all other lines fit into.

https://www.google.com/trends/explore?q=php,perl,ruby,python

My current use case is charting transformations on data so I can compare the results of multiple algorithms (which all have results within the same general range).

from go-chart.

So the chart current does what is in that link; if you have multiple series it will do a min max across the series and scale each appropriately. What it does not do is draw separate scales, such that each line displays its full min max across the full chart canvas.

We only typically draw another axis if there are series that either use totally different units, or are on a totally different scale (orders of magnitude different).

To see an example like the above, check out: https://github.com/wcharczuk/go-chart/blob/master/_examples/twopoint/main.go

from go-chart.

What it does not do is draw separate scales, such that each line displays its full min max across the full chart canvas.

Are you sure? It seems to be drawing separate scales as the Y-axis on one side is thousands based while the right side (first y-axis) is hundreds based; but both lines consume the whole chart area.

from go-chart.

ok, sorry should have been more specific, it can, optionally, draw (2) total scales and mush them together onto the same canvas, in the case of assigning a series to the secondary y axis which is drawn on the left. if the series are roughly comparable, you can skip assigning to a secondary series and just draw them all on the same scale.

from go-chart.

what might be helpful for me; what are you trying to do in that graph? what is your desired behavior? what isn't working?

from go-chart.

I borrowed the example image from my other work.

My current use case is charting transformations on data so I can compare the results of multiple algorithms (which all have results within the same general range).

It's timeseries data (not stock market) which need different types of normalization, peak detection, etc.. which I would like to draw onto a chart (3-6 lines) to help comprehend the results better.

The google trends example is the easiest comparison I can make to needing multiple data points charted across the same X, Y graph.

from go-chart.

Ah perfect, multiple series is not a problem after all.

func drawChart(res http.ResponseWriter, req *http.Request) {

	var s []chart.Series
	for i := 0; i < 5; i++ {

		var xvalues, yvalues float64
		for i := 1; i < 12; i++ {
			xvalues = append(xvalues, float64(i))
			yvalues = append(yvalues, rand.NormFloat64())
		}

		s = append(s, chart.ContinuousSeries{
			Name: "Prod Request Timings",
			Style: chart.Style{
				Show:        true,
				StrokeColor: chart.ColorAlternateBlue,
				FillColor:   chart.ColorAlternateBlue.WithAlpha(64),
			},
			XValues: xvalues,
			YValues: yvalues,
		})
	}

	graph := chart.Chart{
		Width:  1280,
		Height: 720,
		Background: chart.Style{
			Padding: chart.Box{
				Top: 50,
			},
		},
		YAxis: chart.YAxis{
			Style: chart.StyleShow(),
			TickStyle: chart.Style{
				TextRotationDegrees: 45.0,
			},
		},
		XAxis: chart.XAxis{
			Style: chart.Style{
				Show: true,
			},
			GridMajorStyle: chart.Style{
				Show:        true,
				StrokeColor: chart.ColorAlternateGray,
				StrokeWidth: 1.0,
			},
		},
		Series: s,
	}

	res.Header().Set("Content-Type", "image/png")
	graph.Render(chart.PNG, res)
}

from go-chart.

from go-chart.

yeah negative value handling could really be improved. you could also consider using different fill colors for those series, but i'm glad that worked for what you wanted!

from go-chart.

That was just a demo of multiple series. I thought I would post it (and the sample) for others. I won't be using negative values, the same color, or much of any of that.

You might want to mention that multiple series isn't a problem when you use a []chart.Series{...} on the root graph object instead of the chart.(X/Y)Axis{} structs.

from go-chart.

Not sure I am following what the suggestion is here. I would love to use N-Axis too. At the moment as far as I understand the recommendation is to use 1 or 2 axis and scale/shift all your y-values of the 2, 3, 4 etc series to fit in a reasonable range near 1?

from go-chart.

Basically, just create a slice of var s []chart.Series and fill it with as many series as you want (still only 2-axis though). Then feed it to the graph.

graph := chart.Chart{
	Width:  1280,
	...
	Series: s,
}

from go-chart.