Use Database and group X axis on Stacked Column chart

[Twitchy]

Hello,

Ive been trying to assist someone with JS and graphing, and have successfully done so with the help of Canvas JS, however, now that im expanding upon that graph ive run into a few issues.

To quickly sum it up, my data essentially looks like this

Canada, Position 1: 43
Canada, Position 2: 73
Canada, Position 2: 33

USA, Position 1: 56
USA, Position 2: 23
USA, Position 3: 75

This is put in through an array that goes into my database using other forms of JS and JQuery, I then dynamically add via:

var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
title: {
text: “Mayoral Election”,
fontFamily: “arial black”,
fontColor: “#695A42”
},
axisX: {
title: “Candidate Name”,
},
axisY: {
title: “Votes per Ward”,
gridColor: “#B6B1A8”,
tickColor: “#B6B1A8”
},
toolTip: {
shared: true,
content: toolTipContent
},
data: [{
type: “stackedColumn”,
showInLegend: true,
color: “#696661”,
name: “Position 1”,
dataPoints: []
},
{
type: “stackedColumn”,
showInLegend: true,
name: “Position 2”,
color: “#EDCA93”,
dataPoints: []
},

etc etc

Finally, I put in my datapoints using

for (var i = 0; i < CandidateInfo.length; i++) {
chart.options.data[0].dataPoints.push({ label: CandidateInfo[i].Name, y: mayorDpsW11[i] });
chart.options.data[1].dataPoints.push({ label: CandidateInfo[i].Name, y: mayorDpsW12[i] });
chart.options.data[2].dataPoints.push({ label: CandidateInfo[i].Name, y: mayorDpsW13[i] });
chart.options.data[3].dataPoints.push({ label: CandidateInfo[i].Name, y: mayorDpsW14[i] });
}

This should then get all of the needed Y coordinates from each country name, and going by what the stacked column example says, if the name is the same, it will group

The problem is, when I do it this way, I get all of the names as their own tick on the X axis, even if theyre the same. So I end up with three different similar country names for each, whilst the Positions are both in the 1 and 2 tick where they should be.

Is anyone able to assist with this, it is boggling my mind and I cannot for the life of me figure out why it is doing it this way.

[Twitchy]

Addition: I tried the exact same data hardcoded, and it worked perfectly. It appears that it doesnt detected the .Name in the datapoint push to be a string. Is there any way to circumvent this?

[Vishwas R]

@twitchy,

Stacked Charts are plotted when multiple column/area charts with same x values are plotted on same scale. Assigning same x-values along with names should work fine in your case. If this doesn’t solve your issue, kindly share sample project reproducing the issue you are facing along with sample database over Google-Drive or Onedrive, so that we can run the project locally, understand the issue better and help you out.

—
Vishwas R
Team CanvasJS