The content overflows after the echarts line chart refreshes the page...
It is normal to load the chart for the first timećbut after refreshing the page, the content overflow...
had tried '''this.echarts resize''' before '''setOption(option)''' it doesn't work....
//htmlPart yourEchartUsingElement
<div ref="myEchart"></div>
//JS Part this.optionCompleted is your echartData
var myChartCompleted = this.$echarts.init(this.$refs.myEchart);
myChartCompleted.setOption(this.optionCompleted)
myChartCompleted._dom.childNodes[0].childNodes[0].style.height="29rem"
myChartCompleted._dom.childNodes[0].childNodes[0].style.width="166.4rem"
You can use this method to get the DOM node of the canvas used by echarts and assign values to its properties. Every time the window changes, you execute these lines of code to re-render echarts (Google Translate)
Related
On a webpage I have some charts that I'm creating with pChart and they take a while to generate.
In order to make the page finish loading in a reasonable amount of time, I've put instead of these charts some pictures (also generated with pChart) that just have a text that says 'Click here to load chart XYZ'.
My problem is that when the user clicks on the picture, the div shrinks to zero and that causes other divs to change position. So I'm thinking of displaying a loading (animated) gif in place of the charts while they are generated. This should also provide a visual indication after the click that the chart is being generated, as well as prevent the div from shrinking.
Here's the code that I'm using so far:
<head>
<script>
function myFunction(where){
var content = '<img style="some style" src="chart.php">';
document.getElementById(where).innerHTML = content;
}
</script>
</head>
<body>
<div id="id1" style="some style">
<img style="some style" src="click-to-load.php" onclick="myFunction('id1')">
</div>
</body>
The above works as I've described: the div shrinks and the user doesn't have any other visual indication that something is happening in the background and there will eventually be displayed something as a result of the click.
So, how do I change the onclick event to display a gif, request the php chart (which is just a jpeg image), and when it's ready dsplay it instead on the loading gif?
On one hand, to avoid the shrinking issue, you could set a width and a height on <div id="id1"></div in order to keep this room even if there is nothing inside. The rest of elements in the page will remain where they are.
On the other hand, when you click on the initial image, you want two things to happen: 1) to swap this image for a gif, 2) and to execute a php file that will load some content.
You only need to set var content with the gif you want to show up, which will happen inmediately, and execute the php file, that will take a while, and then replace the gif with its content.
By the way, the src attribute should have the path to the image.
My intention is to responsively resize a chart in Kendo UI. At the moment, I am testing out the functionality so I wrapped it in an ng-click function.
public Click(): void {
if (typeof this.$scope.overviewPiechart !== 'undefined')
this.$scope.overviewPiechart.refresh();
}
I placed the size information in the k-chart-area directive in the HTML:
k-chart-area="{height: {{ KC_PO_PCS.GetChartHeight() }}, width: {{ KC_PO_PCS.GetChartWidth() }}}"
The intended output is that the chart will resize to fill the page, but the actual output is that the chart blinks, and then reloads while maintaining the same size.
I have also tried overviewPiechart.redraw()
How can I make it so that my chart gets resized?
Moved from comments seeing as how it did work for you:
Isn't the correct call resize? http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-resize
Context :
I use ng-show (or ng-hide) to show a chart (hightchart-ng) only when my data is loaded.
The chart redraws when the data is loaded. So in theory, it redraws at the same time I show the chart. But the chart redraws when it is still not displayed (display: none), so it applies default size (not the real size available when shown).
Question :
Let's say i have an expression A used in my template with ng-show :
<div ng-show="A">
<highchart config="myconfig"></highchart>
</div>
I can't watch A to redraw manually my chart, cause it would be the same problem.
I don't want to know when A is true, but whenA is true AND ng-show ended to show the chart.
Any idea ?
Edit Solution : I found a solution. Creating a directives which look at the class of the element, like it is explained here :
Running code after an AngularJS animation has completed
On the site there are several pie charts. All diagrams are created immediately after the page loads. At the moment of creation, part of the diagrams is hidden (the parent layer display: none)
Visible charts are set correctly, hidden charts have parameter is incorrect width.
The layer of the diagram
<div id="DGramm" style="width: 100%;"> </ div>
The result - the diagram created on the entire width of the page, but no of the width of the parent layer. How to do the right, to take the width of the hidden layer?
At this point, all that came up - to create a chart after the first showing of the hidden layer.
You could trigger the window.resize event to update the Chart size. Add this script to your page.
$(document).ready(function () {
$(window).trigger('resize');
});
See the answer here. Thanks, david.
I'm using the jScrollPane plug-in along with my SmartAutocomplete (https://github.com/laktek/jQuery-Smart-Auto-Complete) and i'm appending the Autocomplete results into my main containing div for jScrollPane so the user can scroll through them.
This works, but my problems is when a new set of data is appended to my jScrollPane the height (scroll area) does not update, it always stays the same height.. so items are either cut off or there is a large amount of white space at the bottom.
I've looked at the demo for their dynamic content example but can't get this to work: Demo here
Anyone have any ideas?
The property you are looking for is the autoreinitialize property. You need to call something like:
$('#idofyourcontainer').jScrollPane({ autoReinitialise: true });
when changes are being made to your container.