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.
Related
I would like to plot the values of x and y suing a progressive line chart for my presentation. Any pointer to the right direction or where I can read I will appreciate. So far the closest I have gotten is chart.js here https://github.com/chartjs/Chart.js/blob/master/docs/samples/animations/progressive-line.md
sample of expected resyult
I would like the graph to grow progressively upto a maximum set value of Y as represented by point k
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.
I have a line chart with x Axis being numeric and y axis being numeric as well. I want the y axis to be reversed so that higher values are at the bottom of the axis and lower values at the top. I looked at the API Docu and didnt find a config to reverse the axis or so. Any clues?
In ExtJS 3 there was a reverse config option to get this going. With ExtJS 4 you have to use workarounds.
For reverting the x axis values you could use the sorters property of the store connected to the chart.
But for reverting the y axis you have to convert your values. Here's a sample on how to achieve this: http://www.sencha.com/forum/showthread.php?132148-What-has-happen-to-quot-reverse-quot-config-on-chart-axes&p=949699&viewfull=1#post949699
I am trying to draw a chart using d3-js. I want X axis values to be [0.25yrs; 0.50yrs; 1yr; 2yrs; 5 yrs; 10yrs; 15yrs; 20yrs; 30 yrs; 50 yrs]. This can be done using d3's tickValues() & tickFormat() functions. But I need to maintain certain distance between 0.25, 0.50 & 1 year ticks, because most values belong to these years & more distance between them will reduce overlapping of drawn circles.
The tick position I need is something like :
You can see the distance between .01 and .02 in above image. How can we do that?
You will need to implement a custom scale that maps your input range to this non-uniform output range. Then you can give this scale to your axis and it will draw the ticks accordingly.
You could have a look at the scales that D3 provides if anything is close enough to what you want (a log scale maybe?), but if you can't find anything you have no choice but to implement your own.
am trying to use WebGL to plot a 3D surface. My problem is that it is not letting me provide the x and the y values. It plots the z axis values against the values of x ranging from 0 to n and the values of y ranging from 0 to m (all integral values).
How can I make a surface where I can also provide the x and the y values for the 3D surface construction. Also if its not possible to do it in WebGL then what solution can I use?
PS Also, WebGL tooltip function doesnt function. any comments on that?
I'm guessing that you are saying that you can't specify the scale of x and y relative to the plotted (z) value?
What you need is to apply a non-uniform scale to the entire surface (the modelview matrix), so that the X and Y axes are stretched into the shape you want. Are you using three.js or a similar library, or... ? The answer will define the specific commands you should use.
As an example, let's say that you have a 100x50 plot, with the spacing forced by the library to 1.0 between x and y. Instead, you want the size to be 300x200 in x and y. You would scale the matrix by (3,4,1).
If you want to change the displayed range of your Z data, I would suggest adjusting its zero point (i.e., translating it up or down to be centered) and then scaling appropriately as-needed.