Multiple Charts with unknown count

[dillonw777]

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.

[dillonw777]

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 5 years, 1 month ago by dillonw777.

[dillonw777]

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

[Shashi Ranjan]

@dillonw777,

Glad you figured it out :)

—
Shashi Ranjan
Team CanvasJS