CSV2Chart/CSV2JSON

The following code defines a function that parses a CSV (Comma-separated values) file provided as string to the JSON (JavaScript Object Notation) and adds a default color and a default title to each column for the curve to the JSON.

Learning Task

Perform an analysis of the following code:

• The CSV was loaded with LoadFile4DOM into the browser. How is the loaded string split into lines and how are the line split into the values in the cells.
• The spreadsheet document might not have number in all cells and therefore the cells may not exist if the CSV is not of an rectangular format. How does code (currentline[j] || " ") replace undefined cell elements in currentline[j].

function csv2json(pCSVstr){
   // Parameter retrieves the loaded string with LoadFile4DOM 
  // (1) Set the default Colors for each column of the CSV table
  var colors = ["#ff0000","#00ff00","#0000ff","#00ffff","#ff00ff","#ffff00","#ff4444","#44ff44","#4444ff"];
  // (2) Split into array of lines  
  var lines=csv.split("\n");

  // (3) Generate the output array in which the loaded CSV data is imported 
  var json_out = [];

  // (4) First line contains the headers variables of each column
  var headers=lines[0].split(",");


  // (5) Create empty column arrays
  for(var j=0;j<headers.length;j++){
     var column = {};
     column["name"] = headers[j];
     column["title"] = "Title of Column " + headers[j];
     // set a default color for the curve - if length "colors" exceeded use "black" for curve
     column["color"] = colors[j] || "#000000";
     column["data"] = [];
     json_out.push(column)
  }
  // (6) Iterate over all remaining lines and append data to the
  for(var i=1;i<lines.length;i++){

	  var obj = {};
	  var currentline=lines[i].split(",");

	  for(var j=0;j<headers.length;j++){
		  json_out[headers[j]].data.push(currentline[j] || " ");
	  };
  }
  // For testing console output
  console.log("JSON Output: "+ JSON.stringify(json_out,null,4)); //Show stringified JSON in Console
  return json_out; //Return JavaScript Object
 
}

Advanced Libraries

The code shows a basic approach to parsing CSV string from a file. In CSV2Chart a JQuery plugin was used in AppLSAC.

• (Parsing with JQuery Plugin) See jquery_csv.js for the imported library in CSV2Chart.
• (From CSV to JSON) See CSV2JSON converter which was generated to populate the JSON in the JSON editor consistently to the defined JSON Schema.
• (JSON for MorrisJS) The graph generator MorrisJS for previewing the generated data need again a different JSON format. The MorrisJS-JSON is also generated from JSON in the JSON editor. The MorrisJS-JSON is generated by the library json2morris.js.
• (Other Chart Javascript Libraries) In this learning resource as an example the library morris.js was used. Select another Chart generating Javascript Libraries like

• chart.js
• d3.js

Learning Tasks - Programming

• (Render with Other Chart Libraries) Create your chart export from the CSV data for other libraries like chart.js or d3.js and publish your results e.g. on a GitLab Repository and replace the json2morris.js by your library json2d3.js or json2chart.js.
• (Output Rendering) Analyze the output rendering in the Wiki format by adapting the template of Handlebars4Code stored in template4json_tpl.js. Can you adapted the output template to other output formats, e.g. a HTML page for the a specific output syntax of D3.js.

See also

• AppLSAC/Load