Tips on transforming String Format information

My Json data is structured like this:

 var d =  "1,3,2,4"

I want to convert it to:

 var d =   [3,5,3,6]

I attempted the following:

success: function (Response) {
    debugger;
    var du = (Response.d);
    var final_string = '[' + du + ']'
    // final_string = [1, 3, 2, 4];
    console.log(final_string);

However, my solution is not working as intended. I need the value of final_string to be final_string = [1, 3, 2, 4];

I am using this data to create a graph

JavaScript

<script>
        $(document).ready(function(){
            debugger;
            $.ajax({
                type: "Post",
                url: "Default.aspx/getdata",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Response) {
                    debugger;
                    var d = Response.d.toString();
                    var final_string = '[' + d + ']'
                    console.log(final_string);
                    //final_string = [1,3,2,4];
         var options = {
             chart: {
                 height: 250,
                 width:500,
                 type: 'line',
             },
             series: [{
                 name: ' ',
                 type: 'column',
                 data: final_string
             }, {
                 name: '',
                 type: 'line',
                 data: final_string
             }],
             stroke: {

                 width: [0, 4]
             },
             title: {
                 text: 'Total Count'
             },
             labels: ['Birthady', 'Anniversary', 'Special', 'Total'],
             xaxis: {
                 type: 'text'
             },
             yaxis: [{
                 title: {
                     text: 'Count Blog',
                 },
             }, {
                 opposite: true,
                 title: {
                     text: ''
                 }
             }]
         }
         debugger;
         var chart = new ApexCharts(
             document.querySelector("#chart"),
                      options

                    );

                    chart.render();

                },
                error: function (result) {
                }
            });
        });
    </script>

The correct data format for the series is [1,3,2,4]. When I pass data = [1,3,2,4] in the series data, the graph displays correctly. But when I pass final_string in the series data, the graph does not display correctly. Can anyone help me with this issue?

Answer №1

Instead of using the split(",") function, why not try using it in combination with map(Number)? This will help convert each item in the array to a Number type rather than a String, especially useful when working with charts.

var d =  "1,3,2,4"
var res = d.split(",").map(Number);

console.log(res)

The idea for my suggestion came from the example provided in: ApexCharts

For your array, you'll want a set of Numbers like this:

[2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]

Answer №2

done: function (Reply) {
    debugger;
    var data = Reply.toString();
    var output = '[' + data + ']'
    console.log(output);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

saving user information with asynchronous HTTP calls

I am encountering an issue while trying to save my form data using AJAX. When I submit the form data in a JavaScript file that calls another PHP file to perform an insertion operation, an error occurs. Here is the code snippet: <button id="submit" cl ...

What is the best way to incorporate this CodePen snippet into a Vue project?

Can anyone help me figure out how to incorporate this awesome animation from CodePen (link here: https://codepen.io/iprodev/pen/azpWBr) into a Vue project? I've tried implementing it like so: <template> <div> <canvas heigh ...

What could be causing the canvas circle to appear distorted and not truly circular?

My simple code is intended to draw a circle, but it's not appearing as expected. The coordinates seem to be shifted oddly. The canvas size is specified with style="width: 600px; height: 600px;". I've tested it on both Chrome and Safari, yet the r ...

What are the benefits of implementing a hexadecimal strategy in javascript?

I have a somewhat unusual question that has been puzzling me. I've noticed some interesting choices in naming variables in JavaScript, seemingly using what appears to be "a hexadecimal approach". For example, I see variables named like _0x2f8b, _0xcb6 ...

Mastering JQuery: Techniques for Managing Events Across Numerous Elements

My view page utilizes Ajax and JQuery to retrieve data from Codeigniter's controller, then presents it in HTML format. Below is the code for the Ajax post: $(document).ready(function(){ var fileId = 0; var wrapper = $("#preference"); ...

Guide to formatting the timestamp in outgoing JSON

Lately, I've been immersed in exploring Go and it truly is remarkable. One thing that has me scratching my head (even after scouring through documentation and blogs) is how to customize the formatting of the time.Time type when it's encoded using ...

Error: The React Material-UI modal is encountering a type error where it cannot access the property 'hasOwnProperty' of an undefined value

Whenever I include a modal in one of my classes, I encounter this error. Error: Unable to access property 'hasOwnProperty' of undefined Here is a simple example where I am attempting to display a basic modal at all times. Any suggestions? I h ...

Vue.js Conditional Templates

I am attempting to implement VueJs conditional rendering using handlebars in vueJs 2.0 as outlined in their official documentation, but eslint is throwing an error: - avoid using JavaScript keyword as property name: "if" in expression {{#if ok}} - avoid us ...

A handy feature of HTML5 is the dataset attribute, which

Is there a way to restrict the height of the dataset dropdown list in HTML? When using <input list="datalist"> with numerous elements, some might not be visible. Is it possible to limit the size of the list and enable vertical scrolling to display al ...

Extracting data from JSON objects and saving it into MySQL variables

I need help with parsing a JSON array and its objects to use them in a MySQL procedure. However, I am encountering null values while trying to read the values. The _list contains: [{"floor_id":"5","length":"40"},{"floor_id":"6","length":"61"}] Here is t ...

Utilizing the power of Vuetify.js for a sleek top-right menu

I'm diving into Vue and looking to create a horizontal top-right menu with Vuetify. However, I'm getting a vertical menu instead of the desired horizontal layout. The Vuetify documentation doesn't offer a clear example of how to implement th ...

struggling with managing an array of Vue3 refs

Having an issue with handling vue3 refs, specifically when retrieving data from Firestore. When logging the [documents], everything seems to work fine. However, I run into errors when trying to access values from an array within a document. For example, ...

What is the exact functioning of the Array.push() method in Javascript?

During my online CS class, we covered the topic of how Arrays and memory work. The teacher used C as an example to explain that you cannot add extra elements to a full Array. As someone who started with JavaScript, I found it interesting that in JavaScript ...

Is it possible to modify this code to accept multiple IDs at once?

I'm attempting to create a form in JavaScript where, upon entering the necessary details and clicking submit, the user's email client opens with the information pre-filled for easy sending. However, I am facing challenges as my code involves mult ...

Obtaining the innerHTML value using JavaScript in an Asp.net Core 5 View

Apologies for any inaccuracies in my English writing. In the Asp.Net Core project view, I am trying to use JavaScript to capture multiple Span tags within innerHTML represented by a loop and display their sum in another tag. However, I am only able to ret ...

What barriers are blocking me from accessing this JSON data?

I am attempting to retrieve an array of images from the JSON data below and display it in a GridView, but for some reason I am unable to access it >>> { id: 241, title: "title", image: "1469370455.jpg", description: " descriotion ", images: ...

Transforming specific symbols (é è ë) with URL encoding

I am currently working on a JavaScript function that opens the user's email client with pre-filled content. However, I am facing difficulties in converting special characters so they display correctly in the email client (especially when passed throu ...

Rails inspired tag selection tool akin to Stack Overflow

In my Rails application, I am looking to implement a tagging system for models. I want to create a tag selection feature similar to Stack Overflow where I can type in a tag like 'rails' and a drop-down list of options containing that tag will app ...

Are there any security concerns involved in creating a game using a combination of JavaScript, Electron, and Three.js?

I'm not looking to create anything on the scale of an MMORPG, just a small game similar to Faster Than Light. Is there a way to protect against cheat engine or prevent users from running their own JavaScript in the game, considering anyone can access ...

Error: The function 'toEqual' is not recognized by the 'expect' method causing

I've been following along Dan Abramov's Redux tutorial which can be found at () Lesson 9 covers testing and the usage of expect and .toEqual() This is the code I'm working on: var expect = require('chai').expect; var freeze = re ...