I have six charts in a page, three gauges and three XY charts.
The 3 gauge charts are always visible, while the XY charts are collapsed by default.
On page load, all the charts are correctly drawn, whether they are collapsed or not. But if I refresh all charts, for instance after changing a datepicker value, all the collapsed charts become white.
How can I avoid this? Is there a command to invalidate chart size, or just redraw it when div is resized?
EDIT:
I was able to reproduce a similar behaviour with tabs: on page load all the tabs are correctly shown, but if I click a refresh button to redraw charts, the tabs not currently visible become blank.
You can check here: https://jsfiddle.net/giulia_pinnisi/cqoz5vbg/13/
draw_chart("chart1", data1);
draw_chart("chart2", data2);
draw_chart("chart3", data3);
$('#refresh_button').click(function() {
draw_chart("chart1", data1);
draw_chart("chart2", data2);
draw_chart("chart3", data3);
});
Thank you very much
Giulia
You need to dispose the chart if you want to re-instantiate it.
chart.dispose();
Check the updated example: https://jsfiddle.net/hosfrcd8/
Related
I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.
I currently have a chart with 2 viewing options (regular data and percentages).
I also have a tooltip that shows the results for each line that I'm showing
When I switch options I want my tooltip to keep showing the info (the lines are getting drawn correctly) but instead what I'm seeing is that I'm creating several tooltip boxes for each time I switch options.
My tooltip is an append('g') to my main chart and I'm appending my tooltip box to this tooltip which is appended to my chart which is chartContent
Here's the tooltip box
const tooltipContainer = d3.select(".stackedChart").append("div")
.attr("class", css.divBox)
.style("opacity", 0);
tooltip.append("tooltipContainer")
On update (aka when switching options) I'm already doing this
chartContent.remove()
chartContent = chart.append('g') (to get the new info)
Now for my .divBox I was trying d3.selectAll(".divBox").remove(); but I can't seem to get it to work.
Every time I switch options I get one more .divBoxand I can see the bottom one updating with the info but the one following the tooltip is the top one (I think, I might be wrong).
What are my steps from here? I'm extremely confused
I'm actually developing one app using the javascript plugin chartjs (on the framework Symfony 3) and I realised that when we create a chart before the page it's ready, the legend it's correctly shown, but when I create other chart doing click on a button (after document.ready) the legend it's hidden.
To illustrate my problem, when I do :
// the chart is draw with the legend
drawChart();
// The chart is draw without the legend
$(document).ready(function() {
drawChart();
});
Have you ever meet this problem ? Is there a solution to solve this ?
Big thanks to all who takes time to help me !
I have a highcharts pie chart which allows you to remove slices by clicking on the legend.
http://jsfiddle.net/f3Lx6cxk/
I want to programatically hide slices aftr the chart has been rendered. In my jsfiddle, the button calls
chart.series[0].data[i].select();
which has the effect of sliding the slice out. I want a similar call to remove the slice altogether, but leave it greyed out in the legend (so point.remove is no good). The effect should be the same as clicking on the legend item.
You can use setVisible function:
$('#button').click(function () {
if(sliced)
chart.series[0].data[0].setVisible(true);
else
chart.series[0].data[0].setVisible(false);
sliced=!sliced;
});
http://jsfiddle.net/f3Lx6cxk/1/
I'm using jqPlot to render a graph with zooming enabled.
See example:
http://jsfiddle.net/gcollect/yGLmT/
In the example above, I have a chart with a markerSize of 5 and I have a working zoom-event detection.
I need the plot to change its markerSize, when zoomed in. and reset it to its default, when zoomed out.
I was thinkingt of a solution, without replotting the graph. Since replotting looses the actual zoom level.
For example:
plot1.replot(options)
would change the markerSize, but looses the zoom level again.
Try updating options value using,
options.seriesDefaults['size'] = 25;
Then reploat/redraw the graph. But re plotting will surely resize the graph.