From Wikiversity
Jump to navigation Jump to search

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[edit | edit source]

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"] = [];
  // (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[edit | edit source]

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[1] 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

Learning Tasks - Programming[edit | edit source]

  • (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[edit | edit source]

References[edit | edit source]

  1. GitHub User typeiii (2020-10-01), GitHub Library typeiii/jquery-csv, GitHub Repository, retrieved 2020-10-08 {{citation}}: |author= has generic name (help)
  2. "Chart.js samples". www.chartjs.org. Retrieved 2020-10-08.
  3. Holtz, Yan. "The D3 Graph Gallery – Simple charts made in d3.js". www.d3-graph-gallery.com. Retrieved 2020-10-08.