We Keep Coding

bokeh, change data in callback does not change original python data

I am working on a tool for manual classification which changes the property of certain dot(color in my case) chosen in a scatter plot by bokeh. I changed the source data in callback by s.data = d2 and s.change.emit() but both failed. I thought such operation will change source.data, but when I print source.data, actually nothing happens.
The dots' color in the plot changes as expected though.
Here is my related code:
DF = pd.read_csv(csv_path)
s = ColumnDataSource(DF_file)
p = figure(plot_width=500, plot_height=500, tooltips=TOOLTIPS,tools="lasso_select, tap", title="manual classification")
circles = p.circle('x', 'y', color='color', size=10, source=s, line_alpha=0.6,fill_alpha=0.6)
s.callback = CustomJS(args=dict(s1=s), code="""
var inds = cb_obj.selected.indices;
var d1 = s1.data;
for (var i = 0; i < inds.length; i++)
{d1['color'][inds[i]] = 'green';}
s1.change.emit();
""")
Both print(s.data) and the csv file saved from s.to_csv(xxx) shows no change to the original input data.
Also, I wonder how does callback work to change the plot's data while leave the data in python unchanged when the data in python is the data passed to it in args=(s1=s).

I have searched for some possible methods and found this answer in https://discourse.bokeh.org/t/getting-selected-glyph-data-properties-via-customjs/4311/5?u=1113
when the Bokeh JS object is instantiated it uses the Python objects as sources for data but then is essentially disconnected from them - so updates to the JS model are not propagated back to their Python parents.
While the discussion in this webpage also proposed a workaround using IPython.notebook.kernel.execute to create or overwrite a variable in the Python. It can only be used in a notebook frontend(I found this workaround only works when use output_notebook() in the code).
Then here is my new code to change the original data in python:
s.callback = CustomJS(args=dict(s1=s1), code="""
var inds = s1.selected.indices;
var d1 = s1.data;
for (var i = 0; i < inds.length; i++)
{
d1['color'][inds[i]] = 'red';
var index = inds[i];
var command = "s1.data['color'][" + index + "] = red";
var kernel = IPython.notebook.kernel;
kernel.execute(command);
}
s1.change.emit();;
""")

Unable to pass value from C# to amcharts JavaScript function

I created a chart with the help of amCharts that shows temperature from the examples on their site. The chart displayed correctly.
Now I am getting the temperature from a database with C# and I am trying to pass the value to the function where temperature was hard coded, so I get dynamic values. However, I just get the chart and the needle is still at 0 and does not show the temperature.
I have tried 3 ways so far:
I used a hidden field, assigned the value to hidden field in C# and called the JavaScript function showing the charts. It only shows chart. The needle does not change.
I used script manager and Web API, (I don't know Web API and just used code on the Internet), it is the same result however the function in c# keeps on being continuously called.
I put the entire amCharts code in a JavaScript function . I got values in c# and then used
String script = "window.onload = function() { UpdateTemp('" + dt.Rows[0][0].ToString()+ "'); };";
ClientScript.RegisterStartupScript(this.GetType(), "UpdateTemp", script, true);
which again shows same result, map is shown needle stays on 0.
This is my code for the 3rd approach:
ASPX page, JavaScript function
<script>
function UpdateTemp(temp) {
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// create chart
var chart = am4core.create("chartdiv", am4charts.GaugeChart);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart.innerRadius = -25;
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
axis.renderer.grid.template.stroke = new am4core.InterfaceColorSet().getFor("background");
axis.renderer.grid.template.strokeOpacity = 0.3;
var colorSet = new am4core.ColorSet();
var range0 = axis.axisRanges.create();
range0.value = 0;
range0.endValue = 50;
range0.axisFill.fillOpacity = 1;
range0.axisFill.fill = colorSet.getIndex(0);
range0.axisFill.zIndex = - 1;
var range1 = axis.axisRanges.create();
range1.value = 50;
range1.endValue = 80;
range1.axisFill.fillOpacity = 1;
range1.axisFill.fill = colorSet.getIndex(2);
range1.axisFill.zIndex = -1;
var range2 = axis.axisRanges.create();
range2.value = 80;
range2.endValue = 100;
range2.axisFill.fillOpacity = 1;
range2.axisFill.fill = colorSet.getIndex(4);
range2.axisFill.zIndex = -1;
var hand = chart.hands.push(new am4charts.ClockHand());
// using chart.setTimeout method as the timeout will be disposed together with a chart
chart.setTimeout(randomValue, 2000);
function randomValue(temp) {
hand.showValue(temp, 1000, am4core.ease.cubicOut);
chart.setTimeout(randomValue, 2000);
}
}); // end am4core.ready()
};
</script>
C# function to get temperature and call JavaScript function
public void BindGrid(String charttype)
{
string constring = "Data Source=********.DOMAIN.ORG01;Initial Catalog=Temperature;Integrated Security=SSPI;";
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("SELECT Temperature,HighestPoint,LowestPoint FROM Temperature", con))
{
cmd.CommandType = CommandType.Text;
con.Open();
DataTable dt = new DataTable();
dt.Load(cmd.ExecuteReader());
temp1.Value = dt.Rows[0][0].ToString();
con.Close();
String script = "window.onload = function() { UpdateTemp('" + dt.Rows[0][0].ToString()+ "'); };";
ClientScript.RegisterStartupScript(this.GetType(), "UpdateTemp", script, true);
}
}
}

The quality code should be revised but I managed to make it work.
I made 2 changes:
1 : I used the method "PageLoad" instead of "BindGrid" (do you really need this one ?)
2 : I filled the raw temperature value directly as a parameter (as it is a float on my side), you englobed your datarow value with simple quote, that's interpreted as string by javascript and the method "showValue" from "hand" seems to not tolerate it.
Code:
Result:
Some ideas to improve your code:
Put your connection string in configuration file (never in code !)
If you use the "using" do not matter calling the method "close" of your resource, it's automatically called by it. (behind the using it's in fact a try-catch-finally, the close is called anyway in the finally ;) )
If possible separate the data access from the rendering page, create a separate class that manages it, it will improve readability and evolution of your code.
If the variable "temp1" is not used, just remove it.
When you get a data (no matter the source, could be a webservice or database or else), check always if it's null before access it and log it, it doesn't cost a lot and you avoid escalation of exceptions.
We are in 2019, you could use Dapper to get directly object as result from your queries instead of a generic datarow. (check the website if interested they have a lot of interesting tutorials).
Kr,
Ali

Bitcoin - JavaScript - Calculating values using numeric results from separate functions and display without user interaction

JavaScript - Calculating values using numeric results from separate functions and display without user interaction.
I’m looking to calculate the percentage difference between returned API values (extracted from a single target API, but different ‘GET’ URL’s) and display the percentage differential.
I’m using separate functions to extract each value as the ‘GET’ URL is time stamped to perform searches for specific results.
Ive included only 2 functions, but would like to calculate the difference between more as required.
I’ve only included the Javascript, if there is a typo in the code, then it is only a typo, the functions display the relevant data, it is calculating the percentage difference between “BTC_Result_Now” (from the 1st function) and BTC_Result_1_Week (from the 2nd function) that proving not so straight forward:
var BTC_XHR_Now = new XMLHttpRequest();
function getBTC_Price_Now() {
var url = BTC_API_PriceNow;
BTC_XHR_Now.open('GET', url, true,);
BTC_XHR_Now.onload = function() {
var response = JSON.parse(BTC_XHR_Now.responseText);
var BTC_Result_Now = response.BTC.USD;
document.getElementById("BTC-Price-Now").innerHTML = BTC_Result_Now; // $17077.13
}
BTC_XHR_Now.send();
}
getBTC_Price_Now();
var BTC_XHR_1_Week = new XMLHttpRequest();
function getBTC_Price_1_Week() {
var url = BTC_API_Price1Week;
BTC_XHR_1_Week.open('GET', url, true,);
BTC_XHR_1_Week.onload = function() {
var response = JSON.parse(BTC_XHR_1_Week.responseText);
var BTC_Result_1_Week = response.BTC.USD;
document.getElementById("BTC-Price-1-Week").innerHTML = BTC_Result_1_Week; // $13749.57
}
BTC_XHR_1_Week.send();
}
getBTC_Price_1_Week();

Google apps script - using for loop to pull data from range based on condition

I'm having an issue pulling the correct values out of a for loop in Google Sheets.
Here's my code:
Note: this is a snippet from a larger function
function sendEmails() {
var trackOriginSheet = SpreadsheetApp.getActiveSpreadsheet().getName();
var getMirSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Miranda");
//Set a new object to hold conditional data
var holdingData = new Object();
//Create function to get values from origin sheet
var returnedValues = function (trackOriginSheet) {
//Load dynamic variables into an object via returnedValues()
if (trackOriginSheet === getMirSheet) {
var startMirRow = 2; // First row of data to process
var numRowsMir = 506; // Number of rows to process
// Fetch the range of cells A2:Z506
var dataRangeMir = getMirSheet.getRange(startMirRow, 1, numRowsMir, 26);
// Fetch values for each cell in the Range.
var dataMir = dataRangeMir.getValues();
for (var k in dataMir) {
var secondRowMir = dataMir[k];
var intRefDescMir = secondRowMir[3];
var intAdminActionsMir = secondRowMir[4];
//Push returned data to holdingData Object
holdingData.selectedData = secondRowMir;
holdingData.refDesc = intRefDescMir;
holdingData.adminActions = intAdminActionsMir;
}
}
}
Here's a copy of the sheet I'm working on
What I need to have happened here first, is track the origin sheet, then create an object to hold data returned from the returnedValues() function. Later, I'll call the properties of this object into a send email function.
The problem is that I need to be able to pull data from the selected sheet dynamically (the "Miranda" sheet in this case.) In other words, when a user selects the "Yes" option in column I of the Miranda sheet, the first thing this script needs to do is pull the values of the variables at the top of the for loop within the same row that the user selected "Yes." Then, I'm pushing that data to a custom object to be called later.
It's apparent to me, that I'm doing it wrong. There's, at least, something wrong with my loop. What have I done? :)
EDIT:
After reviewing the suggestion by VyTautas, here's my attempt at a working loop:
for (var k = 0; k < dataMir.length; k++) {
var mirColI = dataMir[k][8];
var mirRefDesc = dataMir[k][2];
var mirAdminActions = dataMir[k][3];
var mirDates = dataMir[k][4];
if (mirColI === "Yes") {
var activeRowMir = mirColI.getActiveSelection.getRowIndex();
//Pull selected values from the active row when Yes is selected
var mirRefDescRange = getMirSheet.getRange(activeRowMir, mirRefDesc);
var mirRefDescValues = mirRefDescRange.getValues();
var mirAdminActionsRange = getMirSheet.getRange(activeRowMir, mirAdminActions);
var mirAdminActionsValues = mirAdminActionsRange.getValues();
var mirDatesRange = getMirSheet.getRange(activeRowMir, mirDates);
var mirDatesValues = mirAdminActionsRange.getValues();
var mirHoldingArray = [mirRefDescValues, mirAdminActionsValues, mirDatesValues];
//Push mirHoldingArray values to holdingData
holdingData.refDesc = mirHoldingArray[0];
holdingData.adminActions = mirHoldingArray[1];
holdingData.dates = mirHoldingArray[2];
}
}

Where did all that whitespace go in the actual script editor? :D
You already correctly use .getValues() to pull the entire table into an array. What you need to do now is have a for loop go through dataMir[k][8] and simply fetch the data if dataMir[k][8] === 'Yes'. I also feel that it's not quite necessary to use for (var k in dataMir) as for (var k = 0; k < dataMir.length; k++) is a lot cleaner and you have a for loop that guarantees control (though that's probably more a preference thing).
You can also reduce the number of variables you use by having
holdingData.selectedData = mirData[k]
holdingData.refDesc = mirData[k][2] //I assume you want the 3rd column for this variable, not the 4th
holdingData.adminActions = mirData[k][3] //same as above
remember, that the array starts with 0, so if you mirData[k][0] is column A, mirData[k][1] is column B and so on.
EDIT: what you wrote in your edits seems like doubling down on the code. You already have the data, but you are trying to pull it again and some variables you use should give you an error. I will cut the code from the if, although I don't really see why you need to both get the active sheet and sheet by name. If you know the name will be constant, then just always get the correct sheet by name (or index) thus eliminating the possibility of working with the wrong sheet.
var titleMirRows = 1; // First row of data to process
var numRowsMir = getMirSheet.getLastRow(); // Number of rows to process
// Fetch the range of cells A2:Z506
var dataRangeMir = getMirSheet.getRange(titleMirRows + 1, 1, numRowsMir - titleMirRows, 26); // might need adjusting but now it will only get as many rows as there is data, you can do the same for columns too
// Fetch values for each cell in the Range.
var dataMir = dataRangeMir.getValues();
for (var k = 0; k < dataMir.length; k++) {
if (dataMir[k][7] === 'Yes') { //I assume you meant column i
holdingData.refDesc = dataMir[k] //this will store the entire row
holdingData.adminActions = dataMir[k][3] //this stores column D
holdingData.dates = dataMir[k][4] //stores column E
}
}
Double check if the columns I have added to those variables are what you want. As I understood the object stores the entire row array, the value in column called Administrative Actions and the value in column Dates/Periods if Applicable. If not please adjust accordingly, but as you can see, we minimize the work we do with the sheet itself by simply manipulating the entire data array. Always make as few calls to Google Services as possible.

AmCharts: How do i check if graph is hidden?

I got ONE balloon only in my chart, and I want to check if not only the graph it belongs to is hidden, but if ANY graph is hidden. How do I check this attribute?
function adjustBalloonText(graphDataItem, graph){
var data = graphDataItem.dataContext;
var date = ""; //some kind of getDateInScrollbar here
console.log(graphDataItem);
var distance = data.distance; // some kind of getGraphsValue here
var duration = ""; // some kind of getGraphsValue here as well
return distance;
}
Please help me out.