Vue Bootstrap 5 Data parser plugin

CSV

When parsing CSV into Datatables format (rows and columns), by default all lines are treated as rows (there is no header included). You can change that by setting headerIndex to the position of a header row.

You can customize both columns and rows (values between start/end or only selected indexes).

Note: When you set a headerIndex, remember to exclude this value from rows (for example by setting rows.start to a next index).

Data used in this example: Population Figures

JSON

You can define options for rows in exactly the same way as in CSV format (start, end / indexes). Instead of doing the same for columns, provide an array of selected keys to the keys options.

Data used in this example: Population Figures

CSV

Creating a colorMap based on a CSV Data requires identifying the region - Vector Maps uses alpha2Code for IDs, which isn't always convenient. Data Parser can, in most cases, fetch the required identifier based on the country's name or alpha3Code.

Note: If you don't set the step option to a fixed value, Data Parser will compute equal size intervals - it may resolve in empty intervals if values are unevenly distributed.

Data used in this example: Population Figures

JSON

Apart from a colorMap, parse() method returns also a legend based on which you can easily display value-color corelations.

If you're not satisfied with colors available out of the box, you can pass an array of color strings based on which DataParser will create your colorMap.

The getCoordinates() method helps to find x and y map coordinates based on longitude and latitude.

Calculated point is an approximation and might not be accurate.

Data used in this example: Population Figures

CSV

Creating datasets for your Chart component requires two kinds of labels - labels for each specific dataset (datasetLabel: column's index) as well as labels for data points (labelsIndex: index of a row with labels).

Additionally, you can format the datasetLabel using formatLabel option.

Note: Data Parser generates a color for each dataset, which you can later use for background/border color. By default, values comes from mdb palette but you can also use full palette - in this case the color option's value should refer to the intensity (from 50 to 900).

JSON

When working with JSON data for you Chart component, you can define which keys should be parsed or select all without those specified in the ignoreKeys options.

JSON

Note: CSV format is not available for the Treeview component.