I've created a series of plots using the flot library, which are all displayed on a single page. Is there a way to update the X axis min and max options (options.xaxis.min, options.axis.max) values WITHOUT re-plotting the plots ($.plot('placeholder',data,options))?
I found this solution: http://osdir.com/ml/flot-graphs/2012-02/msg00064.html
Which suggests that the following line would do it, but it does not work for me - the plots visible min and max are not modified based on this call.
monitorGraph.getOptions().xaxis[0].max = xaxis.max;
Any tips on updating the graphs xaxis max and min values would be greatly appreciated!
EDIT: Solution Below
The following code will take an existing plot, update the range that is visible, and redraw it in a very light and efficient way.
plot.getOptions().xaxis[0].min = time.start;
plot.getOptions().xaxis[0].max = time.end;
plot.setupGrid();
plot.draw();
After you set the value of the yaxis max height, try
yourPlot.setupGrid();
Not sure if it'll be as smooth as you want but I think it does the trick.
You can also dynamically modify MIN/MAX parameters in axis options:
plot.getAxes().xaxis.options.min = 0;
plot.getAxes().xaxis.options.max = 999;
plot.setupGrid();
plot.draw();
Related
In LightningChartJS when I hide the bar with the highest value the overall interval changes and the axis length is adjusted according to the highest bar on display. Though I have used setInterval the axis length changes.
const axisY = chart.getDefaultAxisY()
.setMouseInteractions(false)
.setTitle('Number of Employees')
.setInterval(0, 70)
.setScrollStrategy(AxisScrollStrategies.fitting)
This is due to the Axis' ScrollStrategy you are using.
In your code, using axisY.setScrollStrategy(AxisScrollStrategies.fitting) you're setting the Axis to always fit all Series inside the Scale - which will result in the behavior you described.
You should try using AxisScrollStrategies.expansion.
You can check all the available AxisScrollStrategies from the API documentation.
When using Chart.js i cant find a way to evenly scale the Y axis. Overiding and using manual scaling( scaleOverride: true ) for every chart is not really an option since there are alot of them and they have different data. Some one have an idea how to fix the scaling of the data?
This is the scaling i want:
Sometimes the scaling gets uneven depending on the data.
You can set the options globally - this will apply to every chart instance. For instance
Chart.defaults.global.scaleOverride = true;
...
I'm trying to implement bar totals at with bar charts in a very similar manner as you would with row charts. For row charts, the code would be
Chart
.width(500)
.height(500)
.dimension(chartDim)
.group(chartGroup)
.title(function(d) {
return d3.format(",f")(d.value); // or your custom value accessor
})
.renderTitleLabel(true)
.titleLabelOffsetX(50)
.xAxis().tickFormat(function(v) {
return "";
});
This will return a chart with the values of it at the end of the row charts with the elasticX functionality. However, when it comes to bar chart, you would have to implement a renderlet solution like this and this where you have to manually draw the bar totals.
The issue I have with this approach is that 1) the y domain isn't elastic, so if there are wide variations in your selections, the bar totals may not show, and 2) you have to manually determine the range for the y axis.
Is there a more elegant way to create bar totals in a more elegant way without relying on the renderlet solution, something preferably similar to the row chart solution?
No, there is no more elegant way, until this feature makes it into dc.js proper.
However, there is a solution to the problem you're describing: the coordinate grid mixin does support internal padding, yAxisPadding, to reserve extra space when elasticY is enabled.
This should keep the labels inside the bounds.
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#yaxispaddingpadding
yAxisPadding works, but you'll end up with padding both above and below the bars, which is rarely what you want.
If you overwrite the yAxisMin function with something that always returns 0 you should be set, however, e.g.:
timeChart
.height(200)
.brushOn(false)
.elasticY(true)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.yAxisLabel('Entries')
.yAxisPadding('10%')
.renderLabel(true)
.dimension(timeDimension);
timeChart.yAxisMin = () => 0;
I was wondering if there is a way to prevent Highcharts from recalculating and redrawing the scale of the Axis when I add a new serie.
What I need to do is the following: I have a scatter chart with a lot of data; when the user selects a point, I add a new series with a "line" type. This series' points are a limited sample from the previous ones, so no "real" new points are added, but the scale of the xAxis changes.
Setting xAxis' min and max value, startOnTick and endOnTick to true did not solve the problem. Any idea?
Edit:
As I wrote, the way Highcharts handles axis' scales is still a mistery to me. In my case, I was rendering one scatter and one column graph on the same canvas. In response to a user click, I was adding 2 new series: a line serie and a column serie each one based on a subset of the original data. The problem was caused by the column graph: when you add a new serie to a column graph, bars are not overlapped, but redistributed, thus creating the scale change effect.
Try to create the line series but hidden, and when you want to show it use chart.series[1].show().
I'm currently implementing a line chart in gRaphael which requires the x axis to move up the y-axis such that it lies on zero (which I have already accomplished by drawing my own axes).
However, I'm now encountering a problem when attempting to shade the area above/under the x-axis; gRaphael's shade function only shades from the bottom of the graph to Y-height (as opposed to being from 0 on the y-axis to the y-height). The result is the following:
http://i.stack.imgur.com/ZuPhw.png
I have found a couple of lines in g.line.js which look suspiciously like they would help, but I have no idea what the "L", "C", and "M" values mean (I assume they are to tell a part of the program to draw a line etc?)
Any help from anybody more informed than me would be greatly appreciated!
I solved this by overriding the g.line.js file and creating an offset to add to the Y values. The offset was calculated by considering the maximum and minimum values on the Y axis, the height of the SVG itself and the "gutter" - a value which adds padding to the SVG itself (so that values on the axes can be displayed better). The formula looks like this (and is, incidentally, identical to how the axes were moved to zero):
(height - 2*gutter)*(miny/(maxy-miny))