We Keep Coding

How can I update my javascript variable values?

I'm using some javascript to draw a svg path using divs as endpoints.
var thepath = $('#thepath');
var startx1 = $('#box2').position().left;
var starty1 = $('#box2').position().top;
var realDealPath = 'M ' + startx1 + ',' + starty1;
var startx2 = $('#box3').position().left;
var starty2 = $('#box3').position().top;
realDealPath += 'L' + (startx2+50) + ',' + starty2;
var startx3 = $('#box6').position().left;
var starty3 = $('#box6').position().top;
realDealPath += 'L' + startx3 + ',' + starty3;
thepath.attr('d', realDealPath);
It works great! But when I scale the browser, the svg path doesn't adjust to the new div positions. Is there a way to keep these values updated?
Thank you so much for your help! :)

Javascript not showing up total value in middle of Oracle APEX Donut chart

I am trying use below code (found from a forum) as JavaScript initialization code in Oracle APEX Donut chart to display total value in middle. But the result showing up only the Text "Total" in middle of the chart and does not show any numerical value. Can anyone help me out in spotting the error from the below code ? I am new to Javascript and have very less knowledge about the same.
function( options ){
var total;
this.pieSliceLabel = function(dataContext){
var series_name;
percent = Math.round(dataContext.value/dataContext.totalValue*100);
total = Math.round(dataContext.totalValue);
if ( dataContext.seriesData ) {
series_name = dataContext.seriesData.name;
} else {
series_name = 'Other';
}
document.getElementById("myDiv").innerHTML = Math.round(dataContext.totalValue);
return series_name + " " + percent + "% ( " + dataContext.value + " )";
}
// Set chart initialization options
options.dataLabel = pieSliceLabel;
this.centerCallback = function(dataContext){
var pieElem = document.createElement('div');
pieElem.innerHTML =
'<div id="myDiv" style="position:absolute;text-align:center;font-size:16px;">' +
'Total' +' '+ total +
'</div>';
var outerDiv = pieElem.children[0];
var innerBounds = dataContext.innerBounds;
// Outer bounds
outerDiv.style.top = innerBounds.y + "px";
outerDiv.style.left = innerBounds.x + "px";
outerDiv.style.height = innerBounds.height + "px";
outerDiv.style.width = innerBounds.width + "px";
outerDiv.style.lineHeight = innerBounds.height + "px";
return pieElem;
}
options.pieCenter = {
renderer : centerCallback
}
return options;
}

if I correct understood, try to fix it, add to centerCallback,
var value = dataContext.totalValue;
pieElem.innerHTML =
'<div id="myDiv" style="position:absolute;text-align:center;font-size:16px;">' +
'Total ' + value +
'</div>';

Could you try this
function( options ){
// will hold the total value, must be global variable
var total;
Add below statement in this.pieSliceLabel = function(dataContext){}
percent = Math.round(dataContext.value/dataContext.totalValue*100);
total = dataContext.totalValue; //assign to global variable
Update the below innerHTML code in this.centerCallback = function(dataContext){}
//updated element
pieElem.innerHTML =
'<div id="myDiv" style="position:absolute;text-align:center;font-size:16px;">' +
'Total' + total +
'</div>';

Avoid rendrawing chart, D3

I am drawing a scatter chart with NVD3 library in React when a component is first mounted. I hide and show the component depending on the buttons clicked. Each time the component appears, it is mounted, so it is re-drawn but I want to avoid the redrawing, doing some kind of caching of the chart since it takes quite a bit of time to draw the chart with many datapoints. I am calling createScatterChart in componentDidMount:
createScatterChart() {
const node = this.node
nv.utils.symbolMap.set('thin-x', function(size) {
size = Math.sqrt(size);
return 'M' + (-size/2) + ',' + (-size/2) +
'l' + size + ',' + size +
'm0,' + -(size) +
'l' + (-size) + ',' + size;
});
// create the chart
var chart;
nv.addGraph(function() {
chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.useVoronoi(true)
.color(d3.scale.category10().range())
.duration(300)
;
var data_func = () => this.props.datum;
var data_obj = data_func();
var that = this;
chart.tooltip.contentGenerator(function (d) {
//var html = "<div>";
var html = "";
d.series.forEach(function(elem){
Object.keys(data_obj).forEach(function(key_1) {
var outer_obj = data_obj[key_1];
if (outer_obj["key"] === elem.key) {
that.showBarChart(elem.key);
html += "<p>cluster " + elem.key + "</p>";
/*var expr = outer_obj["values"][0]["expr"];
html += "<p>" + elem.key + "</p>";
html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";*/
}
});
})
//html += "</div>";
return html;
});
chart.dispatch.on('renderEnd', function(){
console.log('render complete');
});
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
d3.select(node)
.datum(data_func)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
return chart;
}.bind(this));
}
The function ultimately returns chart, so could I somehow save it in a variable and then draw it much faster? Or what would you recommend for such caching of the chart?

The problem can be resolved by changing visible attribute of the html element instead of rendering it.
<div visibility={this.state.showButton ? "visible": "hidden"} ></div>

Customize the amCharts Stock Chart legend

I use an amCharts' Stock Chart with the comparison function. I use the StockLegend object for the legend and I want to customize the valueTextComparing parameter. Actually, I have this :
var stockLegend = new AmCharts.StockLegend();
stockLegend.markerType = 'bubble';
stockLegend.markerSize = 8;
stockLegend.horizontalGap = 1;
stockLegend.spacing = 100;
stockLegend.periodValueText = '[[value.close]]';
stockLegend.valueTextComparing = '[[value]] | [[percents.value]]%';
What I want is to have two different colors for [[percents.value]] switch the value is positive or negative (and add bold effect on all the valueTextComparing).
I see in the documentation a valueFunction parameter, but not the equivalent for Comparing.
Can you help me?

OK I find a way to do what I want. It's a bit cheating but it's work.
First, I use a specific character to separate the value and the percent (here the "|") :
stockLegend.periodValueText = '[[value.close]]|[[percents.value.close]]%';
stockLegend.valueTextComparing = '[[value]]|[[percents.value]]%';
After that, I created another Legend without amCharts in HTML :
<div id="graph_second_legend">
<div id="gsl_0_circle"></div>
<div id="gsl_0"></div>
<div id="gsl_1"></div>
<div id="gsl_2_circle"></div>
<div id="gsl_2"></div>
<div id="gsl_3"></div>
</div>
Then, I created a function to change this legend :
function parseLegend($){
$('.amChartsLegend text').each(function(index){
switch(index){
case 0:
var text = $(this).text();
var content = '<span class="graph_fund_label">' + text + '</span>';
$('#gsl_'+index).html(content);
break;
case 2:
var text = $(this).text();
var content = '<span class="graph_index_label">' + text + '</span>';
$('#gsl_'+index).html(content);
break;
default:
var text = $(this).text().split('|');
var negative = text[1].split('-');
var negaClass = '';
if(negative.length > 1){
negaClass = ' negative';
}
var content = '<span class="graph_vl_amount">' + text[0] + '</span> ';
content = content + '<span class="graph_vl_percent' + negaClass + '">' + text[1] + '</span>';
$('#gsl_'+index).html(content);
break;
}
});
}
And finally, I call this function when graph selection changed :
chart.addListener("zoomed", function(event){
parseLegend($);
});
And when the mouse is moving hover the graph :
$('.amChartsPanel').mouseover(function(){
setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mouseout(function(){
setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mousemove(function(){
setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mouseleave(function(){
setTimeout(function(){parseLegend($);}, 10);
});
(I used a timeout because amCharts take a moment to change the Legend and the javascript events are too fast for him).

Leaflet geojson search and zoom

Well I'm trying to combine 2 examples to search from my geojson file, and when selected it will zoom that property.
Search (search in GeoJSON one) http://labs.easyblog.it/maps/leaflet-search/examples/
Zoom part from here (without the dropdown) http://projects.bryanmcbride.com/leaflet/select_zoom.html
Basically the first one just with zoom from second. I have been able to get them working, but separately.
Codes (1.)
var featuresLayer = new L.GeoJSON(piirid, {
style: function(f) {
return {color: f.properties.color };
}
});
map.addLayer(featuresLayer);
var searchControl = new L.Control.Search({layer: featuresLayer, propertyName: 'L_AADRESS', circleLocation:false});
searchControl.on('search_locationfound', function(e) {
e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
}).on('search_collapsed', function(e) {
featuresLayer.eachLayer(function(layer) { //restore feature color
featuresLayer.resetStyle(layer);
});
});
map.addControl( searchControl ); //inizialize search control
Code 2.
// Loop through the geojson features and extract bbox and name, then add the options to the "zoom" select (no jQuery)
/*var select = document.getElementById("zoom");
select.options[select.options.length] = new Option('Select a State', 'Select a State');
for (each in geojson._layers) {
var bbox = geojson._layers[each].getBounds()._southWest.lat + "," + geojson._layers[each].getBounds()._southWest.lng + "," + geojson._layers[each].getBounds()._northEast.lat + "," + geojson._layers[each].getBounds()._northEast.lng;
select.options[select.options.length] = new Option(geojson._layers[each].feature.properties.name, bbox);
}*/
// Loop through the geojson features and extract bbox and name, then add the options to the "zoom" select and build autocomplete(using jquery)
var options = '<option value="Select a State">Select a State</option>';
var states = [];
for (each in geojson._layers) {
var L_AADRESS = geojson._layers[each].feature.properties.L_AADRESS;
var swLat = geojson._layers[each].getBounds()._southWest.lat;
var swLng = geojson._layers[each].getBounds()._southWest.lng;
var neLat = geojson._layers[each].getBounds()._northEast.lat;
var neLng = geojson._layers[each].getBounds()._northEast.lng;
var bbox = swLat + "," + swLng + "," + neLat + "," + neLng;
// Populate states array and build autocomplete
states.push({label: L_AADRESS, value: L_AADRESS, swlat: swLat, swlng: swLng, nelat: neLat, nelng: neLng});
$( "#search" ).autocomplete({
source: states,
minLength: 3,
select: function( event, ui ) {
map.fitBounds([[ui.item.swlat, ui.item.swlng],[ui.item.nelat, ui.item.nelng]]);
}
});
// Add states & bbox values to zoom select options
options += '<option value="' + bbox + '">' + geojson._layers[each].feature.properties.L_AADRESS + '</option>';
}

If I understand your question correctly you just have to add:
map.fitBounds(e.layer.getBounds());
to the search_locationfound event function.
This will set the maximum zoom level that you can still see the whole layer.
So the search_locationfound event function from your first example would be:
searchControl.on('search_locationfound', function(e) {
map.fitBounds(e.layer.getBounds());
e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
});
jsfiddle