javascript - Loading csv data with d3.csv in nvd3 multiBar Chart example (JSON format) -

-

I am trying to reproduce a nvd3.js multibar chart using my own .csv data . In the past, such questions have been asked, but unable to help me solve this particular issue. In various questions I have seen the use of d3.entries d3.nest and variable construction to reproduce the correct input format, but it is a difficult time to understand how it works.

Similar questions:

These questions try to reproduce other chart types that expect different JSON data formats. In the nest, I have issues creating the "x" and "y" values ​​in the nest, in the chart example they use a function to create the data and in the function they create x (number of times) and y (real input) value.

I want to reproduce this graph:

with this CSV data: 

  date, device: power: LGF, device : Power: GF, Equipment: Power: 1, Equipment: Power: 2 Genes, 6726.864146,5648.080727,25 9.773672042.260163 Fab, 6405.0 9 1236,5377.910358,2474.402801,1944.570663 March, 6727.448125,5648.571054,2598.935109,2042.437457 APR, 6433.12227,5401.446071,2485.231698,1953.080819 May 6993.742947, 5872.160325,2701.809623,2123.28394 June 6433.12227,5401.446071,2485.231698,1953.080819 July 6727.448125,5648.571054,2598.935109,2042.437457 August 6993.742947,5872.160325,2701.809623,2123.28394 September 6166.827448,5177.8568 , 2382.357183, 1872.234336, October, 6993.742947,587 2.160325,2701.809623, 2,l23k28,3 9 November 4th, 6699.417092,5625.035342,2588.106212,2033.927301 December, 6167.411428,5178.347127,2382.582785,1872.411631   
 It is expected this type of data, JSON format ( Actual version is more data):   
 I have been trying with the answers from the same question and one of the results was this: where the left From my side with an example And on the right I have loaded the JSON file.  
  Code:   
 Any sign or explanation is appreciated!  
  
 
 
 The final is not exactly clear on the expected production, but it should start or you completely Should answer.  
  
  & lt;   
 script src = "http://d3js.org/d3.v3.js"></script> & Lt; Script src = "http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script> & Lt; Link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css"> & Lt; Div id = "chart1" & gt; & Lt; Svg & gt; & Lt; / Svg & gt; & Lt; / Div & gt; & Lt; Script & gt; D3.csv ("data.csv", function (mistake, data) {// Get every key of the data that is not date / this key / value pair will be our key // Value x and y will be month and value Var dataToPlot = Object.keys (Data [0]). Filter (function (k) {return k! = "Date"}) .map (function (k) {return {"key": k, "value": data .map (function (d) {return} Let's make it a real date "x": d3.time.format ("% Y-% b-% d"). Pars ("2014-" + D. Date + "-01"), "y": + d [k]}})}}) nv.addGraph (function () {var chart = nv.models.multiBarChart (.) Transition duration (350). ReduceXTicks (true) // 'False', each one x-axis tick label will be rendered .rotateLabels (0) // Angle is to rotate the X-axis label .showControls (correct) // Switch between user Allow 'grouped' and 'stacked' mode .groupSpacing (0.1) // Distance between each group of bars; chart.xAxis .tickFormat (d3.time.format ('% b'); chart .yAxis .tickFormat (d3 .format (', 1f.')); D3.select ('# chart1 svg') .datum (dataToPlot) .call (chart); Nv.utils.windowResize (chart.update); Return chart; }); }) & Lt; / Script & gt; & Lt; / Html & gt;

Comments

Post a Comment

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

-
I have a SKScene where I am adding an SKSpriteNode I have subclassed the SKSpriteNode class to create this node. In the subclass I am defining some SKActions on Sprite. What do I want to do when the end of this phantom ends the SKAction sequence, then I add a new Prayer node to this scene. How is this possible. The following code is mine: The code for the sequence is that I'm running on the Scansprinitode subclass (TEMissileNode): - SKAction * moveDown = [SKAction moveToY: Self.position.y - 20 Duration: 0.2]; SKAction * animation = [SKAction animateWithTextures: textures timePerFrame: time / 7]; SKAction * moveMissileProjectile = [SKAction Moving: Pointoffscreen Term: Time]; SKAction * group = [SKAction group: @ [animation, movement projectile]]; SKAction * Sequence = [SKAction Sequence: @ [Hilldown, Group, [SKAction removalFromParent]]]; [Self run action: sequence]; From the main scene, I call those actions that execute these tasks TEMissileNode * missile = [tmissil...
Read more

Matlab transpose a table vector -

-
An embarrassing simple question seems to be, but how can I move a Matlab table vector? aTableT = aTable '; I tried a standard syntax for the simple interaction of a line vector to a line vector aTable : ATableT = reshape (aTable, 1, Height (aTable)); and aTableT = rot90 (aTable); According to the head, the last time table should work for table, see. However, I get this error code: Error type in using table / permit (line 396) Undefined function 'permute' for the input arguments. Error in rot 90 (line 29) b = magnitude (b, [2 1 3: ndims (a)]); NB: fliplr is not useful either pretty sure I have covered clear angles - any ideas? Thanks! Try changing your table into an array, move it, then back to a table In other words, try doing this: aTableArray = table2array (aTable); ATableT = array 2table (aTableArray. '); I have also read the document for rot90 , and it says that rot90 is definitely working for tables Do, and I find you...
Read more

c# - Textbox not clickable but editable -

-
I have a small form with 10 text boxes, I have set them in the correct tab order. I want them on my tab service I was wondering if there is a way to set the text box so that they can be selected for editing until they are tabbed. That is ... I do not want the end user to edit the text box to click on them, I just want to make them editable through tabu. this should do the trick public partial category poor text box: Text Box {Safe Override Zero WndProc (Ref: Message Message) {if (m.msg == (Int) WM.LBUTTONDOWN) {Return; // mount down events} base.WndProc (ref m); }} Window message enum can be found. How to do this without anherizing: text box : class EatMouseDown: netwindows {safe override zero WndProc (ref message message) {if (m.msg == (int) WM.LBUTTONDOWN) {return; } Base.WandProc (Ref M); }} Safe Override Zero Onload (EventEurge E) {base.OnLoad (e); How to do this without any part: left a clean part, whatever is important, this can be a buggy but it works R...
Read more