Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • in reply to: Creating a stacked column from JSON #21767

    Thanks!

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

    in reply to: Creating a stacked column from JSON #21765

    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;
    }

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