Adjusting distance between points in RGraph (javascript) - javascript

I'm using RGraph's Line charts to plot some chronological data. It works fine, except that the distance between the successive points is always the same - irrespective of whether they are two hours or two months apart. I would like to customize it so that the distance represents the actual time interval between the points. Is this possible using the Line charts or any other charts in RGraph?

I contacted RGraph support with the above question, and they have suggested that I use Scatter charts instead:
You'd be better placed with Scatter chart. With this chart you can set
the maximum X value and the X axis is scaled (which you can show if
you wish).

Related

Highcharts - Area chart advanced layering

I'd like to have a version of a basic area graph where the layering works not by adding one chart and then overlaying a second chart, but instead for every x value, a colored line is drawn from the higher chart's y coordinate to the y coordinate vertically below on the lower chart, and then a different colored line is drawn from this lower chart's y coordinate to the x axis.
Here's images of first the default chart and then my edits as examples.
I anticipate having potentially many charts on one page (anywhere from 1-5,7,10 who knows). And the reason I'm not just putting the "smaller" of the two charts on a higher layer than the "larger" is that they could swap positions over time. See here for two data sets that that swap in which chart has larger values. I'm leaning towards not allowing transparent charts like the default behavior because when many charts of different colors are overlaid their colors mesh together and become difficult to discern.
Is what I've described possible? Are there alternative ways I could accomplish this? Any help would be appreciated.

adjust x-axis labels flot js

Is there any way to limit the number of x axis values that will be displayed given that there are many points to be displayed on the graph? Otherwise,the x-axis labels overlap if you don't zoom. For example, please see the fiddle I've created http://jsfiddle.net/ggggg/jx3q8uoy/10/
enter code here. You can zoom in and out with the mouse wheel. If you click on update I reload new data on the graph but since there are many points for the size of the graph the x-axis values get mixed with each other which is not good. One cannot make a difference which is which unless they zoom. Is there any way to limit the number of x-axis labels to be shown to just a few so that they don't get mixed in such a way when the point amount is big and if you zoom in then you will be able to see the specific x-axis labels? For example, please have a look at the vis.js graph here http://visjs.org/examples/graph2d/03_groups.html. See when you zoom in or zoom out with the mouse wheel the x-axis labels get rescaled and many of them get hidden and if you zoom in they are shown. I need something like for flot.js
Thanks

d3.js time axis on a radial/pie graph

I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site

Draw vertical line when two lines cross in Highcharts

I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.

Google Charts Annotated Time Line - adjust y-axis on zoom

I am using the annotated time line chart in google charts API. I have a long time line of data (20 years) and range of the data goes from about 0 to 900,000 (see picture) If you zoom on the most recent year, the max from this set is only about 400,000. So when we zoom in, I don't need the y-axis to go all the way to 900,000, but only to 400,000. This way the chart would be easier to read.
What I would like to achieve is the chart to re-adjust the maximum vertical axis value every time I adjust the zoom.
Zoom in on most recent year:
Before I start hacking my way through this, does anyone know a good way to do this?
Thanks!
Use the scaleType configuration option. Specify value of maximized if you have one series. Specify allmaximized if you have more than one series. This snippet works on the code playground:
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {'scaleType':'allmaximized'});

Categories