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
JosephJJosephJ 

getting values dynamically from the opportunity object in bar chart

Have created a graph which includes bar chart with plotted lines and pie chart in it. I'm trying to fetch values dynamically for bar chart but it is not displaying Kindly help. .I really need help from the community.


      <!-- Vf page-->
      <apex:page controller="HighchartsController">

  
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/modules/exporting.js"></script>

     <div id="container" style="min-width: 310px; height: 400px; margin:0 auto"></div>

        <script>
             $(function () {
             $('#container').highcharts({
             title: {
             text: 'Chart showing opportunities'
        },
        xAxis:{
                categories: ['Jan','Feb','Mar','Apr','May']
            },
              labels: {
              items: [{
              html: 'Opportunities',
              style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [ {
            type: 'column',
            name: 'Indian Railways',
            data: "[{!nvs}]"   // values coming from controller and here i need to fetch it.The bar charts is not displaying.
        },
         {
            type: 'spline',
            name: 'Monthly Sales', // Average
            data: [3, 2.67, 3, 6.33, 3.33],     // the value is static and need to fetch dynamically
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        },
        {
            type: 'pie',
            name: 'Total consumption',
            data: [ {
                name: 'Lost',
                y:23,
          
                sliced:true,
                selected:true,
                color: Highcharts.getOptions().colors[1] // Opp's Lost color
              },
             {
                name: 'Won',
                 y:19,
            
                color: Highcharts.getOptions().colors[2] // Opp's won color
              }],
               center: [100, 80],
               size: 100,
               showInLegend: false,
               dataLabels:
               {
                 enabled:true
               }
           }]
       });
   });
    </script>
    </apex:page>


       //Apex class
 
   
             
       public class HighchartsController
      {
           // for bar chart
           // N for name , v for data
          public class Nv {
             public String n { get; private set; }      
             public integer v { get; private set; }
                Nv(String n,Integer v) {
                 this.n = n;
                 this.v = v;     
            }
         }
      public Nv[] getnvs() {
        return new Nv[] {
            new Nv('Jan',5),
            new Nv('Feb',45),
            new Nv('Mar',35),
            new Nv('Apr',25) ,    
            new Nv('may',15)
          };
        }
      }

   
Highly appreciate the help.
Dev.AshishDev.Ashish
Parth,

Controller return velues of array converted to string, hence you need to construct array from return string. Do something like below.

<apex:page controller="HighChartsPageCont">

 
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/modules/exporting.js"></script>

     <div id="container" style="min-width: 310px; height: 400px; margin:0 auto"></div>

        <script>
          var vls = [];
             $( document ).ready(function() {
             // Handler for .ready() called.
           var v = "{!nvs}";
           var va = v.split(/v=([\s\S]*?)(?=\])/g);
           for (var i = 1; i < va.length; i=i+2){
                     vls.push(parseInt(va[i]));
                }
              });
       
   
             $(function () {
             $('#container').highcharts({
             title: {
             text: 'Chart showing opportunities'
        },
        xAxis:{
                categories: ['Jan','Feb','Mar','Apr','May']
            },
              labels: {
              items: [{
              html: 'Opportunities',
              style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [ {
            type: 'column',
            name: 'Indian Railways',
            data: vls //[3, 5, 8, 13, 6, 2]//"[{!nvs}]"   // values coming from controller and here i need to fetch it.The bar charts is not displaying.
        },
         {
            type: 'spline',
            name: 'Monthly Sales', // Average
            data: [3, 2.67, 3, 6.33, 3.33],     // the value is static and need to fetch dynamically
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        },
        {
            type: 'pie',
            name: 'Total consumption',
            data: [ {
                name: 'Lost',
                y:23,
         
                sliced:true,
                selected:true,
                color: Highcharts.getOptions().colors[1] // Opp's Lost color
              },
             {
                name: 'Won',
                 y:19,
           
                color: Highcharts.getOptions().colors[2] // Opp's won color
              }],
               center: [100, 80],
               size: 100,
               showInLegend: false,
               dataLabels:
               {
                 enabled:true
               }
           }]
       });
   });
    </script>
    </apex:page>