Apex Class :

public class Speedometer 
public WrapperCounter wc{get; private set;}

private final String apiKey = 'AIzaSyAy641eNaFaV-SuQRP88YeZ75qbJfxUZhI';
public String selectedVideo{get;set;}

class WrapperCounter

    public Integer viewCount{get;set;}
    public Integer likeCount{get;set;}
    public Integer commentCount{get;set;}

    public WrapperCounter(Integer viewCount, Integer likeCount, Integer commentCount)
        this.viewCount = viewCount;
        this.likeCount = likeCount;
        this.commentCount = commentCount;

public List<SelectOption> getVideos()

    List<SelectOption> lstSO = new List<SelectOption>();
    lstSO.add(new SelectOption('None', '--None--'));
    lstSO.add(new SelectOption('VasWcH5vCTs', 'Djokovic'));
    lstSO.add(new SelectOption('jDn2bn7_YSM', 'AR Rehman'));
    lstSO.add(new SelectOption('wlWsIH_bUKU', 'Michael Jackson'));
    return lstSO;

public Speedometer()
    selectedVideo  = 'None';

private void getYoutubeVideoCounter()
    if(selectedVideo == 'None') 
    Http h = new Http();
    HttpRequest req = new HttpRequest();        
    req.setEndpoint('https://www.googleapis.com/youtube/v3/videos?part=statistics&id='+ selectedVideo + '&key='+apiKey);

    HttpResponse res = h.send(req);

    fromJSON f = fromJSON.parse(res.getBody());
    wc = new WrapperCounter(Integer.valueOf(f.items[0].statistics.viewCount), Integer.valueOf(f.items[0].statistics.likeCount), Integer.valueOf(f.items[0].statistics.commentCount));


   public void fetchYoutubeDataForSelectedVideo()


VF Page :

<apex:page controller="Speedometer" sidebar="false">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["gauge"]});
      function drawChart() {

        var data = google.visualization.arrayToDataTable([ 
          ['Label', 'Value'],

          ['Likes', {!wc.likeCount}]


        var options = {
          width: 560, height: 168,
          greenFrom: 60000, greenTo: 100000,
          redFrom: 0, redTo: 30000,
          yellowFrom: 30001, yellowTo: 60000,
          minorTicks: 5, max:100000

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

<div id="chart_div" style="width: 400px; height: 120px;"></div>
<apex:form >
    <apex:pageBlock title="Youtube Speedometer">

        <apex:pageBlockSection title="Select Video" columns="1">
            <apex:pageBlockSectionItem >

                <apex:selectList value="{!selectedVideo}" size="1" onchange="Speedo_GetStats();">
                    <apex:selectOptions value="{!Videos}"/>



    <apex:actionFunction name="Speedo_GetStats" action="{!fetchYoutubeDataForSelectedVideo}" oncomplete="drawChart(parseInt({!wc.likeCount}));"/>

<apex:outputPanel id="SP_Stats">

The gauge charge is not getting displayed on selection of value from selectlist . This is working fine for bar chart API . Is the above code fine or some changes required in javascript? Scenario - number of LIKES for the selected video needs to be displayed.

Your Answer

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

Browse other questions tagged or ask your own question.