I would like to animate the highstock chart as the scrollbar is being moved and to animate the update of the chart when a handle on the scrollbar is dragged and then released ( see google finance chart). I have tried setting the animation on both the chart object as well as the plot->series->animation . The chart animates as it loads but doesn't when the scrollbar is updated ( it just gives a jarring update ).
Does this functionality currently exist, or is it in the works for the high stock library?
Unfortunately this option is not possible, but you can suggest it in our uservoice system available here: http://highcharts.uservoice.com/
Related
In Vaadin 14.6.1, I have created a horizontal layout with 2 charts (and some other stuff). The charts are not using up the correct width -- they seem to not "pick up" on the right width (see screenshot below). I set the width to 100% etc. Also, this problem disappears if I use a simpler component, such as label, instead of charts (from Highcharts). I've experienced a similar problem before, but in more complex settings (e.g. a user adjusts the splitlayout and the underlying chart does not resize). But in this case, it's an even more reasonably straightforward scenario (i.e. no adjustment by user of the width of any layout) and yet Vaadin doesn't seem to pick up the right width, at least when using charts. Is this a known or reproducible issue? If so, any workaround?
Charts indeed behave badly with some layouts. I have noticed two cases. The other is the Board component, where the workaround is just simply wrap Chart inside Div, i.e.
Div div = new Div();
div.add(chart);
// and then add div to Board
SplitLayout is more tricky. You need to call Chart to reflow after splitter has been moved. Something like the following finds all the charts and forces them to redraw.
splitLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(ui -> ui.getPage().executeJs(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));
});
Note, if you have only one chart or have conveniently the references to chart instances you can do
chart.getElement().executeJs("$0.__reflow();", chart.getElement());
Using the SwiftCharts library, I have a chart of candlesticks. And they are generated and I can track them. But some on the far right are not visible on the screen / seem to be behind some other views of the chart?
You can, however, see them here in the view debugger which confirms they exist (on the far right):
How can I make sure all candlestick views are displayed?
Ah, it turned out the container view of the chart view was clipping bounds. This one liner right before adding the chart.view as a subview fixed it:
chart.containerView.clipsToBounds = false
I have four HighCharts on a page, stacked vertically. In each of these charts I have buttons that change the data range and re-load the chart.
This works fine for the top two, but when the chart re-loads on the bottom two it moves the screen up the page, always to the same point.
With some testing I found that it doesn't matter what order the charts are in, and also if you click the button on the top form and scroll down the page, it moves the page back up to the same position.
It's like HighCharts has a lower limit on where the page an be and always moves it back to this position when a chart is loaded.
I can't find any settings within HighCharts or anything on Google that will sort this.
I thank you all in advance for your help
Paul
It's because chart container height for a moment gets smaller on chart reload. You can fix this by setting fixed container height.
I am using highcharts where I need extra padding on my chart. When I use navigator and zoom in I the padding is lost - which is fine as I am zooming in. However when I zoom out using Navigator I don't get my padding back. Alternatively if I use the zoom button on chart I get the padding back (I would expect the same behaviour from navigator as well when I try to zoom out).
I've copied a sample chart form Highcharts Demo on jsFiddle http://jsfiddle.net/gajjargaurav/RULh9/5/ with Navigator and http://jsfiddle.net/gajjargaurav/RULh9/4/ with Zoom button
The padding I have set is as below for my sample,
xAxis: {
maxPadding: 0.22, //Prevent chart going off the screen on the right
minPadding: 0.22,
tickPosition: 'outside'
}
The question is, how I can get the navigator to behave like the zoom button does when I try to zoom out using navigator?
Unfortunately min/maxPadding works only for initial state. If you want to improve your range in that way, I advice to use afterSetExtremes event handler, and there setup new extremes( just increase that one you get).
Note: When setting new extremes in afterSetExtremes, will call another afterSetExtremes. Make sure. Make sure that you will not create infinite loop (add some flag checking if extremes are already improved, or not).
I have worked with Bar graphs with Core Plot, but i couldn't find a way to get a horizontal bar chart containing bars with multiple values. Is there a way to do it in Core Plot?
Here is an image of what i want to do.
You can do this with stacked bar plots. Make one bar plot for each section and set barBasesVary to YES for each one. This causes the plot to query the datasource for an additional field called CPTBarPlotFieldBarBase for each bar. Use this to set the lower edge of the bar.
The "Vertical Bar Chart" in the Plot Gallery example app demonstrates this technique.
I know it is a really old post. But I have recently created a library which is creating horizontal bars from given values. It's written in Swift and maybe someone can use this in future projects.
https://github.com/prine/ROStorageBar