Home forums Using CanvasJS Decimal Data not working with stackedcolumn

This topic contains 2 replies, has 2 voices, and was last updated by  manjitbang 2 months, 3 weeks ago.

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

    manjitbang
    Member

    var dpe1 = [];
    var dpe2 = [];
    var dpe3 = [];
    var dpme = [];
    var dporr = [];
    var dpnex = [];
    var dataPoints4 = [];
    var data;

    var chart3 = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “Customer Last Month Reports Summary”,
    fontSize: 20
    },
    axisX: {
    labelAngle: 270,
    labelFontSize: 15
    },
    axisY: {
    interval: 10,
    maximum: 100
    },
    dataPointWidth: 40,
    data: [
    {
    type: “stackedColumn”,
    legendText: “No Exceptions”,
    showInLegend: “true”,
    //indexLabel: “#percent %”,
    dataPoints: dpnex,
    color: “green”
    },
    {
    type: “stackedColumn”,
    //indexLabel: “#percent %”,
    legendText: “E1 Exceptions”,
    showInLegend: “true”,
    dataPoints: dpe1,
    color: “yellow”
    },
    {
    type: “stackedColumn”,
    //indexLabel: “#percent %”,
    legendText: “E2 Exceptions”,
    showInLegend: “true”,
    dataPoints: dpe2,
    color: “red”
    },
    {
    type: “stackedColumn”,
    //indexLabel: “#percent %”,
    legendText: “E3 Exceptions”,
    showInLegend: “true”,
    dataPoints: dpe3,
    color: “orange”
    },
    {
    type: “stackedColumn”,
    //indexLabel: “#percent %”,
    legendText: “Manually Entered”,
    showInLegend: “true”,
    dataPoints: dpme,
    color: “blue”
    },
    {
    type: “stackedColumn”,
    //indexLabel: “#percent %”,
    legendText: “Overriden”,
    showInLegend: “true”,
    dataPoints: dporr,
    color: “grey”
    },

    {

    type: “stackedColumn”,
    dataPoints: dataPoints4
    }
    ]
    });

    $.ajax({
    type: ‘GET’,
    url: ‘https://api.myjson.com/bins/qywhs’,
    dataType: ‘json’,
    success: function(data) {
    for (var i = 0; i < data.length; i++) {
    dpnex.push({
    label: “No Exception”,
    y: data[i].NOExceptions
    });
    dpe1.push({
    label: “E1”,
    y: data[i].E1Exceptions
    });
    dpe2.push({
    label: “E2”,
    y: data[i].E2Exceptions
    });
    dpe3.push({
    label: “E3”,
    y: data[i].E3Exceptions
    });
    dpme.push({
    label: “ManuallyEntered”,
    y: data[i].ManuallyEntered
    });
    dporr.push({
    label: “Overriden”,
    y: data[i].Overriden
    });
    dataPoints4.push({
    label: data[i].CustName,
    y: 0
    });
    }

    chart.render();
    }
    });

    Please check and let me know if i have done any mistakes…

    #22629

    Priyanka M S
    Member

    @manjitbang,

    CanvasJS charts accept only numeric input to Y values of dataPoints.
    In the code that you have shared, parsing the data you get from JSON to float using parseFloat should work fine. Please take a look at this jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

    #22637

    manjitbang
    Member

    Thanks @priyanka
    It worked :)

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

You must be logged in to reply to this topic.