Home forums Using CanvasJS Use Database and group X axis on Stacked Column chart

This topic contains 2 replies, has 2 voices, and was last updated by  Vishwas R 1 week, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22979

    Twitchy
    Member

    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.

    #22980

    Twitchy
    Member

    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?

    #22986

    Vishwas R
    Keymaster

    @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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.