We Keep Coding

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 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.

Plotting a line chart with four quadrants

I am trying to create a line chart in using graphael. Both my x and y data have both positive and negative values. The way I am able to plot it now, the x and y axis end up intersecting and the least values in the arrays. For example, they could intersect at (-12,-12).
I want to create the plot such that the axis intersect at (0,0) to make a quadrant plot. Is it possible to do this using graphael?

After searching all over the web, I figured out out there is no option of achieving this in the library itself. I ended up drawing two extra lines for the X and Y axes to create a four quadrant graph.

Grouped Bar Chart with different y-axis/scales

I'm trying to create a grouped bar chart with 70 samples and 2 series. Similar to this example:
http://bl.ocks.org/882152
However one series is [0 ... 1] and the other series is [0 ... 1.000.000]. I can't recreate the example with my numbers.
I also don't really get the example. Shouldn't be the variables switched, i.e. x -> y, y0 -> x0 and y1 -> x0? Or don't they stand for the x and y axis?
Thank's!
Edit:
Here is an example that demonstrates my problem (look in the console).
http://jsfiddle.net/kQSGF/3/

The problem seems to come from the scale definition:
var x = d3.scale.linear().domain([0, 1]).range([h, 0]);
The domain is set to [0,1] but only your first data series actually falls in that range.
you could consider setting the domain to the extent of your data, and reversing the output range so that it shows the values in your data instead of the 'non' value amount as a bar:
var x = d3.scale.linear().domain(d3.extent(d3.merge(data))).range([0,h]);
Note that you will still be unlikely to see your smaller data series, as the ranges of your data are so significantly different

What the right way to graph negative numbers in Protovis?

For the simplest use case, a bar chart with values ranging from -10 to 10, how does one go about coding this cleanly using the Protovis JavaScript charting library?
By cleanly I mean centering the axis, showing x and y axis labels, and representing the column values of the chart where negative values fall below the y axis and positive values exceed the y axis.

Here's a working example: http://jsfiddle.net/nrabinowitz/yk5By/3/
The important parts of this are as follows:
Make an x-axis scale going from your min value to your max value (in your case, it would be pv.Scale.linear(-10,10).range(0,w); in my example, I calculate min and max based on the data).
Base the width of the bar on the absolute distance of the datum from 0:
.width(function(d) { return Math.abs(x(d) - x(0)); })
Then adjust the .left() property based on whether the datum is positive or negative:
.left(function(d) { return d > 0 ? x(0) : x(0) - this.width(); });
Because we're using a simple x-axis scale, the adding axis labels is super-easy:
vis.add(pv.Label)
.data(x.ticks()) // you could also use pv.range(min, max, 1) here
.left(x);