I have an app that is generating some bart charts from a service. My client added an additional chart to display a range (min, max and average). I was wondering if their is a way to accomplish this using chart.js. I looked through their docs and wasn't able to find any examples or documentation on how to accomplish this. Anyone else run into this or have a different library they prefer?
You can combine "floating bars" and "stacked bar chart". See https://codepen.io/fantasyzer/pen/KKaqgoM for an example. Note that the data of each bar is given as an array [Ybegin,Yend]. If you set stackable to false for the y scale the values are to be given as absolute:
datasets: [
{
data: [
[10,12],
[20,25],
[15,25],
[25,28],
...
Ref:
https://www.chartjs.org/docs/latest/samples/bar/floating.html, https://www.chartjs.org/docs/latest/samples/bar/stacked.html
I completely failed to get this working for bar charts (works for line, scatter, radar). Then I found new chartjs 2.9 feature here Min Max bar values
Using this on bar and horizontalBar successfully.
Related
I'm using chart.js 2.9.4 and the ng2-charts wrapper for Angular. I'm trying to display incoming live data, but have trouble configuring the chart so that the ticks/axis don't stretch beyond the data in the chart. In other words, I want the chart data points to fill the entire width of the chart grid.
StackBlitz showing my issue.
If you keep looking at the chart as data is added, you see that most of the time the ticks stretch beyond the last point in the chart:
The only solution I could come up with is overwriting the max value of the ticks on the x-axis each time new data is added to the chart: options.scales.xAxes[0].ticks.max = x;. Uncomment line 68 in the StackBlitz in order to apply this. This solves my problem but introduces another. Sometimes as data gets added, the last two ticks overlap:
I've tried experimenting with various parameters of the scales and ticks options (bounds,distribution,stepSize,source,autoSkip,autoSkipPadding) with no results. Is there any combination of configuration parameters to solve my issue ?
You may want to add delay at streaming plugin, the config will look something like:
scales: {
x: {
type: 'realtime', // x axis will auto-scroll from right to left
realtime: { // per-axis options
delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line
pause: false, // chart is not paused
ttl: undefined, // data will be automatically deleted as it disappears off the chart
}
},
I have tested this on your code, and it seems to work as expected, you may want to tune some parameters as needed.
I'm using amCharts 4 on a page that combinate 3 graphs :
- Pie with age range of my users
- Pie with genre repartiton
- Histogram with number of orders
I've set up a system that allow to make all charts react to filters done on other charts on this page.
If I click on a age range (20-25 for example), it'll highlight the slice I clicked, get its id, and go load the content filtered with my selection for my 2 other graphs (genre/orders). Everything is working as expected on this side. I can combinate, remove my filters it works like a charm.
My problem :
I don't find any way to animate the load of new datas on my graphs (as it's done when graphs are first built).
How I initiate my graphs:
var chart = am4core.create("myGraph", am4charts.PieChart);
chart.dataSource.url = url_json_dataset;
chart.dataSource.parser = new am4core.JSONParser();
How I update my graphs:
chart.dataSource.url = url_json_dataset_with_filters;
chart.dataSource.load();
I've also try to load my json outside amcharts, and force update of the dataset, and don't get better results, data load is done without any transition:
chart.data = my_json_array;
chart.invalidateData();
The animateAgain() method is documented for amCharts 3, but is not working anymore on the new version, see here : https://www.amcharts.com/docs/v3/tutorials/showcase-various-chart-animation-effects/
Any idea on how to achieve it ?
Thanks a lot for your support.
I am trying to convert d3v3 Stacked bar chart with tooltips (http://bl.ocks.org/mstanaland/6100713) into d3v4. After many attempts still unable to get the chart running in d3v4.
Currently I have issue in changing below d3v3 code snippet to d4v3 code. Can anyone help me on this.
// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
return data.map(function(d) {
return {x: parse(d.year), y: +d[fruit]};
});
}));
Below are part of the links refereed for this task.
https://github.com/d3/d3/blob/master/CHANGES.md, https://github.com/d3/d3-shape/issues/93, {d3.js} migration v3 to v4: code work on v3 (d3.layout.stack()) error v4 (d3.stack())
I would personally base any chart of Mike Bostock when you're making new charts if you're not familiar with d3.
I based it of this example
And here's my result taking the data from your example (I assumed you want your data to be hardcoded) Including the tooltip as well.
Plunker
Only real change I had to make was this:
.text(d[1] - d[0]);
In the tooltip mousemove event, take a look through the changelog as well for further version conversion in the future.
I am trying to plot a combination chart of a scatter and columnrange.
I am having issues with the scatter plot not showing correctly. The points seem to "stop" at a certain point after zooming in and scrolling.
https://codepen.io/moosejaw/pen/QavGgR?editors=0011
It must be related to the boost module?
I've tried enabling and disabling it.
boost: {
// enabled: false // works
enabled: true // doesn't work
}
I know the boost module can handle the number of points, but I am confused on why their is a scrolling / placement issue.
Thanks for your time.
This issue happens only when the chart is inverted.
It's a bug reported on github: https://github.com/highcharts/highcharts/issues/4608
The workaround here is to create inverted chart manually (which can be done via chart options and preprocessing the data):
Swap x and y values for all points
Set reversed to true for the y axis (when chart is inverted it's set by default: https://api.highcharts.com/highcharts/chart.inverted)
Swap formatting and zoom options for axes
Handle the format of tooltip (tooltip.formatter may be useful)
Code
Example of my problem: http://jsfiddle.net/x46RQ/
Goal
I want the graph to be a bar graph like so: http://jsfiddle.net/Lbd85/ but obviously with dates as the x axis. If I add my data into that fiddle, it messes up like the one listed above as seen here: http://jsfiddle.net/73G7Z/
Questions
Why are all 3 days provided in the data variable not displaying?
Why are the bars not lined up with their appropriate x-axis ticks?
Why does changing the data and mode to time totally mess up what would otherwise be a functional and accurate bar graph?
Environment
jQuery 1.7.1
jQuery Mobile 1.0.1
Flot 0.7
Thanks
Let me know if any additional information is required.
Part #1, You specified a min y value of 0 in your flot options, and your data point #2 has a value of zero. So it's there but just very small, almost invisible.
Part #2, you have to offset your dates by the users timezone:
Something like this:
var tzOffset = new Date();
tzOffset = tzOffset.getTimezoneOffset()*60*1000;
data.push([(new Date("2012/02/20").getTime()-tzOffset), 1]);
Part #3, Your graph is a mess because you specified a width when in fact the option you were looking for is barWidth and you need to specify the width in terms of time, i.e. milliseconds. See here for how. Something like barWidth: 12*60*60*1000 looks OK.
So in summary, this is what it will look like: http://jsfiddle.net/ncTd3/