Using Javascript arrays to assign values to a Json object in CanvasXpress

I'm seeking advice on the best source for assistance with CanvasXpress. I haven't found any relevant threads in the forum yet. Currently, I'm using CanvasXpress to showcase dynamic data and I know that it accepts json objects. My issue arises when constructing a heatmap and inputting specific javascript array variables as values for the vars:, smps:, and data: variables. The problem lies in creating a proper json object; upon assigning my arrays like var axis = 'A2', 'A3', 'A20', 'A6' [...] matrix = [0.00, 0.33, 0.00, 0.00] [...], all I get are errors or a non-loading page.

The challenge now is integrating these variables into the following json object:

   var cx = new CanvasXpress('canvas1',
                              {y: {vars: axis,
                               smps: axis,
                               desc: ['Intensity'],
                               data: [matrix]}},
                              {graphType: 'Heatmap',
                               showDataValues: true,
                               background: 'rgb(245,245,245)',
                               indicatorCenter: 'rainbow',
                               heatmapType: 'green',
                               centerData: true,
                               indicatorWidth: 8});

If you could offer guidance on this matter or direct me to a more suitable forum for help, I would greatly appreciate it.

Many thanks!

javascriptjson

Answer №1

It seems like there may be an issue with the square brackets in your code. You can try modifying it as shown below:

remoteData = [
    [10,12,153,4,100,73,42,64],
    [12,4,60,5,24,14,32,13],
    [7,12,20,13,49,52,42,92],
    [21,10,30,8,65,2000,47,58],
    [15,14,100,5,34,130,82,51],
    [100,82,73,124,0,4,5,142],
    [100,82,73,124,0,4,5,142]
];             

newData = {
    "y": {
        "vars": ["Gene1","Gene2","Gene3","Gene4","Gene5","Gene6","Gene7"],
        "smps": ["Smp1","Smp2","Smp3","Smp4","Smp5","Smp6","Smp7","Smp8"],
        "desc": ["Intensity"],
        "data": remoteData
    }
};

You can check out a full working example here

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

Ways to reposition JavaScript output within a webpage

I am new to HTML, CSS, and JavaScript and I have a question regarding how they work together. I can use JavaScript to display objects on the page, but I'm unsure how to move them around like other elements. Is CSS the solution for this? Any advice w ...

javascripthtmlcss

Transferring data from a form to a function in JavaScript

Hey there! I've been working on a form that sends a value to a new window, but for some reason, the value val2 is showing up as null in the new window instead of being passed. Here's my code: function sendValue(value) { ViewImg = window.ope ...

javascripthtmlforms

Error in Firebase: The first argument provided to collection() must be a valid CollectionReference, DocumentReference, or FirebaseFirestore

Wow, this one has been quite a challenge for me. I had to go back to firebase9.4.0 in order to pinpoint where my code was causing errors. The error: In a separate file named queries.config.js, I gather all the necessary subcollections: import { query, co ...

javascriptfirebasegoogle-cloud-firestorenext.js

What is the best way to loop through variables to include them as parameters in an HTTP header for additional processing?

I have 2 different JSON APIs that I am working with: one for searching profiles and the other for fetching extended profile information. When I make a request to the first API, it returns search results containing relevant profiles. Among these results, e ...

jsonpython-3.x

Show a preview of an image in an HTML document

How can I display an image after uploading it? I attempted to use the following code, but it didn't work: onFileSuccess: function(file, response) { var json = new Hash(JSON.decode(response, true) || {}); if (json.get('status& ...

phpjqueryhtmljsonajax

A step-by-step guide on setting up flow types for @material-ui/core version 4

Is there a way to install flow types for material-ui/core version 4.x.x? It seems like the last update was for version 1.x.x here. The documentation on this topic is quite limited here. I'm unsure if there is still support for this, especially since t ...

javascriptreactjsmaterial-uiflowtypeflow-typed

send array to the sort function

How can I sort a data array that is returned from a function, rather than using a predefined const like in the example below: const DEFAULT_COMPETITORS = [ 'Seamless/Grubhub', 'test']; DEFAULT_COMPETITORS.sort(function (a, b) { re ...

javascriptarrays

I am having trouble retrieving the content-length from the response headers within the app.use() middleware function

Can anyone help with retrieving the content-length from response headers within the app.use() middleware function? const app = express(); app.use((req, res, next) => { // Need to find a way to access content-length of res console.log("co ...

javascriptnode.jsexpress

Unknown individual, yet revealed by the investigator

I'm attempting to develop a dynamic list in react.js generateList = () =>{ return this.state.user.map((u)=>{ console.log(u); return <li onClick={this.handleClick} id={u} name={u}>{u}</li>; }); } The hand ...

javascriptreactjs

Encountering the "Unexpected token SyntaxError" message is a common issue that arises while trying to import express-handlebars

Whenever I include this specific line, an error shows up. But as soon as I remove it, the error disappears. const expressHandleBars = require('express-handlebars'); The error message goes something like this: C:\Users\Hp\sample- ...

javascriptnode.jsangularjsmongodbexpress

struggle to locate / Node.js Error

I followed the tutorial located at and implemented the following code. // Module dependencies. var application_root = __dirname, express = require( 'express' ), //Web framework path = require( 'path' ), //Utilities for dealing with fi ...

javascriptnode.jsexpressroutes

Managing empty props in React applications

I am facing an issue where I need to display an image fetched from an API on app start, but when I try to render it in React, the application crashes with the error message: TypeError: Cannot read property 'icon' of undefined. Although the icon ...

javascriptreactjsundefined

Reaching out to a particular individual with a message

In my coding dilemma, I am trying to make a bot send a message every minute to a particular user, not all users. The struggle is real! guild.members.cache.forEach(member => { setInterval(() => { member.send('hello').catch(error =&g ...

javascriptnode.jsdiscord.jsbots

Guide to implementing client-side validation in MVC 4 without relying on the model

Currently, I am developing an ASP.NET MVC 4 project where I have decided not to utilize View Models. Instead, I am opting to work with the classes generated from the Entities for my Models. I am curious if there are alternative methods to achieve this. A ...

javascriptjqueryajax

Sending JSON data using RestKit POST method

I'm currently working on developing an iOS App for my school. In order to run some statistics later, I have implemented a database and created a Restful Web Service to handle all the necessary functions. To access the Web Service, I am utilizing RestK ...

objective-cjsonrestkit

Using AngularJs: Invoking Service/Provider in app.config

I need to access my service from within app.config. While searching for a solution, I came across this question, which presented a potential solution that I attempted to implement (not the accepted answer, but the one below with the title "Set up your ser ...

javascripthtmlangularjsroutes

Display a standard chart using the Chart.js library, along with customizable options

I have successfully generated charts from a database using JSON script. However, I am facing an issue where the chart only displays when I click on an option value. What I want to achieve now is setting a default value option so that when the website ope ...

javascriptphpjqueryjson

What is the best way to implement custom serialization for Date types in JSON.stringify()?

class MyClass { myString: string; myDate: Date; } function foo() { const myClassArray: MyClass[] = .... return JSON.stringify(myClassArray); // or expressApp.status(200).json(myClassArray); } foo will generate a JSON string with the date format o ...

javascripttypescript

Is it possible to determine HTML5 Context Menu Support using JavaScript?

While reviewing the Modernizr documentation, I couldn't find any information on creating a menu element and then checking its existence. However, I am concerned that even if the browser supports this, it may not support the type context. Do you have a ...

javascriptjquery

Convert TypeScript-specific statements into standard JavaScript code

For my nextjs frontend, I want to integrate authentication using a keycloak server. I came across this helpful example on how to implement it. The only issue is that the example is in typescript and I need to adapt it for my javascript application. Being u ...

javascriptreactjstypescriptnext.js