I have a line graph which is updated based on values chosen from two dropdown lists. The data is updated as per gist below. Everything is working perfectly and all data is being returned correctly but when try to apply this updated data to the existing line/path and update the graph - the line/path disappears and I get a parsing error. Know it is something to do with how I'm applying this new data to the line/path - can anyone help?
https://gist.github.com/Majella/202df0a4a5a3ad20fb92
I'm not quite sure if you'd like to (a) update the existing line with new data, or (b) keep the existing line and add a second line with the new data.
For (a), you would need to re-join newdata to the original line and then redraw it. This can be achieved with a simple redraw function where the function parameter is the dataset. You can see an implementation of this in Mike Bostock's General Update Pattern post or in an even simpler example I made to demonstrate this.
If (b), you would perform a data-join for the new data as you did for the first dataset, something like:
var data2 = svg.selectAll('.newData')
.data(newdata)
.enter().append('path')
.attr('class', 'newData)
.attr( "d", line(newdata));
And it would add a second line to the graph.
Related
i am new in d3.js and i am trying to make a pie chart but in the structure i got two append one is append(“svg : g”) and another one is append(“svg: svg”),i am bit confused.So what is the difference between in this two append method?
I'm trying to figure this out and I must be overlooking something basic. (It took me WAAAY longer than it should have just to realize I hadn't added the trigger.)
When forms are submitted, if that page runs out of rows, it automatically expands. I have a reconciliation page where it is pulling the submitted data over line by line and analyzing it for discrepancies (the form collects billable time and tasks.)
So while the Form Responses 1 page will expand, I want to use a trigger on form submit to add a line to the reconciliation page and copy the formulas down. I can't seem to get the line to add though. Looking at the google page for expanding the number of rows, I'm not sure what I am doing wrong there either but I THINK I need to add more java features to my computer.
If I simply copy and paste the example into a new sheet, most of the code is black instead of the standard editor colors. Saving pops up "Missing ; before statement. (line 1, file "Code")"
Line one is simply "import com.google.gdata.client.spreadsheet.*;"
So zerothly: Whats the most basic code I can use to add that blank row?
Then first: Do I need to import a bunch of stuff to get this (adding rows) to work?
Second: If so, and I transfer ownership of the sheet to someone, do they need to do the imports also?
Third: If so, and I want to do edits on another device, will I need to do imports there too?
Fourth: The example uses Update() but I can't seem to find an Update() function in javascript or googlesheets api documentation.
This is the code I am trying and variations commented out which doesn't seem to work:
function onFormSubmit(e) {
Logger.log('form submit triggered')
var sheet = SpreadsheetApp.getActive()
var sss = sheet.getSheetByName('Reconciliation')
var col2 = sss.getRange("B:B");
var col2val = col2.getValues();
var counter = 0;
var sssrange = sss.getDataRange();
// sss.Rows = sss.getLastRow() + 1 //Object does not allow properties to be added or changed if I uncomment - this seems to match the google example line though
Logger.log(sss.getLastRow());//=8
var newsssrange = sssrange.offset(1,0); // didn't actually think this would work (since it also had the .update() part that previously didn't work for me) but came across it and was getting desparate.
// sss.setRowCount(sss.getLastRow() + 1); // TypeError: Cannot find function setRowCount in object Sheet.
Logger.log(sss.getLastRow()); //=8
// sss.Update();//TypeError: Cannot find function Update in object Sheet.
}
Sigh... I am still wondering how to add more rows but I did answer my original need of adding a single line since form submits only add a single line. So I'm going to answer it since I had done so many searches and for some reason this never came up, maybe someone will find this useful if they are having the same issue.
function onFormSubmit(e) {
var sheet = SpreadsheetApp.getActive()
var sss = sheet.getSheetByName('Reconciliation')
sss.appendRow(['']);
}
Note that this adds a single blank line. If you run it a second time it won't add a second blank line as appendRow() adds after the last line with data. If you put a string in there or something and run it over and over you will get multiple lines.
I really would like to know about adding multiple lines though also since that will come up and I still seem to be missing something, probably obvious.
Did you know that arrayformula woluld make new lines automatically.? If you paste this formula in Sheet2:
=OFFSET(Sheet1!A1,,,counta(Sheet1!A:A))
and then paste new values in Sheet1 range A:A, then new rows would be added on Sheet2.
Still using DC.JS to get some analysis tools written for our tool performance. Thanks so much for having this library available.
I am trying to show which recipe setup times are the worst for a given set of data. Everything works great as long as you show the whole group. When you only display the specified topN using .rowscap on the rowChart the following happens:
The chart will show the right number of bars and they are even sorted properly but the chart has picked the topN unfiltered bars first and then ordered them. I want it to pick the topN from the ordered list, not the other way around. See jsfiddle for demo. (http://jsfiddle.net/za8ksj45/24/)
in the fiddle, the longest setup time belongs to recipeD.
But if you have more than two recipes selected before recipeD
it is dropped of the right (top2) chart.
line 099-110: reductio definition
line 120-140: removal of empty bins (works okay)
(This is very similar to a problem Gordon helped resolved earlier (dc.js rowChart topN without zeros) and I reused the code from that solution. Something went 'wrong' when I combined it with the reductio.js library.)
I think I am not returning the value portion of the reductio group somewhere but have been unable to figure it out. Any help would be appreciated.
The issue is that at the time you .slice(0,n) the group in your function to remove empty bins, the group is not ordered, so you effectively get a random 2 groups, not the top 2 groups. This is actually clear from the unfiltered view, as the "top2" view shows the 2nd and 3rd group from the "all" view, not the actual top 2 (at least for me).
The previous example worked because Crossfilter's standard groups are ordered by default, but in the case of a complex group like the one you are generating with Reductio, what should it order by? There's no way it can know, so Reductio doesn't mess with the ordering at all, which I suppose means it is ordering by the value property, which is an object.
You need to add one line to order your FactsByRecipe group by average and I think it should fix your problem:
FactsByRecipe.order(function(d) { return d.avg; });
Note that there can only be one ordering on a Crossfilter group, so if you want to show "top X" for more than one property of that group you'll need to create another wrapper (like the remove empty bins wrapper) but have the "top" function re-sort the group by the ordering you want.
Good luck!
I am still at the learning stage of crossfilter and D3.
I have two questions about the example provided on Crossfilter
For the example they provided
1 . line 285:
var list = d3.selectAll(".list").data([flightList]);
In D3 wiki, selection.data([values[, key]]) The specified values is an array of data values, such as an array of numbers or objects, or a function that returns an array of values.
But flightList does not returns an array of values, and the augment for flightList is div.
2 . line 499:
dimension.filterRange(extent);
Why is there no function called for updating bar graphs by barPath()? How could the bar graph updating itself with data changed? So if the data changed, the graph will be updated at the same time?
1.
'list' is a selection that has a one-element array as it's data, and the single element is the function flightList.
On line 301, we see 'list.each(render);', meaning that the render function is called for each element in the 'list' selection, passing in its datum (flightList) as the first argument to the render function.
Therefore line 295 in the 'render(method)' function, which is 'd3.select(this).call(method);' can be more or less rewritten in the context of the list as 'd3.select(".list").call(flightList);', which calls the flightList function passing in the '.list' div as the argument. The flightList function then proceeds to build up the list of flights on top of that div.
At least, that's my reading. IMO, that code is very elegant and general, but extremely hard to follow as an example.
2.
Line 281 sets up an event listener on all the charts that re-renders everything (the 'renderAll' function) whenever a brush moves or finishes moving.
I'm trying to plot more than one line on my graph as per this example:
http://bl.ocks.org/mbostock/3884955
The data is being pulled from a mySQL database using PHP - with output in following format:
[{"dateTimeTaken":"2013-02-21 07:39:29","reading":"12.2","parameterType":"Flouride"},
{"dateTimeTaken":"2013-02-21 07:39:34","reading":"12.01","parameterType":"Temperature"},
{"dateTimeTaken":"2013-02-2107:39:39","reading":"12.01","parameterType":"PH"},...etc.
I would like one line per parameterType but not having any luck getting it working. At the moment getting an error "Problem Parsing d" and no lines at all displaying.
https://gist.github.com/Majella/ab32fe0151fd487da3f6
I'd appreciate it if anyone could help me understand where I'm going wrong?
The problem is in your data.map call -- it's supposed to return the modified object you want in the result array. To fix, simply modify d and return it.
Working example here.