1

enter image description here 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 .Have uploaded the picture where bar/column chart doesn't show up and line chart shows where values are declared..Kindly help.

  <!-- 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.
    },
     {
        type: 'spline',
        name: 'Monthly Sales', // Average
        data: [3, 2.67, 3, 6.33, 3.33],   
        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
           }
       }]
   });

});

   //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.

  • I'm really stucked and scratching head from hours. Really need the help from the experts in the community .Thanks – JJoseph Jul 10 '14 at 18:05
3

You are presently not formatting the data as JavaScript data which is what Highcharts requires.

Something like this in the controller that returns a JSON (JavaScript Object Notation) string:

public String getData() {
    return JSON.serialize(new Integer[] {5, 45, 35, 25, 15});
}

that is then output in the Visualforce:

data: {!data};

is more likely to work.

But you'll need to check the Highcharts documentation carefully for what data structure is required for the specific type of chart you are trying to output. When you are clear on that you can use Apex maps and arrays to create the data in Apex and then just push that data through JSON.serialize to output the JSON equivalent.

PS

I took your page and made the changes shown above with this one correction (of removing an invalid semi-colon):

data: {!data}

and got this result which is I think the output you want:

chart screen shot

I am not sure what is causing your problem but if you follow the same steps you should get the same result.

When working in JavaScript use debugging techniques like these: How do I start to debug my own Visualforce/JavaScript?.

| improve this answer | |
  • ,JSON is working but it has the same results where bar/column chart does not show up.Scratching my head from hours and i really need your and expert help in this .Have uploaded the pic of what i'm getting. – JJoseph Jul 10 '14 at 17:31
  • @james See the "PS" added to my answer. – Keith C Jul 12 '14 at 13:23
  • Very much grateful Keith ! You are champ ! – JJoseph Jul 14 '14 at 12:06
  • could you please share the code that you implemented? – MMM Aug 11 '15 at 7:45
0

Thanks to your code i got solution. This works Dynamically.

<----Component------>

Component:

<script>


     $(function () {
     $('#container').highcharts({
     title: {
     text: 'Chart showing Transaction Details'
},
xAxis:{
        categories: {!data}
    },
      labels: {
      items: [{
      html: 'Items Sales',
      style: {
            left: '50px',
            top: '18px',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
        }
    }]
},
series: [ {
    type: 'column',
    name: 'Representing Sales in MRP of Item In Bar Chart',
    data: {!new}  // values coming from controller and here i need to fetch it.
},
 {
    type: 'spline',
    name: 'Representing Sales in Line chart', // Average
    data: {!new},   
    marker: {
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[3],
        fillColor: 'white'
    }
},
{
    type: 'pie',
    name: 'Representing Sales MRP in Pie chart',
    data: {!new},
       center: [100, 80],
       size: 100,
       showInLegend: false,
       dataLabels:
       {
         enabled:false  
       }
   }]

}); });

<-----Class------> public with sharing class ChartController {

public String getNew() {
    List<Transaction_Detail__c> mrpItems = [SELECT MRP__c FROM Transaction_Detail__c];
    Integer[] lstInt=new Integer[]{};
        Integer dec;
    for(Transaction_Detail__c td: mrpItems){
        dec=Integer.valueOf(td.MRP__c);
        system.debug('=======dec'+ dec);
        lstInt.add(dec);
        system.debug('=======lstInt'+ lstInt);

    }
    return JSON.serialize(lstInt); 
}

public String getData() {
    String[] ChartItems = new String[]{};
    String str;
    List<Transaction_Detail__c> dataItems = [SELECT Name FROM Transaction_Detail__c];
    for (Transaction_Detail__c dataSO : dataItems) {

        str= String.valueOf(dataSO.Name);
        ChartItems.add(str);
    }

    return JSON.serialize(ChartItems);
}

}

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.