How to process JSON data that includes a function

Question

How to process JSON data that includes a function

I'm trying to replicate a similar diagram using dynamic input data. Here is a basic example of how I'm attempting to achieve this:

<script>

var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //auto-generated 
var myValues = ', 1, -3, -6, -5, 2, -3'; //auto-generated 

var textJSON = '{' +
        '"data": {' +
            '"x": "year",'  +
            '"columns": ['  +
            '   ["year"' + myYears +'],' +
            '   ["value"' + myValues +']' +
            '       ],' +
            '"type": "bar"' +
            '}' +
            '}' ;

var c3JSON = JSON.parse(textJSON);
var chart = c3.generate( c3JSON );   

</script>

Everything works fine until I try to incorporate the color function into my text. It seems that parsing it to JSON format doesn't work as expected.

Has anyone encountered a similar issue or knows how to correctly include the color function in the JSON object?

javascript json d3.js

Answer 1

Answer №1

Avoid manually converting your values to a JSON string using concatenation and then parsing it back to a JS object. It's not the best approach.

Instead, try this method:

var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //will be created automatically
var myValues = ', 1, -3, -6, -5, 2, -3'; //will be created automatically

var yearsArray = myYears.split(', '); 
yearsArray[0] = 'year';

var valuesArray = myValues.split(', '); 
valuesArray[0] = 'value';

String.prototype.split function will transform your string

, 1991, 1992, 1993, 1994, 1995, 1998

into an array by splitting it at ", ". This will result in the following array:

["", "1991", "1992", "1993", "1994", "1995", "1998"]

To specify a name for your column as the first item, simply assign it to yearsArray[0]. The same logic applies to the values array.

Now you can use this code snippet:

var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //will be created automatically
var myValues = ', 1, -3, -6, -5, 2, -3'; //will be created automatically

var yearsArray = myYears.split(', '); 
yearsArray[0] = 'year';
var valuesArray = myValues.split(', '); 
valuesArray[0] = 'value';

var chart = c3.generate({
        data : {
            x : 'year',
            columns : [
                yearsArray,
                valuesArray
            ],
            type : 'bar',
            labels : true,
            color : function (color, d) {
                if (d.value < -1) {
                    return d3.rgb('red');
                } else if (d.value >= -1 && d.value <= +1) {
                    return d3.rgb('grey');
                } else {
                    return d3.rgb('blue');
                }
            }
        }
    });

Consider refining the format of dynamically generated strings to enhance clarity and transparency.

Answer 2

Avoid manually converting your values to a JSON string using concatenation and then parsing it back to a JS object. It's not the best approach.

Instead, try this method:

var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //will be created automatically
var myValues = ', 1, -3, -6, -5, 2, -3'; //will be created automatically

var yearsArray = myYears.split(', '); 
yearsArray[0] = 'year';

var valuesArray = myValues.split(', '); 
valuesArray[0] = 'value';

String.prototype.split function will transform your string

, 1991, 1992, 1993, 1994, 1995, 1998

into an array by splitting it at ", ". This will result in the following array:

["", "1991", "1992", "1993", "1994", "1995", "1998"]

To specify a name for your column as the first item, simply assign it to yearsArray[0]. The same logic applies to the values array.

Now you can use this code snippet:

var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //will be created automatically
var myValues = ', 1, -3, -6, -5, 2, -3'; //will be created automatically

var yearsArray = myYears.split(', '); 
yearsArray[0] = 'year';
var valuesArray = myValues.split(', '); 
valuesArray[0] = 'value';

var chart = c3.generate({
        data : {
            x : 'year',
            columns : [
                yearsArray,
                valuesArray
            ],
            type : 'bar',
            labels : true,
            color : function (color, d) {
                if (d.value < -1) {
                    return d3.rgb('red');
                } else if (d.value >= -1 && d.value <= +1) {
                    return d3.rgb('grey');
                } else {
                    return d3.rgb('blue');
                }
            }
        }
    });

Consider refining the format of dynamically generated strings to enhance clarity and transparency.

How to process JSON data that includes a function

Answer №1

Similar questions

What is the best way to pass parameters to a PHP script using AJAX to ensure they are properly processed on the server side?

What is the best way to reload scripts each time a component is mounted?

Difficulty activating JavaScript function - unsure of proper implementation

Creating structured paths for retrieving data via HTTP GET requests

Storing information using ajax and JSON through Handsontable to send to a Web API

When incorporating reduce into your code, remember to expect an undefined

The export of 'alpha' is not available in the '@mui/system' module

Retrieve the Nth class of an element that has multiple classes without relying on the .attr("class") method in jQuery

Having trouble with implementing ng-hide and ng-show functionality

Implementing basic authentication in Socket.IO on a Node.js server

Troubleshooting: Magento checkout page keeps scrolling to the top

Determining if a map array value is being duplicated with a distinct key in JavaScript

Using jQuery to target adjacent elements excluding those that are separated by other text

Is there a way for me to extract all the elements within an object nested inside an array and then append them to another array?

Using JQUERY for navigating through pages in a REST API while utilizing deferred functionality

AJAX request stops functioning once the page is reloaded

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

The use of jQuery for fetching posts via ajax can lead to a crash in the browser

Changing the Class of an Element in a Different Component with Angular 2+

Incorporate the previous page's location path into the next page using Props in Gatsby Link