I have a very annoying issue... when I use the xAxis.setExtremes the chart line sometimes starts earlier than the plot area... actually where the Y axis labels are
noticed it happens only when the chart gets initiated on the fly (by code and resized to the parent container)...
so to give you the context
I have a page with two tabs.... first tab is opened by default, the content of the second tab is obviously hidden... the chart is there...
so the chart gets initiated on a container that has display: none.... that means when I click on the tab...the chart width is set to default and not to the container's width....
to solve this issue, I use:
this.chartInstance.setSize(containerWidth);
this.chartInstance.reflow();
when I open the tab... which helps resize the chart correctlyto the container's width after the container actually gets displayed (display: block).
After, all works fine.... except that when I set the extremes, sometimes it overflows...
this DOESN'T happen, when I initialize the chart normally (on a container that is shown from the start) - in my case, when the second tab (the one with the chart) is selected by default... so the container is set to display: block from the start.
Related
I need to build an UI (HTML 5) with two main components: customized chart drawn in HTML 5 canvas; a table.
The gotcha is that the chart must be aligned with the table. If you horizontally scroll the table, the chart content will scroll too.
One important restriction is that the chart is very customized. I will not be able to use any existing chart component. I will have to code it myself plotting it on canvas.
I am struggling to figure out how to do it. How to trigger a repaint on the canvas during the scroll? How to know the corresponding coordinates on the canvas of the beginning of each table cell? How do I write the HTML/CSS of both components to ensure that the layout will not break on different screen sizes?
I am still planning the project and I am pretty open to use any framework/language.
I need some light here.
Can you help?
Thanks!
You can get the scroll position with jQuery scrollLeft() and set your canvas repaint function to jquery scroll() so that it's updated whenever the scroll position changes.
table = $('#container')
updatePosition = () => {
// Synchronize canvas here:
repaintCanvas(table.scrollLeft());
}
table.scroll(updatePosition);
Here is a demo JSFiddle: http://jsfiddle.net/4eg39bfm/5/
I'm getting this error when I load my graph.
I'm using a small graph just with 2 nodes and 1 link in between. The canvas area reload properly but the other one keeps frozen after any change.
What is displayed is the labels frozen on the container
Only the inside area is refreshed propperly
As You can see there is a different height and width between the canvas and the Container that wrap it.
Here is the HTML
I get it, it's solved using a custom renderer.
renderer: {container: document.getElementById('sigma-container'), type: 'canvas'},
I'm seeing a strange issue with a Highcharts bar chart. I am trying to render just under 10k items, and I have my plot options series turboThreshold set to 50k.
The issue is happening whether I structure my series as an array of objects
series: [
{
name: "string",
y: number
}
]
or as an array of arrays
series: [
[
"string",
number
]
]
What's happening is that, up to 4004 items, the chart renders fine. With 4005 items, the top bar is moved down one and is rendered under the second bar. With 4006, the top two are rendered under the third, etc. The x-axis labels remain fine, it's just the bars themselves that move.
Here is a screen shot with 4007 (4004 + 3) items. As you can see, the top three bars are under the fourth.
With the full 10k items, you have to scroll most of the way down (~6000 bars) to see the "first" bar.
I have a calculation to determine the height of the chart based on the number of items, to keep the bar size roughly the same, and that seems to be working fine. Inspecting the containing div shows that it is indeed the height set by the calculation, and the chart renders all of the x-axis labels correctly (even if I let through the full 10k items, the last one is right there at the bottom of the chart).
Any ideas as to why this might be happening? At 4004 items the chart height is 100100 px, is there some kind of limit or threshold within SVG that might be causing the issue?
(Highcharts 4.1.9, jQuery 1.11.3 for backwards compatability.)
Here is a fiddle showing the behavior. Apparently it is related to the fact that I have my y-axis opposite (so the scale is on top) and the y-axis and chart titles set to display: none.
Still would appreciate any ideas on how to deal with this. I would rather not have to show a y-axis title or chart title, but even if I do show them, the behavior still happens.
I agree with what #Mark said in the comments, it seems to be a bug in Highcharts, but it does not have to do with the visibility of the chart title or y-axis title. I did a little more playing around in an updated fiddle, and found that the problem is related to the chart height. A chart height of 100050px renders fine, no matter how many items are in it. At 100075px the top bar looks slightly off, and at 100100px it is definitely wrong.
The reason the problem was occurring for me at around 4000 items is that I was setting the chart height like this:
$('#container').height(function(){
return Math.max(400, (25 * numItems));
});
4002 * 25 = 100050 and 4003 * 25 = 100075, which is why it seemed to start right around that threshold.
I try to understand how to make a bar chart with focus option on basis of the example (the link is below) using d3.js.
The problem is: when it`s need to zoom some bars, for instance, 38, there is the interval between them, but when I select some more bars this interval disappears and bars stick together, there is no space between them.
So, how can I parametrize focus graph scope focusGraph.attr("?", ) example , specify its max size. For example, if in the focus scope the interval between bars is less than 4-5px, further expansion of this scope will be impossible - its max size will be achieved.
I am dynamically creating a chart within a map popup (triggered when user clicks the map) using dojo 1.7 (built into the Esri API that I am using).
var c = dojo.create("div", {
id: "demoChart"
}, dojo.create('div'));
After setting the chart properties (data, theme, etc), if I call chart.render, the chart renders correctly but at the wrong size (too big for the infoWindow container div).
However, if I call chart.resize(175, 145), the chart does get created at the correct size, but does not get created on first click, but the second click.
To replicate please see this JSFiddle, and refer to lines 49-53 in the Javascript.
map.infoWindow.setContent(c);
// Chart Resize will resize the DIV as needed.
// However, the initial click will not show the chart
chart.resize(175, 145);
// Chart Render shows the chart on first click, but does not resize the div
//chart.render();
I was under the impression that the resize method included calling render within it. Therefore I am not too sure why I am getting this behaviour.
I need to know what needs changing in order to create the chart div at the same size as the parent div that it sits within.
The reason that the chart is rendering with the default size (400 x 300px) is because the chart node (div#demoChart) does not have any dimensions.
Furthermore, until the chart node div is visible, it will not have any actual dimensions (only style dimensions) for the chart to use. It then falls back to the default size of 300 x 400px.
To make your code work:
Add a css style for the div
#demoChart {
width: 175px;
height: 145px;
}
Create the chart after you have shown the info window and the chart node is actually visible. The chart gets it dimensions upon instantiation (in the constructor() method, rather than in the render() method as you might expect).
I have edited your JSfiddle to make it work (view JSfiddle).