function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sreenivasulu AdipudiSreenivasulu Adipudi 

How to create a dynamic stacking bar chart in Visualforce page.

I have to create a stacked bar chart dynamically in the Visualforce page. 
My requirement as follows:
1. Create a stacked bar graph.
2. Add the graph to the Object page layout.
3. Filter the graph by the selected dropdown value. 
4. Restrict the onClick event.
5. Display the details on hover over on the chart.

Is there any way to create a stacked bar graph in a visualforce page.
Thanks in advance.
Best Answer chosen by Sreenivasulu Adipudi
Raj VakatiRaj Vakati
Please refer this link 


https://hub.appirio.com/tech-blog/building-dynamic-stacking-bar-charts-in-visualforce
 
<apex:page controller=”ChartController”>

   <apex:chart data=”{!data}” height=”400″ width=”500″>

       <apex:legend position=”left”/>

       <apex:axis type=”Numeric” position=”left” title=”Closed Won” grid=”true”

           fields=”data1,data2,data3″ dashSize=”2″>

           <apex:chartLabel/>

       </apex:axis>

       <apex:axis type=”Category” position=”bottom” fields=”name” title=”Stacked Bars”>

           <apex:chartLabel rotate=”315″/>

       </apex:axis>

       <apex:barSeries orientation=”vertical” axis=”left” stacked=”true”

           xField=”name”

           yField=”data1,data2,data3″

title=”MacDonald,Promas,Worle” />

   </apex:chart>        

</apex:page>
 
public class ChartController {

   // Return a list of data points for a chart

   public List<Data> getData() {

       List<Data> data = new List<Data>();

       data.add(new Data(‘Jan’, 30, 90, 55));

       data.add(new Data(‘Feb’, 44, 15, 65));

       data.add(new Data(‘Mar’, 25, 32, 75));

       data.add(new Data(‘Apr’, 74, 28, 85));

       data.add(new Data(‘May’, 65, 51, 95));

       data.add(new Data(‘Jun’, 33, 45, 99));

       data.add(new Data(‘Jul’, 92, 82, 60));

       data.add(new Data(‘Aug’, 87, 73, 45));

       data.add(new Data(‘Sep’, 34, 65, 55));

       data.add(new Data(‘Oct’, 78, 66, 56));

       data.add(new Data(‘Nov’, 80, 67, 53));

       data.add(new Data(‘Dec’, 17, 70, 70));

       return data;

   }

   // Wrapper class

   public class Data {

       public String name { get; set; }

       public Integer data1 { get; set; }

       public Integer data2 { get; set; }

       public Integer data3 { get; set; }

       public Data(String name, Integer data1, Integer data2, Integer data3) {

           this.name = name;

           this.data1 = data1;

           this.data2 = data2;

           this.data3 = data3;

       }

   }

}

 

All Answers

Raj VakatiRaj Vakati
Please refer this link 


https://hub.appirio.com/tech-blog/building-dynamic-stacking-bar-charts-in-visualforce
 
<apex:page controller=”ChartController”>

   <apex:chart data=”{!data}” height=”400″ width=”500″>

       <apex:legend position=”left”/>

       <apex:axis type=”Numeric” position=”left” title=”Closed Won” grid=”true”

           fields=”data1,data2,data3″ dashSize=”2″>

           <apex:chartLabel/>

       </apex:axis>

       <apex:axis type=”Category” position=”bottom” fields=”name” title=”Stacked Bars”>

           <apex:chartLabel rotate=”315″/>

       </apex:axis>

       <apex:barSeries orientation=”vertical” axis=”left” stacked=”true”

           xField=”name”

           yField=”data1,data2,data3″

title=”MacDonald,Promas,Worle” />

   </apex:chart>        

</apex:page>
 
public class ChartController {

   // Return a list of data points for a chart

   public List<Data> getData() {

       List<Data> data = new List<Data>();

       data.add(new Data(‘Jan’, 30, 90, 55));

       data.add(new Data(‘Feb’, 44, 15, 65));

       data.add(new Data(‘Mar’, 25, 32, 75));

       data.add(new Data(‘Apr’, 74, 28, 85));

       data.add(new Data(‘May’, 65, 51, 95));

       data.add(new Data(‘Jun’, 33, 45, 99));

       data.add(new Data(‘Jul’, 92, 82, 60));

       data.add(new Data(‘Aug’, 87, 73, 45));

       data.add(new Data(‘Sep’, 34, 65, 55));

       data.add(new Data(‘Oct’, 78, 66, 56));

       data.add(new Data(‘Nov’, 80, 67, 53));

       data.add(new Data(‘Dec’, 17, 70, 70));

       return data;

   }

   // Wrapper class

   public class Data {

       public String name { get; set; }

       public Integer data1 { get; set; }

       public Integer data2 { get; set; }

       public Integer data3 { get; set; }

       public Data(String name, Integer data1, Integer data2, Integer data3) {

           this.name = name;

           this.data1 = data1;

           this.data2 = data2;

           this.data3 = data3;

       }

   }

}

 
This was selected as the best answer
karthik 369karthik 369
Hi, This report helped me a lot.
Can you please help me this display on the button Click.