Replicating ESPN win probability with line chart - nivo-react

I'm trying to figure out how to replicate an ESPN win probability chart with line chart but can't figure out how to scale the axis. Any ideas?

Related

Apache superset mark chart regions

Is it possible to mark/highlight regions in a superset line chart or would I need to create a custom chart?
I have a chart showing device voltage and I want to highlight where the low/critical/normal voltage range is.
I can sort of hack it by adding annotation lines and increasing the thickness of the lines to 150. This sort of works but falls apart when the y axis range changes.
Any better ideas?

Time series annotation layer in Superset Apache 2.0

I'm creating a dashboard in Superset, and I need to color format the values on a time series scatter (color based on thresholds). I can do this with the Time series annotation layer using the Mixed-Time series for the scatter and the Line chart for the annotations:
So far so good, but when I put the chart in the dashboard, the scatter is filtered according to the time range in the native filters, but the line chart is not!
I tried pretty much everything but nothing seems to work! Furthermore, it says in the viz gallery that the line chart is deprecated, so how to do time series annotations if there's no other chart option avaiable? Confused, so any help would be really great! Thanks!

Google Charts - How to stretch x axis over chart's full width

I can't figure out why Google Charts draws this simple chart aligned to center and doesn't fill entire white area.
Note: X axis is discrete because it represents weeks.
Do you have any idea what can I do with it?
That is how the charts display when you use a discrete (string) axis. If you want edge-to-edge lines, you need to use a continuous (number, date, datetime, timeofday) axis. See an example of the differences here: http://jsfiddle.net/asgallant/Xfx3h/.

Google chart Y axis not in scale with chart bar

I have been playing with google charts for the first time. I have created a graph that can be viewed at
Google chart link
https://chart.googleapis.com/chart?cht=bvg&chxr=0,0,20&chxt=y&chbh=50&chm=N,000000,0,-1,11&chd=t:0.4356,0.3562,0.4834,0.575,0.673,0.6091&chs=500x120&chco=FF3300|0000FF&chd=t:5,15&chl=freightmax|stols
The graph displays however the scale of the Y chart axis and the bar chart itself is not in proportion as per image below:
If you see the value of the Stols bar is 15 which is correct, however according to the y axis the value is around 3 or 4.
Any ideas how I can correct this?
Thanks in advance,
Ryan Smith
Adding scale parameter chds=0,20 should help
https://chart.googleapis.com/chart?cht=bvg&chxr=0,0,20&chxt=y&chbh=50&chm=N,000000,0,-1,11&chd=t:0.4356,0.3562,0.4834,0.575,0.673,0.6091&chs=500x120&chco=FF3300|0000FF&chd=t:5,15&chl=freightmax|stols&chds=0,20
Reference: Google chart parameters

Google charts API - multiple charts on the same image

Is there a way to display multiple charts on the same image using Google Charts api?
To elaborate:
I have one data series which I want to display as bar chart.
I have another data set which has nothing to do with the first one (well they are correlated but the values are hundred times bigger).
X-axis is for dates.
I want to have second data set displayed as line chart with Y-axis on the left.
I found something similar in "Compound charts" section but as far as I understand markers are calculated based on already displayed data set - and I want to have them independent.
In other words - is it possible to make image like this:
http://chart.apis.google.com/chart?cht=bvg&chm=D,0033FF,1,0,5,1&chs=200x150&chd=t1:30,10,20|60,40,50&chxt=y
but with the line being independent and their values axis being on the right.
I'm sorry I'm not familiar with the terminology - I'm sure there is a name for what I'm trying to achieve.
Thanks!
Only 2 years behind the curve but just to let you know that I have achieved your objective of displaying 2 datasets (one a bar chart, the other a line chart) against 2 different axis scales.
The devil is in the scaling parameter &chds and explicit axis values using &chxr. Essentially, I defined the explicit scales for the x-axis, y-axis and r-axis. and then instructed the scaling parameter to scale each dataset differently.
So for an r dataset between 0 - 10 and a y dataset between 0-2 I would write;
&chds=0,2,0,10 (y then r defined in my axis parameter, i.e. &chxt=y,r)
...and...
&chxr=0,0,2|1,0,10
Let me know if you need more detail!
I've looked into something similar to this before and have used the google chart API a lot. I'm 90% sure the answer is no. Sry :(
Yep it is possible.
Here is an example of two datasets displayed on the same axes. 1 is a bar chart the other is a line graph....
This line - chd=t1:95,1,1,3,10,3,77|95,52,44,24,11,2,1 - allows for the two datasets.
slothistype