draw only grouped multibar chars using nvd3 - javascript

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.

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)
}
}
},

update kendo ui series

I'm trying to update a series of chart. I have found some methods in chartOption but when I change (for example the width) the chart doesn't update.
Is it possible to update the series and if it is how I can do it?

After changing the chart options, you need to call redraw().
For example:
var chart = $("#chart").data("kendoChart");
chart.options.series[0].width = 4;
chart.redraw();
DEMO
In the demo, click the button to change the first series' width.

Jqplot stacked bar chart live update

I want to update the live date with Jqplot stacked bar chart. I have tried by the following way, but I cannot update the series.
plot3.series[0].data = da1;
plot3.series[1].data = da2;
plot3.series[2].data = da3;
plot3.series[3].data = da4;

How to add a highlight mark/area to a chart?

I have a time series chart created using D3 js. I wanted to add highlight areas for certain time intervals to show certain activity occurred during that particular time (there will be different types of activities so each highlight mark will have different color based on its type). I want this highlight area to cover the whole chart vertically from top to bottom.
Here is a sample:
I came across this question which shows how to do it using highcharts.
As of now I use another charting library and I draw an area chart whenever I want to display such highlight areas. Is there a better way to do it using d3 js or should I draw a set of area charts?

I saw this question once. Time for example.
You can combine area and line chart together.
// y.domain()[1] so area is drawn to cover all chart
var area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.x_axis); })
.y0(height)
.y1(function(d) { return y(y.domain()[1]); });
var line = d3.svg.line()
.x(function(d) { return x(d.x_axis); })
.y(function(d) { return y(d.y_axis); });
Here's an example of AAPL stock chart with highlight from 2012-04-13 to 2012-04-17.
http://vida.io/documents/TzcZJX4itBebKciQZ
Full code:
https://gist.github.com/dnprock/dea634bfdb3c33149c61

Custom highlight to jqPlot stacked bar chart

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.

Categories