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.
Related
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)
I have hbox layout, where in the left it shows tree and on the right
it shows tabs.
But the problem is I should not use hbox, but I should use border
layout.
When I use two column layout code is breaking.
Providing my code with hbox layout.
Can you guys tell me how to make the below code work in border
layout.
https://docs.sencha.com/extjs/4.1.3/#!/api/Ext.layout.container.Border
I am trying to change border in the below part of code
var createTreeAndContentPanel = function(tree) {
var retval,
contentPanel;
According to docs, if you are using a "Border" layout, at least one of the child panel has to use region : "center".
So you need to apply region : center on your panel containing tabs, and region : west to your panel containing tree.
Finally you need to add these 2 panels inside a parent panel with a layout: border
From doc :
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
I have an HTML page with the following divs that are being filled with a chart using Highcharts.
By default one of them is hidden and is then displayed based on selections on the page.
When I show the div programmatically it only takes a small part of the screen width but when I show it by default, i.e. without the CSS hiding then it takes the full screen width (which is what I want).
Can someone tell me how I can set the divs to keep full screen width or how to reset this after being shown ?
My divs:
<div id="containerR" style="height:600px; margin:0 auto; min-width:300px;"></div>
<div id="containerC" style="height:600px; margin:0 auto; min-width:300px; display:none"></div>
My JS function:
$('#viewC').on('click', function() {
$('#viewR').removeClass('btn-primary');
$('#viewC').addClass('btn-primary');
$('#containerR').hide();
$('#containerC').show();
});
Many thanks in advance for any help with this, Tim.
Problem is highChart probably draws according to available space, but if its hidden it messes up its calculation. Even if you show it later and set the width, the chart has already been drawn with the other size.
You need to unhide it when you draw the chart, and after that you can hide it again
I'm using Dojo's (1.7.3) chart component (dojox.charting.chart) inside an HTML table (and I cannot change this because it's a kind of template provided by someone else where I have to put charts at unknown locations).
Actually (simplified) HTML code may look like this:
<table class="fit-parent">
<tbody>
<tr>
<td>
<div id="chart123" class="full-size-chart"></div>
</td>
</tr>
</tbody>
</table>
And its CSS is something like this (consider full-size-chart equivalent to fit-parent):
.fit-parent
{
width: 100%;
height: 100%;
}
Code to create the chart:
<script type="text/javascript">
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/Columns",
"dojo/domReady!"
],
function (Chart, theme, ChartType) {
var chart = new Chart("chart123");
chart.setTheme(theme);
chart.addPlot("default", {
type: ChartType
});
chart.addSeries("Series name", chartData);
chart.render();
}
);
</script>
Rendered table is inserted inside others Dojo containers (BorderContainer and ContentPane) with both a header and an edge panel. Site is made with ASP.NET MVC3 and above code is inside one view page, main layout is inside _Layout.cshtml page.
The problem is that the chart size is not correct, it's bigger than the size of the page and scrolls appear. Ideally the table should fit the content box and resize with the window size.
The green box is the table (2 rows in this example). The chart should fill the entire row (because of 100% width and height), table layout is right (it fills the "document area" and everything else is fine). Wrong with my code/layout? Please remember I can change HTML (and use CSS classes) but I can't ask them to use CSS float/positions directly or to "imagine" final layout with CSS (probably they use a simple HTML editor or notepad).
Chart doesn't support CSS-set sizes, nor sizes in percents. You should specify a chart size either directly on its node in pixels before creating, or during creating as 2nd and 3rd parameters. If you want to support a fluid layout, use a simple JavaScript tracking code for that and resize chart accordingly when needed.
I'm using jqPlot to create a graph inside a div tag. jqPlot used the canvas element to render the graph. I'm trying to add some interactivity to the graph, i.e. zooming, where the user can zoom in and out using the using the left and right mouse-click, respectively. I want to disable the context menu when the user right-clicks on the graph. I've tried several approaches, including...
Adding the the oncontextmenu attribute to the parent div containing the graph canvas:
<div id="myGraph" style="width: 908px; height: 600px; " class="jqplot-target" align="center" oncontextmenu="return false"></div>
Dynamically applying the oncontextmenu param to all the children after jqPlot renders the graph:
//Code to render the graph
//...
$("#myGraph").children().attr("oncontextmenu", "return false");
Using jQuery's approach instead of regular JS:
$("#myGraph").children().bind("contextmenu",function(e){
return false;
});
And using a custom plug-in from this great site and applying it's disable function as follows:
$("#plot_testEventHistogram").children().disableContextMenu();
But none of these approaches seem to work, I still get a context menu when I right-click on the graph. It's not a showstopper, but is very annoying and would be nice if it can be effectively disabled
canvas.oncontextmenu = function() {
return false;
}
http://jsfiddle.net/9ZWv2/
Works in chrome