Jqplot stacked bar chart live update - javascript

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;

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

Dynamic Gridlines on Highcharts

The problem: Enable vertical or horizontal gridlines on a bar or column chart. My current implementation is not dynamic enough. Applying vertical gridline on column chart works fine but if you change the chart type to bar then its incorrect.
How do I make these vertical and horizontal gridlines adapt to the chart type?
jsfiddle:
http://jsfiddle.net/4vG42/819/#
In a highcharts bar graph the xAxis is displayed vertically, and in a column graph the xAxis is displayed horizontally. Which means that you have to set gridlines to 1 and 0 in the xAxis and yAxis based on this. For example:
//For a column graph
chart_type = 'column'
xAxisGridLines = 0
yAxisGridLines = 1
//For a bar graph
chart_type = 'bar'
xAxisGridLines = 0
yAxisGridLines = 1
Here is a live example where I set the gridlines based on the chart type: https://jsfiddle.net/ewolden/5kft9rva, press the button to toggle between bar and column graph.

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.

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.

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