HTML: CartoDB with Google Highcharts custom infowindow (detail)

<!DOCTYPE html>
<html>

html, body {
      height: 100%;
      margin: 0;
    }

#map{

height:100%;
    }

#box{
      height:30px;
      width:30px;
      background-color: grey;
    }

line {
      stroke:rgb(0,0,0);
      stroke-width:3;
    }
div.cartodb-popup {
    position:relative;
    width:370px;
    height:auto;
    padding:0 0 0 0;
    margin:0;
    background: none;
  }

div.cartodb-popup div.cartodb-popup-content-wrapper {
    position:relative;
    width:350px;
    max-width: 350px;
    padding:5px -20px 5px 5px;
    overflow-x: hidden;
    background:grey;
    opacity:1;
   -webkit-border-radius: 15px ;
   -moz-border-radius: 15px;
   border-radius: 5px;
  }

div.cartodb-popup div.cartodb-popup-content {
    display:block;
    width:350px;
    max-width: 350px;
    min-height:5px;
    height:370;
    max-height:370px;
    margin: 0;
    opacity:1;
    padding: 0;
    z-index:10;
    overflow-y: auto;
    overflow-x: hidden!important;
    outline: none;
    text-align:left;
  }
 div.cartodb-popup div.cartodb-popup-tip-container {
    width:350px;
    height:30px;
    background:none;
  }
    </style>

var map;
    var testhtml;
    var tmp2;
    var sqljson = new cartodb.SQL({
    user: 'cehtp',
    format: 'json'
});

$(document).ready(function() {

var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(37.35, -120.015),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    //mapTypeId: google.maps.MapTypeId.TERRAIN
  };

map = new google.maps.Map($('#map')[0], mapOptions);

// ----- Add the layer with the county information

cartodb.createLayer(map, 'https://cehtp.cartodb.com/api/v2/viz/countyshp/viz.json', {
    query: 'SELECT * FROM {{table_name}}' // if you remove this the query applied in the editor will be used

})
    .on('done', function(layer) {

map.overlayMapTypes.setAt(0, layer);
      var sublayer = layer.getSubLayer(0);

// set the info window
      sublayer.infowindow.set('template', function(data) {

//get the lat long and additional information on click
        //location
        var clickPosLatLng = this.model.get('latlng');
        var fields = this.model.get('content').fields;

//test to see if it's still loading and if not go ahead and set
        //the infowindow
        if (fields && fields[0].type !== 'loading') {

//I'm grabbing the county name but you could grab the ID and use it
          //in a query to cartodb to get other attributes
          // var obj = _.find(fields, function(obj) {
          //   return obj.title == 'fips'
          // }).value
          // 
          var obj = _.find(fields, function(obj) {
            return obj.title == 'name'
          }).value

objUpper = obj.toUpperCase()

var q = "SELECT pws_class, count(pws_class) FROM service_areas WHERE county = '" + objUpper + "' GROUP BY pws_class";
 
    var cnt;
    var pwsclass;
        
        $.ajax({
          url: "https://cehtp.cartodb.com/api/v1/sql?q=" + q,
          dataType:"jsonp",
          success: function(data){

types = [ "Community", "Non-community","Non-transient, non-community", "State small","Wastewater", "Reclaimed"]
            tmp2 = data.rows
            cnt = _.pluck(tmp2, 'count')

pwsclass = _.pluck(tmp2, 'pws_class')

cntNew = []
            _.map(types, function(type){
              indx = _.indexOf(pwsclass, type)
              
              if(indx==-1){
                cntNew.push(0)
              } else {
                cntNew.push(cnt.slice(indx, indx+1))
              }

})
            
            $('.cartodb-popup').remove();
            // $('.cartodb-infowindow').append('<div class="cartodb-popup">');
            // 
              $('.cartodb-infowindow').append('<div class="cartodb-popup">')
              $('.cartodb-popup').append('<a href="#close" class="cartodb-popup-close-button close">x</a>')
              $('.cartodb-popup').append('<div class="cartodb-popup-content-wrapper">')
              $('.cartodb-popup-content-wrapper').append('<div class="cartodb-popup-content">')
              $('.cartodb-popup').append('<div class="cartodb-popup-tip-container">')

// $('.cartodb-infowindow').append('<div class="cartodb-popup">').append('<a href="#close" class="cartodb-popup-close-button close">x</a>').append('<div class="cartodb-popup-content-wrapper">').append('div class="cartodb-popup-content"');

$('.cartodb-popup-content').highcharts({
        chart: {
            type: 'bar',
            height:350,
            width:350,
            marginRight:40

},
        plotOptions:{
          series:{
            animation:false
          }
            
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Water Systems by Type: ' +  obj
        },
        xAxis: {
            categories: types
        },
        yAxis: {
            title: {
                text: 'Count of Water Systems'
            }
        },
        series: [{
            name: 'All',
            data: cntNew
        }]
    });
}
});

} // end test of status

}); // end infowindow.set

}); //end done (and createLayer)

}); //end document ready

</script>

</head>
<body>

</div>

</body>

</html>

Modified http://html5shiv.googlecode.com/svn/trunk/html5.js to a secure url

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

Modified http://code.highcharts.com/highcharts.js to a secure url

https://html5shiv.googlecode.com/svn/trunk/html5.js

https://maps.googleapis.com/maps/api/js?sensor=false

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js

https://code.highcharts.com/highcharts.js