Dynamically add code to JS - javascript

I've been asked to create Graphs dynamically according to a certain csv content.
I'm currently using the Chart.js library, which requires you to add elements to the "label" property in order to properly build the graph.
label : ["name1", "name2"]
What I am not able to do here, is dynamically add the elements contained in an array "Names" into the parameter.
var names = "asia", "africa";
What I am try to accomplish is that, according to the number of entries inside the array "names", those many names are gonna appear on the graph.
Any ideas? thanks in advance!
[EDIT]
function createChart(upData, lData, allData){
var ctx = document.getElementById("myChart").getContext("2d");
document.getElementById("myChart").style.width = "<?wsx5 document.write(parameters.widthsize.value);?>px";
document.getElementById("myChart").style.height = "<?wsx5 document.write(parameters.heightsize.value);?>px";
var data = {
labels: [
],
This is about what I got now, the relevant part of course. upData is an array that contains the names I need, and those elements need to be added dynamically to the label section

I actually found out what the problem was.
Apparently the code in order for the labels field to work is without brackets:
function createChart(upData, lData, allData){
var ctx = document.getElementById("myChart").getContext("2d");
document.getElementById("myChart").style.width = "<?wsx5 document.write(parameters.widthsize.value);?>px";
document.getElementById("myChart").style.height = "<?wsx5 document.write(parameters.heightsize.value);?>px";
var data = {
labels: arrayname , }

Related

Iterating through range[]

I'm trying to do two things. Get this to work, and get it to work as efficient as possible.
The task:
To take a user defined RANGE like the following:
What I want to do is simply run a foreach loop that will go through the selection and pull out specific cells then place them into a copy of a template document
var ranger = sheet.getSelection().getActiveRangeList().getRanges().forEach(function(dataArray)
// dataArray is my object[][] Casting all data to strings just in case.
var songname = String(dataArray[1]);
var songwriters = String(dataArray[2]);
var publishers = String(dataArray[3]);
var artist = String(dataArray[5]);
var useremail = String(dataArray[6]);
...
}
Later in my code, I open the template, replace the placeholders, rename and save it.
But I just want to get there, and get there as efficiently as possible.
Is this going to do it?
I'm very confused by the callback formatting in Google App Scripting.
function myFunction() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet1');
var dataArray=[];
sh.getSelection().getActiveRangeList().getRanges().forEach(function(r,i){
dataArray.push(r.getValues());
});
....
dataArray is now and array of 2 dimensional arrays so it's a 3 dimensional array.

Use an array as input data in D3.js

I have built a custom D3 chart that used an old REST api, and I am looking for help on how to adapt the D3 input to the new one.
At http://codepen.io/anon/pen/bEgMdV I use the dataset 'dataset' and I have tried to use the 'data' which has 'genes' and 'dataset' in one.
So far, I have tried changing
var gs = svg.selectAll("g")
.data(d3.values(dataset)).enter().append("g");
gs.selectAll("path").data(function(d) {
return pie(d.data);
to
var gs = svg.selectAll("g")
.data(d3.values(data.values)).enter().append("g");
gs.selectAll("path").data(function(d) {
return pie(d[0]);
In order to get the numbers of the array in 'values'.
I feel I am somewhat close to getting this. Can someone help?
One of the ways is to convert the new data into the old data structure, so that you don't need to change the code.
This for loop will change you new data to the expected old data structure.
genes = [];
dataset = [{data:[], gene:"LPAR"}];
data.values.forEach(function(s){
genes.push(s[0]);//iterate and add the gene
dataset[0].data.push(s[1])//iterate and add the values.
});
Working code here
Hope this helps!

Can another column name than "value" be used in Highmaps?

I have a JSON file with multiple columns, and would like to keep the display of any of those as a map relatively open, based on the choice of the user. Now, I can't see any examples of using other column names for display in Highmaps than "value". Is it so? Or is there any way to name within the Javascript code the column that should be used by Highmaps for the display of the data?
That is, the column names are (for example) these:
LC_Ctry_Limit,LC_Capita_Limit,LC_Ctry_Footprint,LC_Capita_Footprint,LC_Score
Now, in order to be able to display the data from LC_Score, I'd need to rename the column (hard coded into the JSON-file) into "value". Thus:
LC_Ctry_Limit,LC_Capita_Limit,LC_Ctry_Footprint,LC_Capita_Footprint,value
But what is, if the user wants to display instead another column? Do I need to create five different JSON files, for each column, and name it "value" then? That seems rather inflexible to me.
My Highmaps-code looks like this, based on loading first a GeoJSON and then a JSON file, and I guess there, it should be something about a column-name-specifier:
series : [
{
data : data,
mapData: geojson,
joinBy: ['Country_40','Country'],
name: 'LC_Score',
borderWidth: 0.2,
COLUMN-TO-BE-USED: lorem
}]
Thanks for any hints!
You could set values of value property before setting the data in chart's options/configuration. This selection can be based on value passed into function that will return prepared array for configuration.
Example: http://jsfiddle.net/bmv0y8dn/
var columnToBeUsed = 'lorem';
$('#container').highcharts('Map', {
series: [{
data: (function (columnToBeUsed) {
var len = data.length,
tab = [];
for (var i = 0; i < len; i++) {
data[i].value = data[i][columnToBeUsed];
}
return data;
})(columnToBeUsed),
...
Series data can be changed dynamically using Series.setData, so you could change value's value and call setData() with new data for dynamic data change.

Why doesn't flot work with a array of (x,y) values? Javascript object versus arrays?

I'm creating a flot graph using some php-script. The php generates the data and uses json_encodeto pass this data to some javascript-flot code where I parse using jQuery.parseJson.
I was using the data-array filled with (x,y) values. Plotting this doesn't seem to work. If I encapsulate the array within an object flot is plotting it without problems. Why doesn't the first method work? I've added a jsFiddle below.
var data = '[["201518","1"],["201519","3"],["201520","6"]]',
data2 = '{"data":[["201518","1"],["201519","3"],["201520","6"]]}';
var set = jQuery.parseJSON(data),
set2 = jQuery.parseJSON(data2);
var placeholder = $('#placeholder');
$.plot(placeholder, [set2.data]);
//$.plot(placeholder, set); <= not working? Why?
jsfiddle
You need to pass an array:
$.plot(placeholder, [set])
// instead of `$.plot(placeholder, set)`
Two problems. First you need numbers and not strings when passing as an array (see here where it says
Note that to simplify the internal logic in Flot both the x and y
values must be numbers (even if specifying time series, see below for
how to do this). This is a common problem because you might retrieve
data from the database and serialize them directly to JSON without
noticing the wrong type. If you're getting mysterious errors, double
check that you're inputting numbers and not strings.
Second (as pointed out in another answer), you need the [array] around set. The following works:
$(document).ready(function () {
var data = '[[201518,1], [201519,3], [201520,6]]',
data2 = '{"data":[["201518","1"],["201519","3"],["201520","6"]]}';
var set = jQuery.parseJSON(data),
set2 = jQuery.parseJSON(data2);
var placeholder = $('#placeholder');
//$.plot(placeholder, [set2.data]);
$.plot(placeholder, [set]);
});

SVG, Raphael.js, JSON data - can't figure out how to get description to appear

I've been building a custom SVG map of England and trying to have pieces of the array data appear at the bottom of the map. So far I've gotten the title to appear but keep getting 'undefined' for my description field.
My data is structured like this:
var regions = [
{'title':"Northeast England",'description':"<p>Paragraph</p><p>Does adding HTML here work?</p>", 'path' : "M219.02,6.876l-0.079,0.05l-0.482,0.371L218.23,7.47l-0.858,0.346h-0.008l-0.307,0.26l-0.779,0.666 l-0.104,0.278l-0.005,0.019l0.056,0.481l0.116,0.846l0.048,0.395l-0.344,1.05l-0.052-0.007v0.007l-0.635-0.081l-0.375,0.167 l-0.148,0.061v0.006l-0.1,0.328l0.178,........},
I want my description to contain a handful of paragraphs and some HTML to allow me to set up links to a related report.
The way that I'm attempting to generate the description in my JS is like this:
document.getElementById('title').innerHTML = title;
document.getElementById('descr').innerHTML = description;
I've tried to define 'description' higher in the code but am not sure how to tie it to the field in the array/data that contains the information that I want to present on the page.
My full Codepen version of this is: http://codepen.io/msummers40/pen/wamMry
If you are able to help with this, thank you in advance.
Matt
Here's one way to do it.
First, when drawing, give each path an id of "regionN" where N is the array index of the region. The "region" prefix is just there to avoid duplicate ids in case you have something else on the page with id "0".
var id = 0;
regions.forEach(function(region){
var path = map.path(region.path);
path.node.id = 'region' + (id++);
group.push(path);
});
Then, on click, pull out the array index and use it to look up the title and description.
var index = this.node.id.split('region')[1];
var title = regions[index].title;
var description = regions[index].description;
http://codepen.io/anon/pen/GJxqqV

Categories

Resources