Inside of a JQuery resizable div I have a JQuery Accordion Widget. Inside of each accordion element is a table that is centered in the accordion div by setting width: 100%; margin: 0 auto;. In each table is a td element that has a Google Visualization Column Chart.
When the resize event is triggered I'd like the Google Visualizations to redraw so the dimensions of the Charts fit the new container sizes. The problem I'm having is that the only Chart that is redrawn with the proper dimensions is the one in the visible accordion div.
I'm assuming that when a div element is set to display=none the container dimensions are ignored in the resize event. If this is true does anyone have any good suggestions to work around this?
I should also add that the width of the visualization is set to '100%' not a pixel number.
Thanks
You may need to set explicity dimensions in in your chart.draw() call since you're drawing a chart on a hidden element. So for your options variable you would set it to:
var options = {'width':400,
'height':300}; //substitute your desired dimensions
chart.draw(data, options);
Adjust accordingly if you're using one of the other Google Charts draw methods (wrapper.Draw() or drawChart()).
From another recent similar question, the Google Charts API pulls the dimensions from the container element when the draw call is made, but if the container is hidden, it has nothing to pull from.
related: redraw google charts on hidden bootstrap tab pane
Related
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/
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
I need to insert an image inside of a donut chart but when using bootstrap and when it becomes responsive the location of the image gets out of the donut chart. I want the image to be in the center of the donut chart, how can i do this?
Example Code : http://paste.ubuntu.com/16889111/
Your code for chart.renderer.image is using fixed values, not relative:
// Render the image
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 220, 200, 60, 60)
.add();
I would suggest making your four values (x position of top corner, y position of top corner, image width, and image height) variables that are based on the chart container's current size.
Consider setting values based on $('#chart').height() and $('#chart').width() and test out the chart.redraw() and chart.reflow() functions to make sure the image within your chart gets updated when the viewport changes.
Here's some links in the API documentation that may be helpful to you:
renderer.image(): http://api.highcharts.com/highcharts#Renderer.image
chart.redraw(): http://api.highcharts.com/highcharts#Chart.redraw
chart.reflow(): http://api.highcharts.com/highcharts#Chart.reflow
I am trying to resize a Kendo Chart. I have multiple charts on the screen and when I drag one to a specific area of the browser I want it to resize. I initially set my chartArea to 400 x 400 in my javascript and then use the following code to resize.
$(id).kendoChart({
chartArea: {
width: 200,
height: 200
}
});
$(id).data("kendoChart").redraw();
Before:
After:
Why does my chart go completely blank and not have any data on it?
Update:
Interesting thing I have noticed is that if the chart redraws a second time it shows up correctly (i.e. when I drag a second chart over to the area, the first chart redraws and is correct but the second is now not showing correctly).
As shown in the API docs, the correct way to resize a chart is as follows:
var c = $("#chart");
c.kendoChart({
//options
});
//Then later
c.css("width", "800px")
.data("kendoChart").resize();
I am using jqplot for charting report in my current application..
I have one ChartCtrl div which is using as a chart placeholder.
And one Parent Div is controlled for positioning chart in page. I am calculating the width of the chart dynamically based on the no. of bars are present and initiate the scroll for the same for parent div, so that if more bars are plotted i can scroll the chart horizontally.
But when I scroll the chart, the Left Yaxis is also scrolling which is expected.. But is there any way to fix the left Y-axis only the chart content is scrollable in jqplot.
Please provide some suggestions on this.
I also have the same issue, but I solved by using little bit change in jqplot.css. Just in your html add this style class:
<style type="text/css">
.jqplot-axis.jqplot-yaxis{
position : fixed !important;
}
.jqplot-series-canvas {
overflow-x : scroll;
}
</style>
If your problem is solved then just vote...