We Keep Coding

Export javascript array to a shape file

I'm new to javascript and need to create a web app where a user will click a button, and the array of data will export into a shape file. After reading this answer I know that it is possible with an ARCGIS server, but I do not have access to this.
The array in question is a stream of data similar to the following
var array = [
[17, 70, "mark", "let", "test", "test"],
[18, 50, "marj", "get", "test", "test"],
ETC...]
I've also read about shp-write but I don't know where to start. Would anyone be able to give me any examples of how to do this, or pointers where to start? Thanks.

You should just convert your data from a simple array to an array of points and an array of features, like:
let points = [
[17, 70],
[18, 50],
...
];
let features = [
{col1: "mark", col2: "let", col3: "test", col4: "test"},
{col1: "marj", col2: "get", col3: "test", col4: "test"},
...
];
And then call the write function provided by scp-write, providing your callback function to write the resulting file (check the examples for the callback function).
let scp = require('scp-write');
scp.write(features, 'POINT', points, callbackFunction);

Razor foreach loop inside Javascript

I'm creating a google chart and I have now made it look like I want it to with amounts of lines/bars and multiple axises and so on, now I want to have dynamic data inside of it.
function drawVisualization()
{
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Day', 'KG', 'Average', 'peak'],
['1', 22000, 70, 90],
['2', 21000, 80, 87],
['3', 19000, 75, 79],
['4', 25000, 60, 88],
['5', 24000, 90, 95]
]);
So as of right now this is how the data is sent to the chart, 1,2,3,4,5 for hAxis and the rest for vAxis.
However I thought I could use a foreach in here and do something like this to return data:
#foreach (var c in db.Query(getWorkout))
{
['1', #c.kg, #c.rep, #c.sett];
}
The foreach actually works while no code is inside it so I guess the errors are all due to ['1', #c.kg, #c.rep, #c.sett]; this.
Anyone got any ideas of what to do? Would be tremendously thankful!

try following
#foreach (var c in db.Query(getWorkout))
{
<text>['1', #c.kg, #c.rep, #c.sett],</text>
}

I think it should work
first create an array in JavaScript
var dbData = [['Day', 'KG', 'Average', 'peak']];
then use razor #foreach to append data
#foreach (var c in db.Query(getWorkout))
{
dbData.push(['1', #c.kg, #c.rep, #c.sett]);
}
then
var data = google.visualization.arrayToDataTable(dbData);

Multiple C3.js charts automatically hidden, except the last one

I am trying to generate multiple c3 charts with the following code :
var datas=[[
["name", "position", "y", "bigRect", "myBars"],
["One 22", 2, 2, 2, 2],
["One 33", 3, 3, 2, 2],
["One 44", 4, 4, 2, 2]
],[
["name", "position", "y", "bigRect", "myBars"],
["Two 55", 5, 5, 2, 2],
["Two 66", 6, 6, 2, 2],
["Two 77", 7, 7, 2, 2]
],[
["name", "position", "y", "bigRect", "myBars"],
["Three 88", 8, 8, 2, 2],
["Three 99", 9, 9, 2, 2],
["Three 00", 0, 0, 2, 2]
]];
var iData = 0;
var charts = [];
for(iData in datas){
var d = datas[iData];
document.querySelector(".container").innerHTML += "<div id='chart"+iData+"'></div>";
var chartSelector = "#chart"+iData;
charts[iData] = c3.generate({
bindto: d3.select(chartSelector),
data: {
rows: d,
type: "scatter",
types: {
bigRect: "area",
myBars: "bar"
},
x: "position",
y: "y"
},
zoom: {
enabled: true
}
});
}
All the charts look empty except the last one that works perfectly. You can see what it looks like on this JSbin link.
On the hidden charts, all the SVGs are generated, but
the g SVG elements that contain the path drawing the dots and bars are set on opacity: 0, hiding all their contents.
the zoom and the tooltip do not work either
Do you know why c3 is disabling the first charts and how to enable them ?
My apologies for my poor English and thank you very much for your time.

You've got it working now, but I can also get it working by replacing one line like so:
d3.select(".container").append("div").attr("id", "chart"+iData);
//document.querySelector(".container").innerHTML += "<div id='chart"+iData+"'></div>";
It appears adding stuff to and then replacing .innerHtml has side effects for the existing contents, in your case the first charts you build
Is it possible to append to innerHTML without destroying descendants' event listeners?
This includes wiping out event handlers and 'unofficial' (for want of a better term) attributes like the __data__ field d3 populates and uses (it's undefined for the first 2 sets of bars as this code will reveal)
for(iData in datas){
console.log (d3.select("#chart"+iData+" .c3-bars").node().__data__);
}

I finally solved my problem by creating all the #chartX containers in another loop before that calling c3.
I assume it has something to do with the non-procedural execution order of JS but I'm still looking for a precise explanation of the phenomenon.
Here is the link to the corrected JSbin.

Using context variables as javascript parameters

I'm working on a project in Django, for part of it I'm trying to use Googles chart api, which uses a Javascript function to plot the graph. So what I'm trying to do is generate the graph data in my views.py and then pass the data through the context variables to the script. To test this I tried to do:
graphplot = [['Age', 'Weight'],[ 8, 12],[ 4, 5.5],[ 11, 14],[ 4, 5],[ 3, 3.5],[ 6.5, 7]]
context = {
"graphplot": graphplot,
}
in my views.py then I have:
var data = google.visualization.arrayToDataTable({{graphplot}});
in my template, however this doesn't seem to work.
When I do:
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
It does show the graph so I know it's not a problem with the JavaScript.
Any help would be appreciated

Try this, It should work.
var plot_data = {{graphplot}};
var data = google.visualization.arrayToDataTable(plot_data);

How to change calculation on nv3d when switching to stacked?

I'm using d3.js and nvd3.js to display some data from different datasets. One of the sets (A) contains the absolute number of orders, the other set (B) contains the number of orders from new customers, such that A >= B for every position. Example:
[{
key : 'orders',
values: [[1, 10], [2, 5], [3, 8], ...]
},{
key : 'orders by new customers',
values: [[1, 4], [2, 0], [3, 4], ...]
}]
I'd like to use a stacked multibar chart to display those series. In "Grouped" view, everything works nicely and I have both bars grouped beneath each other. However, when I switch to "Stacked" mode I was expecting, that the overall number does not change. It appeared that nv3d.js is then adding up both values and i get a new overall value.
Is there a way to change the calculation when switching to stacked mode? I was digging through the source code, but could not find a usable method to achieve this.
Thanks in advance!

If I understood your problem correctly, it would make more sense to restructure your data to make it conceptually match with bars being 'stacked' (which implies two values being added together), to something like this where:
orders = recurring orders + orders by new customers
[{
key : 'recurring orders',
values: [[0, 6], [0, 5], [0, 4], ...]
},{
key : 'orders by new customers',
values: [[1, 4], [2, 0], [3, 4], ...]
}]