Home forums Using CanvasJS Creating a stacked column from JSON

This topic contains 3 replies, has 2 voices, and was last updated by  David 2 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #21746

    David
    Member

    Wondering if anyone has an example like this.
    https://jsfiddle.net/0crma6pv/
    But where I can reference each column and give it a name etc…
    So in the fiddle is has this:
    ar chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “stackedBar using JSON data”
    },
    data: [{
    type: “stackedColumn”,
    dataPoints: dataPoints1
    },
    {
    type: “stackedColumn”,
    dataPoints: dataPoints2
    },

    But I want to do something more like this

    ar chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “stackedBar using JSON data”
    },
    data: dataPoints

    So I can then define each stacked column’s name field etc. in the JSON.

    The json sample I have is this, where there is a name and each date is the column, and each date is a column.
    {“john.smith”:{“2018-07-06″:1,”2018-06-27″:1,”2018-06-20″:1,”2018-07-03″:1,”2018-06-29″:4},”peter.johnson”:{“2018-06-27″:18,”2018-06-21″:9,”2018-06-29″:23,”2018-06-22″:11,”2018-06-19″:18,”2018-06-14″:13,”2018-07-06″:24,”2018-06-26″:5,”2018-07-02″:14,”2018-06-13″:16,”2018-06-25″:17,”2018-06-12″:12,”2018-07-09″:9,”2018-06-28″:18,”2018-07-05″:15,”2018-06-20″:14,”2018-06-18″:12,”2018-07-04″:21,”2018-06-15″:4,”2018-07-03″:17},”david.smith”:{“2018-06-12″:1,”2018-07-09″:15,”2018-06-28″:15,”2018-06-20″:1,”2018-07-05″:6,”2018-06-18″:10,”2018-07-04″:11,”2018-07-03″:10,”2018-06-15″:8,”2018-06-27″:1,”2018-06-21″:12,”2018-06-29″:2,”2018-06-22″:21,”2018-06-19″:10,”2018-06-14″:8,”2018-07-06″:33,”2018-06-26″:9,”2018-07-02″:11,”2018-06-25″:8,”2018-06-13″:7},”alex.mander”:{“2018-06-21″:6,”2018-06-29″:9,”2018-06-22″:10,”2018-06-12″:3,”2018-07-04″:2,”2018-06-20″:2,”2018-06-19″:8,”2018-06-25″:6,”2018-07-02″:2},”shannon.peters”:{“2018-07-09″:1},”lc advice”:{“2018-06-29″:3,”2018-06-26″:1},”peter.harry”:{“2018-06-12″:5,”2018-06-15″:3,”2018-07-09″:1,”2018-06-14″:5,”2018-07-05″:3,”2018-07-06″:4},”amy.pete”:{“2018-07-03″:12,”2018-06-15″:10,”2018-06-20″:13,”2018-07-05″:9,”2018-07-07″:1,”2018-06-18″:7,”2018-07-04″:13,”2018-06-12″:10,”2018-07-09″:5,”2018-06-28″:10,”2018-06-26″:11,”2018-07-02″:9,”2018-06-25″:6,”2018-06-13″:12,”2018-06-14″:12,”2018-06-19″:8,”2018-07-06″:23,”2018-06-29″:11,”2018-06-22″:14,”2018-06-27″:7,”2018-06-21”:14}}

    #21765

    David
    Member

    I managed to figure this out for anyone wanting assistance with how to do this.
    The end goal was to create a stacked chart dynamically with dynamically created sections.
    This is a potentially much more powerful stacked chart than the one I linked as it allows you to customise and add a ‘name’ to each of the stacks.

    I’m also converting an international date format date (ie. 2018-09-23) to epoch for canvasJS to use, see function at the end.

    var chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “stackedBar using JSOdata”
    },
    data: dataPointsR
    });
    $.getJSON(“https://web address of json file here”, function(data) {
    $.each(data, function(key, val) { // key here is the name of the person as per my first post JSON.
    let dataPointR = [];
    $.each(val, function(key2, val2) {
    var DateEpoch = ConvertDate(key2);
    dataPointR.push({“x”: DateEpoch, “y”: val2}) // DateEpoch is 14348846000 and val2 is a number like 12
    })
    dataPointsR.push({“toolTipContent”:”{label}<br/>{name}, {m} {y}“,”showInLegend”:”true”,”type”:”stackedColumn”,”xValueType”:”dateTime”,”name”: key ,”dataPoints”: dataPointR})
    });
    chart.render();

    });

    function ConvertDate(dateToConvert) {
    var parts = dateToConvert.match(/(\d{4})\-(\d{2})\-(\d{2})/);
    var returnDate = Date.UTC(+parts[1], parts[2], +parts[3]);//, +parts[4], +parts[5]);
    return returnDate;
    }

    #21766

    Priyanka M S
    Member

    David,

    Glad that you figured it out.

    __
    Priyanka M S
    Team CanvasJS

    #21767

    David
    Member

    Thanks!

    Working fiddle is here:
    https://jsfiddle.net/untg99/cumyjod5/

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

You must be logged in to reply to this topic.