I am doing something similar to the HighCharts Lazy Loader example. It works, except that when I zoom into a region, I fetch higher resolution data and update via
chart.series[1].setData(data);
This resets the navigator range (extremes?) to the range of new incoming data. I am using almost everything that the lazy load example talks about, but no use.
navigator:{adaptToUpdatedData:false},
scrollbar:{liveRedraw:false}
Thanks.
Why do you use:
chart.series[1].setData(data);
I'm pretty sure there should be:
chart.series[0].setData(data);
Simply, if you have just one series on a chart, then series[0] -> your series, and series[1] is series in navigator. That's most probably reason why you get navigator updated, but you want to update series.
Try using setExtreme function in the callback of the lazyload. http://api.highcharts.com/highstock#xAxis.events.setExtremes
I guess the only way to do this is to make the new data array match to the required range with empty values.
http://forums.highcharts.com/highstock-usage/any-way-to-force-x-axis-extremes-to-match-selected-timeframe-t31154/
Related
Checked all the samples in here: https://www.anychart.com/products/anystock/gallery/Stock_Technical_Indicators/?theme=darkEarth All are calculated by any chart functions. indicatorPlot is getting members like .adl etc..
Also checked the sample here with setCalculationFunction: https://www.anychart.com/blog/2018/03/14/custom-technical-indicators-javascript-stock-charts/
Is there a way to "map indicatorPlot" with a csv values like drawing the main graph? Or is datatable can store indicator values to show underneath the chart like oscilators.
The main question is: Is there a way to display a custom oscillator under the chart feeded with values from csv, json etc.. ?
Yes, in this case, the indicator is a usual series that is based on your data. Simply create a series from your data, provide the desired name and that's it.
So I'm building a trading tool and am using chartJS for the charts. This is how my charts look now on the page:
So my problem is that when I change the time period of the chart, the chart shows randomly the old data mixed with the new one.
You can see the behaviour here: https://gifyu.com/image/vda5
For now I can't use the Big chart together with the small one on the same page because the big chart which has the timing period has also multiple AJAX calls so every time I click on "1W" for example, a new call is being made and the chart is drawn over.
Things I tried:
I know that for dynamic charts in chartJS I have to destroy the chart, so I'm using
if (window.chart !== undefined) window.chart.destroy();
and for the small charts I use an empty array and push the elements inside. Here is how I do it:
if ($(quoteDisplayEl).hasClass('quoteDisplay-light')) {
chartHandel.push(quoteChart);
} else {
window.chart = quoteChart;
}
so for the big chart I assign it to a global variable and the small one I push it to the empty array - that allows me to have multiple charts on one page.
But in order for the big chart to be destroyed I should destroy and re-render all charts from scratch (I guess) and I tried multiple was of achieving that with now luck.
Unfortunately the code is over 500 lines and has lots of variable data coming from APIs and DB thus I can't make a fiddle demo.
I prefer chart.update() over chart.destroy().
Here's a small, simple example how I usually update data.
I make one object per chart with labels (empty array) and data (empty array) and colors and all the stuff you need.
I fill these arrays with data I get (AJAX).
Optional: If I get all the data and need to filter it to show less data, I copy my object to keep all the data I got and have all the data I need now for my chart in another object
Make an updateChart() function which alters your displayed data or saved data from your backup object or use new data from a new AJAX request.
End your updateChart() with chart.update() (or whatever your chart is called).
Multiple charts shouldn't be a problem and you shouldn't have to destroy your chart.
I wonder if there's an alternative way of displaying the negative values on the column chart.
The bottom most value on the y axis should be the lowest value. The columns on the graph should grow from the bottom and upward to their corresponding values.
See images below with the current and expected behavior.
Current
Expected
It will be best if you use threshold property:
series: [{
...
threshold: -20
}]
Live demo: http://jsfiddle.net/BlackLabel/0moe5q2y/
API Reference: https://api.highcharts.com/highcharts/series.column.threshold
I'm not into highcharts really, but I've lurked a bit and figured out this little, lets call it, hack ;p
Check this out please: https://jsfiddle.net/4goq1x6c/
If you want the min value to be set dynamically you could calculate it based on some condition and update every 0 element of the data's arrays and the min value of yAxis. (i.e. you could use some variable for simplification)
It's dirty (but not as much when I've looked again on it) I know it, but I haven't found anything native in highcharts docs. I hope it will be useful :)
Folks -
I'm now trying to trigger a second chart based on which series in the first chart is clicked on.
Based on which is chosen, one of two data sets are sent to the function:
.on("mouseup", function(d) {return d.myCat == 0 ? updateData(yesXYZData) : updateData(nonXYZData)})
This part works, but I'm getting one big stack in the target div, not the iteration I am expecting.
function updateData(whichDataSet) {...
I've tried putting the updateData() function into the window.onload function, duping or reusing various elements (since the domain and range for the X axis are the same, I expect to reuse).
[Note- I have taken Lars Kothoff's advice regarding numbers in the data object. Also, I will create a better data structure later, using crossfilter.js and native d3.js data manipulation- for now I need a working prototype demonstrating functionality.]
here is the gist:
https://gist.github.com/RCL1/6906892
Thanks in advance!
-RL
line 242 of the gist. I needed to use a non-filtered version of the data to calculate x axis (totalAll.map).
I have a chart here: http://jsfiddle.net/wergeld/bx82z/
What I need is for the stacked bars and the scatter points to line up on each other based on the data X-element (county name in this case).
Getting the bars to stack was simple. But as you can see in the example the scatter points show up in the middle of the chart - not on the same x-value as the others.
I suppose I could create a category list (using the county names) but there may be cases where I do not have all 3 data elements for all counties - how to handle that scenario?
I did great the category axis and it is still doing the same thing: http://jsfiddle.net/wergeld/YckwW/
You were not defining the series correctly to achieve what you were wanting. See updated jsfiddle for what I think you are looking for.
In the cases where you are missing a piece of data for one of the countries you could always use null, which simply means there is nothing to display for that data point. See Missing Data Sample for an example. It is case sensitive so make sure that null is all lower case.