Custom highlight to jqPlot stacked bar chart - javascript

When adding a custom highlight to the jqPlot chart, I simply use
$('#chart').bind('jqplotDataHighlight', function (ev, sIndex, pIndex, data) {
var chart_top = $('#chart').offset().top,
y = plot1.axes.yaxis.u2p(data[1]); // convert y axis units to pixels
$('#tooltip').css({ top: chart_top + y });
}
as seen in the last example here. This works great on my simple bar chart. I then try the same on a stacked bar chart, and the x-values are off. Does anyone know how I can get these values or what I am doing wrong?

Check out how I do a custom tooltip on my stacked bar chart.
The jsfiddle sample is available here.

Related

Aligning the xAxis of highcharts

https://jsfiddle.net/hjzeo6u2/
In the above Link I have reproduced an issue where I wanted to align the X-Axis labels just below the respective series plots. As of now both the X-Axes labels are at the bottom of the complete plot of both the series which is not expected.
I have tried with the align property of xAxis in from highcharts api reference https://api.highcharts.com/highcharts/xAxis.labels.align
but could not find the expected solution.
The expected result should be that each X-Axis has to be just below its corresponding plot. Just like a series plot and then its X-Axis after that another series plot and then its X-Axis. Also as and when I resize the Y-Axis using the separator in between the plots,the X-Axis also should reposition itself accordingly.
Would you like to achieve something like this? Demo
chart: {
events: {
render() {
let chart = this,
xAxis = chart.xAxis,
controlLine = chart.yAxis[0].resizer.controlLine;
xAxis[1].axisGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
xAxis[1].labelGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
}
}
},

D3 how to draw chart with a x data between two y data

I want to draw chart that can set x between two y for example I want to draw a chart with x=100 and y1=200 , y2=500 just vertical line with good detail which chart can do that for me
something like this image
With specific x and y Which chart I should use to draw this
Here you can see how to make Bar Chart using d3.js
Bar chart using d3
Now the thing thing that you are trying to achieve is called floating Bar Chart.Although there is not any ready-made Floating bar chart available in d3. But we can achieve it by doing certain change in Bar chart itself.
When we are appending Rectangle in bar classes in the above example just change the height attribute to
.attr("height", function(d) { return height - y(d.higher-d.lower)
In this way it gives rectangle from the point lower to higher.
Json is in this format
var jsonData=[
{"letter": "A", "higher": .08,"lower": .05},
{"letter": "B", "higher": .05,"lower": .03},
{"letter": "C", "higher": .04,"lower": .02}
]
SEE DEMO HERE
And for learning d3.js follow this link

NVD3 (D3 JS) how to remove y2 axis

I'm trying to use the following example which is a line and bar chart combined.
NVD3 Line & Bar Chart combination
The problem I have is that I want the line chart and bar chart to both use the same figures from y1 axis, but I can't find out how to get rid of the y2 axis and do this.
If someone could point me in the right direction it'd be a great help.
Thanks in advance.
Edit:
A JSFiddle of the problem I'm experiencing. I'm just using the example from NVD3's download and have added in Lars' code just before the return chart; line.
JSFiddle
There's no option to disable the second y axis. What you can do is set it up to have the same scale as the y1 axis and then remove it after creating the graph, i.e.
d3.select('.nv-y2.nv-axis').remove();
This will leave some empty space where the axis used to be, but at least it'll create the impression that there's only one y axis.
Much like Lars' answer, this leaves a gap where the axis used to be, but I hid this with CSS.
.y2-axis {display: none}

draw only grouped multibar chars using nvd3

I draw a multibarChart using nvd3 library and it 's working very well but it gives me two radio buttons to choose wether i want stacked bars or grouped bars.
Can i disable this and make it only show grouped bars?
This is the javascript code :
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
var x = data();
d3.select('#chart svg').datum(data()).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
The code below will show you bars in a Grouped manner while hiding the controls to the flip between Stacked/Grouped
var chart = nv.models.multiBarChart().stacked(false).showControls(false);
Hope it helps.

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