We Keep Coding

The dataset for bar graph is not set properly using ng2 charts and ng5-slider in Angular

I have a range slider and bar graph. I am trying to change the color of bar graph using range slider, i am able to successfully change the color of bar graph using slider, but the data of the bar graph is not shown properly. https://stackblitz.com/edit/angular-ivy-wjpkcr

So I found the issue, but you will have to work a little bit on it to be fully functional.
it appears that when you set [datasets]="getBarChartData()" the chart is trying to render but is stuck in a loop because the value of the background color is infinitely changing inside getBarChartData(), note that you have a two way binding in your slider:
<ng5-slider [(value)]='value' [(highValue)]='highValue' [options]='options'>
and you can't rely on that to properly update your chart.
What I did is, I added a valueChange event to the slider and update the chart whenever a value changes in the slider.
<ng5-slider (valueChange)="logValue($event)" [(value)]='value' [(highValue)]='highValue' [options]='options'>
I also added ngOnInit() to properly initialize dataValues
link to demo: link

How to expand chart to match width of container using ngx-charts

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!

Different size between Canvas and Container SigmaJS

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'},

Chart not appearing with .resize but does with .render

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).

Using YUI in Javascript, How do I draw overlays on datatable/ScrollingDataTable?

I need to draw overlays spanning one or more rows on YUI datatable/scrollingdatable based on the mouse activity ( drag and drop ).
I have no issues with drawing overlays on top of datatable.
But I want the overlays to be moving along with the rows when I scroll the datatable. As of now after drawing the overlays they remain static irrespective of the movement of the datatable scrollbar?

You can align your overlay to a specific dom element using the context property. It sounds like this is what you want to do. There is more information about this in the Overlay documentation.
Your code would look something like this:
var myOverlay = new YAHOO.widget.Overlay("myOverlay", {
context: ['cellId', 'tl', 'bl']
});
This would anchor the top left (tl) corner of the overlay to the bottom left (bl) corner of 'cellId', where 'cellId' is some element in the table row that you want to align with.