Automatic sizing of jqplot bar graph for varying data range - javascript

Basically I want jqplot bar graph to be able to size itself automatically according to the data range passed to it.
In my application the data range (ordinates) and the number of ticks may vary, so I need some help regarding sizing my chart properly to avoid any overlapping.
I have tried using HTML scroll with fixed height and width but it didn't work as I hoped.
Also any help regarding X-Axis scrolling of jqplot will be highly appreciated.

You can get your dataBounds value after rendering using :
var minY = plot2.axes.yaxis._dataBounds.min;
var maxY = plot2.axes.yaxis._dataBounds.max;
(You can get minX and maxX similarly using xaxis.)
Then you can ask jqplot to use this bounds to plot exact range using :
plot2.axes.yaxis.min = minY;
plot2.axes.yaxis.max = maxY;
(Again act similarly for xaxis);
Finally, replot your graph : plot2.replot();
Your final graph has bounds according to your data values.
Edit
You can work on numberTicks as well using plot2.yaxis._numberTicks or plot2.yaxis.numberTicks (not sure which one is effective)

jqplot does not have inbuilt functionality to introduce scroll bars in case of large data. You have to apply workaround on your side like jquery slider or HTML div scroll.
However I suggest you to use zoom feature of jqplot as explained here

Related

Add grid lines compatible with zoom and drag in d3.js

I am trying to add grid lines to my existing code, and have seen many tutorials but none with zoomable and dragable grid lines.
A stripped version of my existing code is here :
http://jsfiddle.net/p4cmx1kj/
I understand that I must have a scale :
this.x = d3.scale.linear()
.domain([this.options.xmin, this.options.xmax])
.range([0, this.size.width]);
And draw it later. But I don't know how.
I would like to have vertical grid lines that "change" as I zoom (eg : go from 10-20-30-40 to 10-15-20-25) and move as I drag my graph around.
How can I do that ?
I guess you could do something like this example :
http://blog.scottlogic.com/2014/09/26/an-interactive-stock-comparison-chart-with-d3.html
And then add some limit, where if above a certain threshold it adds more / less tick labels on the axis. (At-least that is what I plan to attempt to do on a force layout now).
Or better still make your labels a function of the range, eg something along the lines of min + n*(min-max)/4 , where n is your tick label {1,4}.

Spline chart drawn on the xaxis in case of single value or constant values - highchart

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

How to prevent tiny bars on charts in Highcharts

http://d.pr/i/U5bb/4n26fLZr
Here's an example of a chart of ours. Pretty unreadable, yea? Is there an easy, dynamic way avoid this? I've tried implementing a dynamic height, but the problem is I can never seem to find the sweet spot that accommodates a smaller number of bars, and a larger number of bars. I feel like this has to be a problem that others have encountered before. Any help would be appreciated!
I accomplish this by doing the following:
1) determine height of non-data elements on the chart (ie, explicitly set the top and bottom margins, and add them together to get a base_height for the chart
2) determine how much space I want each bar to take, including bar width, and padding between bars, and set as my height_multiplier (I usually end up going for 20-25 pixels, personally)
3) on pulling my data, determine how many bars will be needed, and set as my bar_count
4) calculate: chart_height = base_height + (bar_count * height_multiplier)
5) Pass that value to the html to set the height of the chart's containing element.
If your data will vary so much that the chart height in your example works some times, but then you have as many data points as you've posted there, there simply will not be a 'sweet spot' that will handle both extremes well.

d3.js - blank object when applying y-axis scale

I'm trying to apply a scale to y-axis in my chart, but when I do it I get a blank svg object.
I did the same thing with the x-axis and it's working fine.
Problem happens when you uncomment this section
// .y(function(d) {
// return yScale(d[1])
// })
http://jsfiddle.net/MgwR5/1/
Could anyone tell me what I'm doing wrong?
The area functions are y0() and y1(), not y(). Ref: D3 API documentation
Have a look at the js bin. I've put a bunch of comments in that should help and I've assumed that you wanted a line chart.
If you want to put axis's on your chart you should be looking to use the d3.svg.axis function. It does most of the heavy lifting for you. You also need to make space for the axis try using some padding and margins (you might want to look at this example or the example on the js bin d3 page - use the link at the top of the google groups d3 page). You also probably want to separate out your axis's and your plot by using svg's group ('g').
Cheers

How to set custom width of bar in NDV3 Discreate bar chart

Am trying to build vertical bar chart using nvd3 charts.
Problem :
If chart has single record, bar width reaches 3/4 of the chart width.
Question :
How to change width of the bars in Discrete bar chart?
Have attached chart please guide me..
If you look at the source here. You'll see that the width of the rectangle is calculated based on the number of items using rangeBand. There doesn't appear to be a way to set the width of the rectangle though the library's API.
If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that would return an empty string if the value was zero, but that assumes zero is not a valid number in your data set.
Use the follwing code to set the width
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
or you can use
groupSpacing : 0.57,

Categories