Plot array at some intervals in javascript for x axis - javascript

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?

Related

Changing the name for 'categories' of x axis while implementing crossfilter with highcharts

I am trying to implement crossfilter along with highcharts. In the dataset, I have a key called 'date'. The values in the date key is of the form 'yyyy-mm' (for ex, 2018-04).
While implementing, I want the X axis to contain the dates in the format described here: for 2018-04, it should display June-18, and so on.
I was able to implement this by extracting the month and year from the date key. But, whenever the category names in the x axis is different from that given in the dataset, the crossfilter is not working correctly, i.e, whenever I click on any of the bars, every other chart's value is updated to zero. But when I set the x axis's categories back to the form given in the dataset, it works fine.
I was able to implememnt this through xAxis.labels.formatter

How to make X axis timescale with equal interval between elements on chart independent of time range

I need to display elements on my chart with equal interval between elements with dates ticks on X axis. Elements have different interval because they have scaled by date range. Is it possible to display some elements on chart with equal interval between them regardless of dates on X axis?
I have tried to use different scales like bandscale and linearscale. But they works incorrect when i am trying to pass my min and max dates to domain function.
For example this chart:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Overview/jQuery/Light/
I need the same equal distance between dots but have dates on my X axis instead of names.
Since it is more important to have the bars equally spaced than to have them spaced according to their time value, use d3.scaleBand() and pass to the domain the full array of dates that are represented in the dataset, e.g., .domain(data.map(d => d.date)).

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.

DimpleJS - Limit the number of category axis values to be displayed in chart

For preparing graphs from data that exists in MySQL tables, I am using DimpleJS framework. I am able to plot graphs, everything works. One question though -
In a simple bar chart, with category values on X axis and measure values on Y axis, is there a way to limit the number of X axis categories being displayed? Example, let's say this is my data set: [(A,1), (B,2), (C,1), (D,5), (E,4)]
So in my dataset, there are 5 categories (X axis - A, B,C,D,E) and corresponding measures that I will be displaying in Y axis. Question is, I just want to display only 3 of the measures - let's say only first three, in this case (A,1), (B,2) and (C,1), although my dataset has two more (D,5) and (E,4).
Is there any way to restrict it in JS/ DimpleJS? I have limited control on the dataset that is coming in.
Thanks.
Use dimple.filterData after you receive the dataset but before you provide the data to dimple. This does not mutate the data so won't affect any other operations. I'm not sure what your actual category field is but it should look similar to this :
var chartData = dimple.filterData(originalDataset, 'category', ["A", "B", "C"]);
var chart = new dimple.chart(svg, chartData);
Otherwise there is not a provided way to restrict a category axis from showing values present in the data.

how to add dynamic X axis values to highcharts

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.

Categories