how to add dynamic X axis values to highcharts - javascript

I have working highcharts in this fiddle
http://jsfiddle.net/chintamanil/y3Lx5qmb/
What i m doing is getting a stock price for displaying it every 5 seconds. I can plot the price on Y axis. But i want the time on X axis. I can get the time in the array as var tim = data.query.results.quote.LastTradeTime;
I wan to assign this to the X axis. I tried
ary_time.push(tim);
console.log(ary_time);
// ary_time.push(tim)
chart.series[0].setData(ary)
chart.catogeries[0].setData(ary_time)
As you can see in the fiddle [If you let it run for 10 seconds] that i get y axis correctly. But X axis is not updated. Or its just numbers 1,2,,3 ..
IS there a way to make this dynamic as well.

Related

Plot array at some intervals in javascript for x axis

I am trying to create the UI to show the X and Y axis line graph using Svg Charts in React Native as above attached screenshot. I have an array for the x and y-axis respectively. Example:
var xAxisData = [1.002, 1.045, 1.084, 2.08, 2.021, .... so on] // price list
var yAxisData = [12-11-2021, 13-11-2021, 14-11-2021, 18-11-2021, .... so on] // dates
I have plotted the y-axis graph for that, had filtered & sort the array on the basis of date and some interval so will show only some dates as intervals on the y-axis for example my start date is 20 April and the end date is 20 July. The plotted y-axis will be shown as for only 4 dates as 4 intervals in the period of 4 months.
But now need to plot the x-axis graph, I am getting stuck on what basis will filter or sort the x-axis array within some interval or value.
Note: I Don't want to show or plot all the values of the array for the x and y-axis. My requirement is needed to show the values of the x and y-axis at some intervals
Can anyone help with the same?

how to get last value shown yAxis highcharts in current version in a simple way?

Is there a simple way in current highcharts version of getting the last value in the Y axis?
I already know how to get the highest value with getExtremes(), but I need the last value in the Y axis to feed the last value of a time series into a gauge. Additionaly I would like to calculate current yearly speed and feed it in another gauge, by calculating the difference between the last value and the value exactly one year earlier. Additionally the same as before for an acceleration gauge by calculating the speed difference between the current speed and the speed last year.
I am not sure if you want to get the last yAxis label value or the last point value, but here is an example of how to achieve it:
// last label value
var data = mainChart.yAxis[0].max;
/* // the last point value
var data = mainChart.series[0].points[mainChart.series[0].points.length - 1].y
*/
Demo: https://jsfiddle.net/BlackLabel/1702dogs/

ChartJS - How to use x,y points in bar chart

I see in the docs, you can specify x,y coordinates when using the time scale.
I'm wondering if I can do this using a different scale. I have 10 categories that I would like to place my x points in and then sum up the y values for each group of x 's.
My x categories are 0-10, 10-20, 20-30, .... 90-100 with a total of 10 categories.
For instance - point(15, 1923) will go in Bin 2, and the value of the bar will be all of the y values in bin 2.

Extending highcharts line series to end of chart

I have a Highcharts line chart with multiple series. The X axis is a datetime axis. One series is a step line and the max data point for this can finish before the other series on the x axis, e.g. 5 days before the end.
Is there an easy way of extending this line to the end of the chart automatically without filling in the extra data points before the data is passed to Highcharts? The line should just carry on to the end of the chart at the same y coordinate as the last plotted point.
I have already tried setting minPadding and maxPadding to 0 along with start/endOnTick to false, but this had no effect.
Thanks!
See answer here:
continue the line drawing on dotnet highchart
The basic idea is to
1) retrieve the final y value of your data
2) retrieve the final x value that you want it to extend until
3) add a new point to the data with those x and y values.

How does C3js decide the y axis range

I'm working with C3.js to build graphs for my JSON data. However, I do not understand what decides the Y-axis ranges on the graph. I have a common code to generate 2 bar charts, out of which one comes as expected whereas the other one has high range for Y-axis causing my data bar being diminished. Please take a look at the image below.
The bar chart on the left has data value equal to 1, yet the axis ranges to 35. A similar graph on the right adjust well.
Does anyone know what could be the reason for this?
As yo can read in the doc there is a parameter to set the Y max and min. So you can set the max value dynamically. Or you can set de Y.padding to be 0, so the Y axis will be shorter.
C3.js calculate the Y axis hight dynamically, and I think that have a min default hight.

Categories