Home forums Using CanvasJS Chart with Multiple Columns per Month

This topic contains 6 replies, has 2 voices, and was last updated by  dollarb71 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #25121

    I want to create a column chart that will display work orders closed per month by technician. Each month would have up to 14 columns, one for each technician showing the total number of work orders they closed that month. How can I do this?

    I am using SQL to create JSON files for the data. In production I would show three months at a time. Here’s a sample of my data for one month:
    [
    {“x”: “January”,”y”: 3,”label”: “Ben”},
    {“x”: “January”,”y”: 2,”label”: “Bill”},
    {“x”: “January”,”y”: 15,”label”: “Chris”},
    {“x”: “January”,”y”: 20,”label”: “Jesse”},
    {“x”: “January”,”y”: 11,”label”: “Josh”},
    {“x”: “January”,”y”: 97,”label”: “Lilia”},
    {“x”: “January”,”y”: 31,”label”: “Mariel”},
    {“x”: “January”,”y”: 13,”label”: “Mike”},
    {“x”: “January”,”y”: 75,”label”: “Rene”},
    {“x”: “January”,”y”: 3,”label”: “Stephanie”},
    {“x”: “January”,”y”: 34,”label”: “SteveD”},
    {“x”: “January”,”y”: 73,”label”: “SteveR”},
    {“x”: “January”,”y”: 78,”label”: “StevenM”},
    ]

    #25130

    @dollarb71,

    You can use multiseries chart to fulfill your requirements. Please take a look at this JSFiddle.

    —–
    Manoj Mohan
    Team CanvasJS

    #25132

    Thank you. I would like to create one JSON file with all the data in it to create the chart you made. I’m having trouble getting it to work though. I can do it if I create an JSON file for each month but that is not ideal way to do it. Can I do it if my JSON file looks something like this?

    [
    {“label”: “Bill”,”month”: “January”,”y”: 11},
    {“label”: “Chris”,”month”: “January”,”y”: 13},
    {“label”: “Jesse”,”month”: “January”,”y”: 18},
    {“label”: “Lilia”,,”month”: “January””y”: 65},
    {“label”: “Bill”,”month”: “February”,”y”: 7},
    {“label”: “Chris”,”month”: “February”,”y”: 56},
    {“label”: “Jesse”,”month”: “February”,”y”: 32},
    {“label”: “Lilia”,,”month”: “JFebruary””y”: 65}
    ]

    #25151

    @dollarb71,

    You can keep just one JSON file. Parsing JSON data before passing it to chart options should work fine in this case. Please take a look at this JSFiddle.

    ——-
    Manoj Mohan
    Team CanvasJS

    #25211

    Thanks! That’s exactly what I need but still run into a problem when I replace your code below:
    var csvData = [
    { “label”: “Bill”, “month”: “January”, “y”: 11 },
    { “label”: “Chris”, “month”: “January”, “y”: 13 },
    { “label”: “Jesse”, “month”: “January”, “y”: 18 },
    { “label”: “Lilia”, “month”: “January”, “y”: 65 },
    { “label”: “Bill”, “month”: “February”, “y”: 7 },
    { “label”: “Chris”, “month”: “February”, “y”: 56 },
    { “label”: “Jesse”, “month”: “February”, “y”: 32 },
    { “label”: “Lilia”, “month”: “February”, “y”: 65 }
    ];

    with this

    var csvData = [];
    $.getJSON( “JSON/tcm/data.json”, function( data){
    csvData = data;
    });

    When I look at the console in Chrome I don’t see any errors but I get a blank chart.

    #25223

    @dollarb71,

    Parsing the JSON after the AJAX request should work fine in your case. Please take a look at this JSFiddle.

    —–
    Manoj Mohan
    Team CanvasJS

    #25224

    That works! Thanks so much for your help!

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

You must be logged in to reply to this topic.