Chart.js: Box Plot

[ghost]

Just an Idea.

[CAYdenberg]

Check out my fork:
https://github.com/CAYdenberg/Chart.js

[marcj]

@CAYdenberg, can you please activate the issue tracker of your repo?

[CAYdenberg]

Done.

I guess I set this up before I really knew how to use GitHub.

On Sat, Mar 1, 2014 at 3:33 PM, Marc J. Schmidt [email protected]:

@CAYdenberg https://github.com/CAYdenberg, can you please activate the
issue tracker of your repo?

Reply to this email directly or view it on GitHubhttps://github.com/nnnick/Chart.js/issues/319#issuecomment-36435700
.

[fulldecent]

Would you be interested to update this new chart to the latest version of the API, much has changed.

[CAYdenberg]

Hi,

Yes, I've been meaning to do this for awhile. I haven't looked closely at the new API. The problem with my original fork is that it accepts an array for each data point, so the spread of the error bar can be calculated on the fly. I don't know if this is easy to plug in, the way @nnnick has implemented it. I'll try and read over the updated library this week and get a sense for how much work will be involved.

Casey

[CAYdenberg]

OK, I've looked at the new library and I think I know what to do.

The challenge with my particular use of Chart.js is that to create an error bar you need some data, not a datapoint. When I first worked on this I allowed users to pass an array in place of a datapoint (so each dataset could be an array of arrays and datasets was an array of datasets, or three nested arrays.

I think we can still do this, and maintain compatibility, by checking if each datapoint is an Array or a Number, and if an Array, taking the average as the "real datapoint" and proceeding from there. The error bars themselves would be handled separately.

So, @nnnick, are error bars something you'd be interested in Chart.js natively supporting? (for Bar and Line charts, it makes no sense for the others, obv). I would need you or @fulldecent to review my code. Or should I work on these as extensions?

Either way, I'll treat scatter and box plots as separate Chart Types.

[jsuiker]

@CAYdenberg ... Is the chartjs library at all conducive to a more flat organization of data points? I could forsee crunching all the numbers beforehand and passing in the (eg. high, low, average) as follows:

boxChartData: {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(240,73,73,0.5)",
strokeColor : "rgba(240,73,73,0.8)",
highlightFill : "rgba(240,73,73,0.75)",
highlightStroke : "rgba(240,73,73,1)",
dataHigh: [],
dataLow: [],
dataAverage: []
}
]
}

[CAYdenberg]

That would certainly be another way to do it but I think it would still require modifying the core in some way. From the standpoint of the user, would you find that a cleaner API?

[jsuiker]

Cleaner for sure. I think it would be more efficient as well since - at least in my case - I'm pulling data from a dbms that can do those kinds of calculations pretty quick.

[onlysli]

Hi,
@CAYdenberg did you managed to make error bars in the new API? If yes, where can i get the code?

Thank you!

[tannerlinsley]

@CAYdenberg I would love to see your scatter/error/box charts turned into a chart extension much like the stacked bar chart from @Regaddi https://github.com/Regaddi/Chart.StackedBar.js

[sandstrom]

Just found Chart.js looking to draw a linear chart with underlying variance. While chart.js is great, a simple way of displaying variance would make it even greater.

Here is one visually clever way of showing variance in a line chart:

         _(source: http://dygraphs.com/gallery/#g/range-selector)_

---

Either just a max/min along with the value, or the underlying data set could be provided with chart.js calculating the max-min (this depends on the internals and the current boundaries of Chart.js).

[etimberg]

Closing since at this point I don't think we will support this in the core. We can happily help someone to create a plugin to add this functionality.

[sgratzl]

see https://github.com/datavisyn/chartjs-chart-boxplot

[jmm13]

@sgratzl beautiful, but never got it to work with real data. Wasted a morning, moving on.

[sgratzl]

@sgratzl beautiful, but never got it to work with real data. Wasted a morning, moving on.

can you elaborate or give an example?