Home forums Using CanvasJS Multiple Charts with unknown count

This topic contains 3 replies, has 2 voices, and was last updated by  Shashi Ranjan 4 months ago.

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

    Hello–

    I was wondering if it is possible to create any number of charts depending on what my query returns. For instance, my query will return any number of budget goals from a database, and depending on how many budget goals the user has set will dictate how many bar charts I make. Each bar chart will be the same format but will have different data. Normally I would just pre-define the chart specs and throw in the data, but i’m not sure how I would do that if I don’t know ahead of time how many charts I will need to create.

    BTW I am writing this in PHP/HTML/CSS using javascript for the canvas.js elements.

    #24672

    If it helps this is the javascript for the chart I want multiple of…

    var chart = new CanvasJS.Chart(“BudgetGoal”, {
    animationEnabled: true,
    backgroundColor: “#F0F0F0″,
    //height of bar (eliminates whitespace)
    height: 100,
    //width of bar
    dataPointWidth: 30,
    axisX: {
    //hide axis label (need both of these)
    tickLength: 0,
    labelFormatter: function(){
    return ” “;
    }
    },
    axisY: {
    prefix: “$”,
    //sets budget goal max
    lineThickness: 0,
    maximum: 200 <== variable that will differ
    },
    toolTip: {
    shared: true
    },
    legend:{
    cursor: “pointer”,
    itemclick: toggleDataSeries
    },
    data: [{
    type: “stackedBar”,
    name: “Spent”,
    yValueFormatString: “$#,##0″,
    color:”red”,
    dataPoints: [
    { label: “Shopping (3/15/18 – 4/15/18)”, y: 90 } <== variables that will differ
    ]
    },
    {
    type: “stackedBar”,
    name: “Money left”,
    //showInLegend: “true”,
    //xValueFormatString: “DD, MMM”,
    yValueFormatString: “$#,##0″,
    color:”#808080”,
    dataPoints: [
    { label: “Shopping (3/15/18 – 4/15/18)”, y: 110 } <== variables that will differ
    ]
    },
    ]
    });
    chart.render();

    and here is the div tag in the html
    <div id=”BudgetGoal” style=”height: 100px; width: 100%;”></div>

    • This reply was modified 4 months ago by  dillonw777.
    #24678

    NVM I found a similar fiddle here that helped a ton for anyone reading this. https://jsfiddle.net/862dpfLw/

    #24691

    @dillonw777,

    Glad you figured it out :)


    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.