HTML: CartoDB with Google, Highcharts custom infowindow

<!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;
    }

h1{
      margin-bottom: -10px;

}

#tmp{
      width:300px;
      height: 300px;
      background-color: red;
      opacity:1;
    }

</style>

var map;
    var testhtml;

$(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

// console.log(obj)

$('.cartodb-infowindow').highcharts({
        chart: {
            type: 'bar',
            height:300,
            width:200

},
        plotOptions:{
          series:{
            animation:false
          }
            
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });

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