fetch(), CSV, and JSON

Getting data from server and converting it to JSON.

Getting Data

JSC.fetch() is an alias for vanilla JS fetch() function but includes a polyfill for IE11. This function makes it easy to get data for the chart. Especially if the data source is already stored in JSON format.

JSC.fetch('./data.json') .then(response => response.json()) .then(json => { //Use JSON to
	populate the chart. });

JSC.fetch("./data.csv")
  .then(response => response.text())
  .then(text => {
    //Use CSV text
  });

Delimiter Separated Values

Delimiter separated values are often used to reduce the size of data for transfer between the server and browser. These utility functions enable converting between CSV and JSON to facilitate charting the data regardless of data format. The most common formats are comma delimited values (CSV) and tab delimited values (TSV).

CSV

Consider the following CSV content

"Date,Actual,Goal 1/1/2018,4535,5000"

Converting CSV to JSON

let data = JSC.csv2Json("Date,Actual,Goal\n1/1/2018,4535,5000");

TSV

Another popular delimiter format uses the tab character which is useful when data contains commas.

let data = JSC.tsv2Json("Date\tActual\tGoal\n1/1/2018\t4535\t5000");

DSV

An arbitrary delimiter character can also be used. The example below demonstrates using the pipe | character as the delimiter.

let data = JSC.dsv2Json("Date|Actual|Goal\n1/1/2018|4535|5000", "|");

The resulting JavaScript array in all three cases is:

[{ Date: 1514786400000, Actual: 4535, Goal: 5000 }]

Note: The resulting array also includes two properties columns and types:

{ columns: ["Date", "Actual", "Goal"], types: ["date", "number", "number"] }

Options Converting to JSON

The examples above provide a convenient way to quickly convert DSV data into JSON objects. There are a few options that can be used to enhance or modify the conversion process when necessary.

Renaming properties

The resulting JSON object property names can be defined manually overwriting the existing header or when a header row does not exist. Property names can also be renamed using the map option.

Custom columns can be specified using the columns property:

let data = JSC.csv2Json("Date,Actual,Goal\n1/1/2018,4535,5000", { columns: ["date", "steps", "goal"] });

Or a mapping function can be used to define the property renaming:

let data = JSC.csv2Json("Date,Actual,Goal\n1/1/2018,4535,5000", {
  map: (d, i) => {
    return { date: d.Date, steps: d.Actual, goal: d.Goal };
  }
});

In both cases the resulting JavaScript array is:

[{ date: 1514786400000, steps: 4535, goal: 5000 }]

Custom Coercion

By default the utility will attempt to detect and coerce the data types to native values, however, this can be done manually as well. The coerce option accepts a function that receives the row JSON object with all property values as strings. This function can also be used to rename properties if needed but the automatic data type coercion is omitted when this option is specified.

The coerce function arguments are (row, index, types). Types are the automatically detected types for each column.

let data = JSC.dsv2Json("Year|Sales\n2017|2315\n2018|3423", "|", {
  coerce: (d, i, types) => {
    return { date: new Date(+d.Year, 0, 1), sales: +d.Sales };
  }
});

The resulting array of JSON objects is the equivalent of:

[{ date: new Date(2017, 0, 1), sales: 2315 }, { date: new Date(2018, 0, 1), sales: 3423 }]

Note: When both map and coerce options are specified, the row argument passed to the coerce function will be the result of the map function.

Converting to DSV

Converting an array of objects back into delimiter separated values can be achieved using similar utility functions as described above.

JSC.json2Csv([{ date: 1514786400000, steps: 4535, goal: 5000 }]); //
("date,steps,goal\n1514786400000,4535,5000");

The map option can be used to perform any modification of the row values or property names. In this example the same data row is converted back to the original pipe delimited format and property names using the JSC.formatDate() function for the date values..

JSC.json2Dsv([{ date: 1514786400000, steps: 4535, goal: 5000 }], "|", {
  map: (d, i) => {
    return { Date: JSC.formatDate(d.date, "d"), Actual: d.steps, Goal: d.goal };
  }
}); //
("Date|Actual|Goal\n1/1/2018|4535|5000");

Documentation

Tutorials