Utilize Bootstrap DataTable Sparkline to extract information from a comma-delimited string rather than an array

Question

Utilize Bootstrap DataTable Sparkline to extract information from a comma-delimited string rather than an array

I have successfully implemented a Bootstrap DataTable component in my Asp.net Core MVC App to display data from my database. However, I am facing a challenge when trying to add a sparkline to a column. The sparkline component requires an array of values, but I only have a comma-separated string. I need assistance in understanding how to modify the JavaScript code to accommodate my data type.

To simplify the issue, I created a new App without a database and directly defined data in the JavaScript, similar to the example shown here: https://datatables.net/examples/basic_init/stocks.html

While this example works perfectly, I need to adjust the format of values in the "last" field from an array to a string, as shown below:

  var stock_data = [
        {
            "name": "ACME Gadgets",
            "symbol": "AGDTS",
            "last": "2.57, 2.54, 2.54, 2.56, 2.57, 2.58, 2.59"
        },
.....
]

Here is the JavaScript code that requires modification:

$(document).ready(function () {
    debugger;
    var stock_data = [
        {
            "name": "ACME Gadgets",
            "symbol": "AGDTS",
            "last": [2.57, 2.54, 2.54, 2.56, 2.57, 2.58, 2.59]
        },
        {
            "name": "Spry Media Productions",
            "symbol": "SPMP",
            "last": [1.12, 1.11, 1.08, 1.08, 1.09, 1.11, 1.08]
        },
        ...
    ];
    
    // DataTable initialization and other functionalities
    
});

Despite trying to use .split(", ") in the data rendering section, I have been unsuccessful. Debugging the JavaScript code (in site.js) has also proven challenging, as console.log statements do not produce any output.

UPDATE

Thanks to @andrewJames, my code now works flawlessly without the need for any data transformation. I have also added additional functionalities such as grouping by columns and formatting datetime display using moment.js.

Here is the updated code:

$(document).ready(function () {
    // DataTable configuration with grouping and datetime formatting
    
});

One remaining issue is that when I enable responsive: true, the sparkline column gets hidden. Upon expanding the row to show hidden columns, the entire array of values is displayed instead of the sparkline. It seems that the drawCallback function is not applied to hidden columns.

I believe I need to capture the mouse click on the expand icon and dynamically inject the canvas to display the sparkline, but I am unsure how to achieve this.

javascript datatable bootstrap-5 asp.net-core-3.1

Answer 1

Answer №1

If you have strings with comma-separated numbers and want to convert them back to arrays of numbers, you can use the following code snippet:

for(i = 0; i < data.length; i++) {
    data[i].last = data[i].last.split(",").map(element => {
        return Number(element);
    });
}

This code snippet first splits the string using the comma as a delimiter and then maps over the resulting array to convert each string to a number.

Where should you place this code?

In your code snippet provided, this code should be placed after the line:

data = stock_data;

For a complete demonstration, here is a self-contained demo:

Update

In response to a comment about using the following as the data source...

ajax: "api/ApartmentsAvailables"

You can adapt the logic mentioned above by expanding the DataTables ajax option with the dataSrc option. This allows you to preprocess the JSON received from the Ajax URL and convert the comma-separated strings back to arrays of numbers using similar logic as demonstrated.

"ajax": {
    "url": "api/ApartmentsAvailables",
    "dataSrc": function ( json ) { // JSON with strings

      // Transform the JSON here...
  
      return json;  // Updated JSON with arrays
    }
}

If needed, you can use console.log( json ) to verify the JSON structure before and after transformation. Adjust the code to fit your actual JSON structure, and refer to DataTables documentation for more information on dataSrc usage.

Answer 2

If you have strings with comma-separated numbers and want to convert them back to arrays of numbers, you can use the following code snippet:

for(i = 0; i < data.length; i++) {
    data[i].last = data[i].last.split(",").map(element => {
        return Number(element);
    });
}

This code snippet first splits the string using the comma as a delimiter and then maps over the resulting array to convert each string to a number.

Where should you place this code?

In your code snippet provided, this code should be placed after the line:

data = stock_data;

For a complete demonstration, here is a self-contained demo:

Update

In response to a comment about using the following as the data source...

ajax: "api/ApartmentsAvailables"

You can adapt the logic mentioned above by expanding the DataTables ajax option with the dataSrc option. This allows you to preprocess the JSON received from the Ajax URL and convert the comma-separated strings back to arrays of numbers using similar logic as demonstrated.

"ajax": {
    "url": "api/ApartmentsAvailables",
    "dataSrc": function ( json ) { // JSON with strings

      // Transform the JSON here...
  
      return json;  // Updated JSON with arrays
    }
}

If needed, you can use console.log( json ) to verify the JSON structure before and after transformation. Adjust the code to fit your actual JSON structure, and refer to DataTables documentation for more information on dataSrc usage.

Answer 3

Answer №2

Retrieve the last value in the stock_data array by using the index 'n'. Make sure to call the toString() method on the retrieved value.

Here, 'n' represents the index of elements in the array.

More information on the toString() method can be found here.

Answer 4

Retrieve the last value in the stock_data array by using the index 'n'. Make sure to call the toString() method on the retrieved value.

Here, 'n' represents the index of elements in the array.

More information on the toString() method can be found here.

Utilize Bootstrap DataTable Sparkline to extract information from a comma-delimited string rather than an array

Answer №1

Answer №2

Similar questions

Performing a fetch() POST request in Express.js results in an empty body object being generated

Updating an Angular directive with dynamically added ng-module and ng-change attributes

Angular does not allow the transfer of property values from one to another

Challenge encountered when attempting to detect multiple submit buttons using jQuery

Repetitive series of HTTP requests within a looping structure

Tips for getting Vue's element-ui validateField() function to function correctly in conjunction with v-if?

The action of setting the inner HTML of "main" to "testing" is temporary and will revert back to its original state rather than permanently change

The Next.js error message reads: 'Issue with setting properties on undefined entity (specifically 'hook')'

karma is failing to run the test scenario

jQuery Form Validator: requiring double submission

Tips for updating text in a freshly opened window using JQuery or JavaScript

Preserve jQuery-enhanced webpage changes permanently

How to display percentage value on ReactJS Material UI progress bar

Can you explain the functioning of knockout container less syntax? (does it have any drawbacks?)

ASP.NET Core does not support jQuery.validate functionality

Substitute placeholders in the HTML code with Angular syntax

Ways to dynamically generate a card using NuxtJS

When the form is submitted, the values of the items are being reverted back

A regular expression in Javascript that can be used to identify at least one word starting with a number among multiple words, with a

What is the reason for the JavaScript TypeError (undefined) being triggered when this object is used within a function?