Multiple Charts with unknown count

• March 16, 2019 at 11:42 pm #24671
  
  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.

  March 16, 2019 at 11:45 pm #24672
  
  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, 9 months ago by dillonw777.
  March 17, 2019 at 11:34 pm #24678
  
  dillonw777

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

  March 19, 2019 at 10:49 pm #24691
  
  Shashi Ranjan

  @dillonw777,

  Glad you figured it out :)

  —
  Shashi Ranjan
  Team CanvasJS