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).
Related
I'm trying to use ngx-charts to display an area chart that spans the full width of my page (it's supposed to match the width of the horizontal line above it). However, it appears that when generating a chart there is some sort of padding inside the svg, which I imagine is useful if you have a legend etc but I am not using that, here's what I see:
See how the actual area chart doesn't expand the full width?
My code:
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="heatmaps"
[curve]="curve"
[showGridLines]="showGridLines"
[tooltipDisabled]="tooltipDisabled"
(select)="onSelect($event)">
</ngx-charts-area-chart>
And my config variables in my component.ts
curve = d3.curveNatural;
showGridLines = false;
tooltipDisabled = true;
colorScheme = {
domain: ['#3f3f3f']
};
As you can see I am not using the view attribute so the chart should expand to the width of the page. I was thinking I could utilize a viewBox on the svg but not quite sure, any thoughts?
Thanks!
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 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.
How could I implement such mouseover effect that whenever mouse is over the linechart it shows every lines Y-value in an tooltip on hovered X?
So, in the end by moving mouse over the chart it should always show a tooltip that is updated constantly with Y value based on changed X? Now it shows tooltip only on X-scales steps e.g. 2010,2011,2012,2013,2014...
I don't have time at this very moment to write a complete solution, but I can try to point you in the right direction in terms of the part you will need that is directly related to the Google Charts API.
There Is Not A Simple Solution
First off, I'd like to make it very clear that there is not, to my knowledge, a simply solution built into the Google Charts API for this. Anything you right for this will involve rendering your own tooltip element, positioning it to the mouse location, and filling the tooltip with data yourself.
A JavaScript Framework of your choice will probably help a lot. Most have plugins or modules to handle mouseover and mouse position detection, though I can't recommend any specifically because I haven't tried this.
Chart Layout Interface
What you need to get the data values belonging to the mouse location is the Chart Layout Interface. You can get this as follows:
// create a line chart and set up a variable to store your interface
// on outside the scope of your ready handler, so you can use the
// interface in your mouse event code.
var layoutInterface;
var chart = new google.visualization.LineChart(document.getElementById('container-id'));
// set up a handler for the chart's ready event
// the chart layout interface is not available until the chart has
// been drawn
var readyHandler = function(){
layoutInterface = chart.getChartLayoutInterface();
};
// register the event handler
google.visualization.events.addListener(chart, 'ready', readyHandler);
I learned this from the demo here.
You will be using the getHAxisValue(xCoordinate) and getVAxisValue(yCoordinate) methods on the layout interface to get the data values corresponding to the x and y coordinates of the chart. The coordinates are relative to the chart's container element. See the Line Chart Documentation for information on methods available on the layout interface.
Mouse Event Handling
The mouse handling part of this is beyond the scope of my knowledge, but I do know that it is possible. I think you need to register a mouse enter event handler on your chart's container element, which would then register a mouse move, and mouse exit on the same element. The mouse exit would set display:none on your tooltip element and de-register the mouse move handler. The mouse move handler would set the absolute position of your tooltip element to the mouse location, and set it's content to the values retrieved from the chart layout interface.
Good Luck!