Develop Reference

How to implement EasyStar.js pathfinding logic to my present grid generator

I have this project where I need to visualize 2d grid pathfinding.
I managed to create a grid generator that generates the grid up to 20x20.
I need to install a library that provides a pathfinding algorithm and apply it to my present grid generator. I spend countless hours already but I'm stuck.
What do I expect to get:
I need to have a grid-item 'start' (green) on the left first column and an 'end' grid item on the last column (any row for both) as all the grid items have to be filled (non-walkable) and then as soon as I click the grid item it walkable. When there is a clear path between the start and end it should color accordingly (pretty much pathfinding :D)
Here is the sandbox - https://codesandbox.io/s/epic-gagarin-v9pce9?file=/src/index.js:229-304
I have already tried various approaches, but the majority of the time as soon as I import the easyst.js
const EasyStar = require("easystarjs");
const easystar = new EasyStar.js();
and trying to loop the grid and etc, everything stops

Qualtrics: Custom slider range with embedded data using javascript

I want to create one single slider in Qualtrics where the min, the MAX and the intervals are chosen according to 4 different embedded data. I need help with the Javascript.
Why do I need one single slider? I need a single slider because I have 16 questions in total, and it is easier to recall 16 questions ID rather than 64 different questions ID.
How should the slider change? I need the slider MAX to be either 1, 10, 100 or 177. Moreover, I always need to have 100 possible choices. Therefore, I need to introduce 2, 1, 0 and 0 decimals, respectively.
Why Javascript? Qualtrics does not allow dynamic custom slider values.
What I have tried so far:
I tried using the default options, but they are not helpful.
I tied looking for resolved questions on StackOverflow but only found this thread: Qualtrics: Dynamically adjusting max value of slider

What your post asks is not a specific question, but rather an entire project. To aid you in this, I have broken up your question into subproblems, all of which can be resolved with simple googling.
First, set up your slider so that it ranges from 0 to 100 - that will ensure that the user always has 100 options. You can then perform a calculation to adjust that to any range you would like based on your embedded data (information how to get embedded data in JS can be found in this post or on the Qualtrics JS API). For more information on how to scale to any rage, here's a good place to start. This calculation is critical as you will use it later on to set the exact value of the grid lines (i.e. intervals) as well as the displayed value (if you opt to display value).
NB: Unfortunately, you are forced to set up the slider to range from 0-100, as you cannot set up more than 20 grid lines. If you could, you could have just set up 100 grid lines and removed the grid lines values and used labels instead for guidance, but there you go.
Next, start with a slider that has a single grid line in the options. You can now adjust these grid lines to your intervals. Specifically, to get the field where these gridlines are defined, get the ul with class name numbers in your slider question. This could look something like this:
let numbers = document.getElementById('QID1').getElementsByClassName('numbers')[0]
This numbers variable will now contain an HTML element with its children being a list of li elements, with each defining a different interval - calculate those interval however your heart desires and add them to the numbers element on the DOM. Tip: to see how this works, play around by examining the DOM when you vary the number of grid lines. Hint: careful when you set the widths (as this is your property to calculate) - for 2 grid lines or 4, all of the li elements have a width of 50 or 25, respectively, but for 11 grid lines the two li elements with classes first and last have width of 5 and the rest of the in-between li elements have a width of 10.
To customize the number that is shown in those intervals (to however many decimal places you want), adjust the innerHTML of those li elements.
Your next step is to make sure that if you do end up showing the value to the participant, then that value can only be a "legit" value. After all, we set the slider from 0 to 100, but it could be 50 to 250 and it must only show values 50-52-54 etc. To achieve that, find the element that displays the value and overwrite it with your calculation (the current value scaled to your desired range). To find the elements, use something like this:
document.getElementById('QID1~1~toolTipBox')
This will look for question with ID QID1 and then look at the first choice's toolTipBox. Overwrite the contest by change its innerHTML.
Finally, don't forget to adjust your data when you process it later on. After all, you have access to all embedded fields in the data, simply scale those to get the actual values (as the ones you will get will most likely be 0-100, though I am not 100% sure how Qualtrics decides what value to save in the data).

ExtJS 6.0.2: How do I force a custom progress bar grid column to update on sorting

In the code that I'm working in, there is a grid that has one column that represents the data from two of the store's fields using a customized progressBar. The progress is calculated from those two other fields and shown as text on the progress bar in a format like 'x / y'.
My problem is, when the grid is resorted, and the values of the x and y values are equal (i.e., the progress is 100%) for some or all of the rows, the progress column doesn't get updated properly; the progress bars that are at 100% don't move with their respective rows, and/or progress bars appear to be duplicated or go missing after the sort. Note that this would also happen where the progress is 0 for one or more rows or any other scenarios where the progress of 2 or more rows is the same, but the values used to calculate the progress for the respective rows are different.
Here is a fiddle that illustrates the problem: https://fiddle.sencha.com/#view/editor&fiddle/35c5
Is there some way that I can force the entire progress column to rerender whenever the grid is sorted, and not just the ones where the calculated progress value has changed, so that all of the progress bars always appear correct?

I managed to solve this issue by subtracting a small random amount (in the range 0, exclusive, to 10e-8, inclusive) from each of the calculated values (or adding it where the value is 0). (Where the value is set to 0 due to both contributing values being 0, no random value is added, as it is unnecessary in that case.) This ensures that every value in the grid will be different and will, therefore, follow its respective row when the order of the rows changes due to sorting or updating.

Dynamic resizing height not working of bar chart as number of teams increasing in my case

Using Highcharts for displaying count of severities teamwise, but as number of teams increases the labels get collapses with each other, is there any soultion by with I can resize the chart height depending on the number of teams.
See the image for the reference, it get worse as number of teams increases.

Use chart.setSize(new_width, new_height) to resize chart. Of course first calculate height according to number of categories.

Use a jquery type slider to iterate through a csv and display one bar at a time in a d3.js bar chart

So I'm generating bar chart in D3.js with a csv file a la the basic columns example. What I want to do is show just one bar at a time for each row of data. A JQuery-like slider will iterate over the csv rows and update the chart. For the user, it'll just look like the single bar's height is changing but the x axis should update with the date as well.
Here's an example of the data that I'll be feeding into it:
DATE,INFLOW (CF),OUTFLOW (CF),STORAGE (CF)
20120101,950400,28857600,11084277600
20120102,60912000,28771200,11099959200
20120103,56505600,28857600,11130451200
20120104,55900800,28771200,11158765200
20120105,55987200,28771200,11189692800
20120106,56419200,28771200,11220620400
20120107,55123200,28684800,11246756400
The only thing I actually want to show is DATE and STORAGE (CF). So I'll probably have to do some parsing of the CSV somewhere to get it in the best shape.
I've attempted this and would post some code but all of my attempts are a mess. I can generate a plausible bar chart with all of the rows at once, but when I attempt to show a single one, everything breaks. Here are the challenges that I could use some guidance one:
How to splice or filter my csv with a slider so that only a single row is selected
Best way to generate a bar chart that only has a single bar from a single row in a csv (every time I try to do this I have trouble with axes and accessing the array values correctly)
Best way to update the bar, changing only height but also updating the x axis ticks
Also any examples would be very helpful! Have been googling like mad but am mostly finding sliders that affect range and scale

There are many pieces to this...parsing and slicing the data, setting up the x axis, etc. Here is one segment of the code.
d3.select("#slider")
.on("input", function() {update(+this.value);});
function update(row) {
viewdata = data.slice((row-1), row);
redraw();
}
Here is a complete PLUNK with the solution. NOTE: I have placed comments in several parts of the code, for orientation. I strongly suggest you fork this plunk so that it will not be lost if I inadvertently delete it.