Dynamic Chart colors and Javascript overriding

I have the following results returned from a database which I’d like to represent in a chart.
Assigning a static array of strings dmx-bind:colors="[’#fff’,’#ddd’, etc…]" works fine but I want to use the returned data colour_code from the dataset.

What’s the JS syntax to manipulate charts or any dmxComponent?

    "colors": [
        {
            "colour_name": "Sand",
            "colour_code": "#ffead6",
            "Total": 1
        },
        {
            "colour_name": "Cream",
            "colour_code": "#ffeed6",
            "Total": 4
        },
        {
            "colour_name": "White",
            "colour_code": "#ffffff",
            "Total": 0
        }
    ]
}

This is what I’ve got so far and its not working. The below code is triggered in <dmx-serverconnect ondone=JSCall() event

function JSCall() {
	  var myColours = dmx.app.data.statsByColor.data.colors;
	  var ccode = []

	  myColours.forEach(function(color){
	 	  ccode.push(color.colour_code);
	  });

	  chartStatsColors.dmxComponent.datasets[0].backgroundColor = ccode; //try to assign
	  chartStatsColors.dmxComponent.update(); // nothing happens
}

Try this:

var myColours = {{dmx.app.data.statsByColor.data.colors}};

try the following:

dmx-bind:colors="statsByColor.data.color.values('colour_code')"
1 Like

Thanks. I’m getting the serverconnect data in my JS just fine, the issue is how to assign the results to the chart. how to bind the dynamic data to the chart colors :smiley:

I gotta stop replying before coffee is finished…answered the wrong question AND answered it incorrectly!

Thanks. This worked perfectly. :ok_hand:

@patrick is there a way to bind a color to a specific value within the data?
For example, I have a pie chart that has values for “To do”, “draft” “New” etc. and I want those to always have the same color values, regardless of the amount of records.
How can I do that?
Thanks
J