thomasorten · October 30, 2015 13:58
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 	<script src="http://code.highcharts.com/highcharts.js"></script>
 	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <!-- page content -->

 	<button id="knapp1">Min knapp</button>

 	<button id="knapp2">Min knapp nr 2</button>

  <div id="map" style="width:100%; height:600px;"></div>

 	<div id="container" style="width:100%; height:400px;"></div>

  <script>

 var minGraf = {
  "plotOptions": {
    "series": {
      "stacking": "normal"
    }
  },
  "credits": {
    "branded": true,
    "text": "Highcharts",
    "href": "//cloud.highcharts.com/",
    "enabled": true
  },
  "series": [
    {
      "marker": {
        "enabled": false
      },
      "index": 0,
      "data": [0,2,3,3,2,3,2,1,7,4,3,3,6,10,2,10,4,3,3,6,3,3,3]
    },
    {
      "index": 1,
      "data": [1,36,28,27,36,23,33,24,30,29,32,35,49,51,46,35,36,43,31,25,22,21,6]
    },
    {
    	"data": [0,1,1,1,0,0,0,0,0,0,0,1,0,0,2,0,0,1,0,0,0,0,0],
      "index": 2
    },
    {
      "index": 3,
      "data": [0,1,2,0,1,1,1,0,0,2,0,0,1,1,4,1,1,0,0,0,1,0,0]
    }
  ],
  xAxis: {
    categories: [1991,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015]
  },
  "chart": {
    "type": "area"
  },
  "colors": [
    "#5e0c0c",
    "#434348",
    "#90ed7d",
    "#f7a35c",
    "#8085e9",
    "#f15c80",
    "#5a5845",
    "#2b908f",
    "#f45b5b",
    "#91e8e1"
  ]
 };


 $(function () { 
    $('#container').highcharts(minGraf);
 });

 </script>

 <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
 <script>
 // get the viz.json url from the CartoDB Editor
 // - click on visualize
 // - create new visualization
 // - make visualization public
 // - click on publish
 // - go to API tab

 // https://thomaso.cartodb.com/api/v2/viz/5ef04544-6df0-11e5-a05e-0e98b61680bf/viz.json

 cartodb.createVis('map', 'https://thomaso.cartodb.com/api/v2/viz/5ef04544-6df0-11e5-a05e-0e98b61680bf/viz.json')
  .done(function(vis, layers) {
    // layer 0 is the base layer, layer 1 is cartodb layer
    // when setInteraction is disabled featureOver is triggered
    layers[1].setInteraction(true);
    layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
      console.log(e, latlng, pos, data, layerNumber);
    });

    // you can get the native map to work with it
    var map = vis.getNativeMap();

  $( "#knapp1" ).click(function() {
 	     map.setZoom(14);
 	     map.panTo([63.403316, 10.330281]); 
 	});

 	$( "#knapp2" ).click(function() {
 	     map.setZoom(15);
 	     map.panTo([63.503316, 10.530281]); 
 	});

    // now, perform any operations you need, e.g. assuming map is a L.Map object:
  
  });
 </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>title</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	</head>
	<body>
	<!-- page content -->

	<button id="knapp1">Min knapp</button>

	<button id="knapp2">Min knapp nr 2</button>

	<div id="map" style="width:100%; height:600px;"></div>

	<div id="container" style="width:100%; height:400px;"></div>

	<script>

	var minGraf = {
	"plotOptions": {
	"series": {
	"stacking": "normal"
	}
	},
	"credits": {
	"branded": true,
	"text": "Highcharts",
	"href": "//cloud.highcharts.com/",
	"enabled": true
	},
	"series": [
	{
	"marker": {
	"enabled": false
	},
	"index": 0,
	"data": [0,2,3,3,2,3,2,1,7,4,3,3,6,10,2,10,4,3,3,6,3,3,3]
	},
	{
	"index": 1,
	"data": [1,36,28,27,36,23,33,24,30,29,32,35,49,51,46,35,36,43,31,25,22,21,6]
	},
	{
	"data": [0,1,1,1,0,0,0,0,0,0,0,1,0,0,2,0,0,1,0,0,0,0,0],
	"index": 2
	},
	{
	"index": 3,
	"data": [0,1,2,0,1,1,1,0,0,2,0,0,1,1,4,1,1,0,0,0,1,0,0]
	}
	],
	xAxis: {
	categories: [1991,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015]
	},
	"chart": {
	"type": "area"
	},
	"colors": [
	"#5e0c0c",
	"#434348",
	"#90ed7d",
	"#f7a35c",
	"#8085e9",
	"#f15c80",
	"#5a5845",
	"#2b908f",
	"#f45b5b",
	"#91e8e1"
	]
	};


	$(function () {
	$('#container').highcharts(minGraf);
	});

	</script>

	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	<script>
	// get the viz.json url from the CartoDB Editor
	// - click on visualize
	// - create new visualization
	// - make visualization public
	// - click on publish
	// - go to API tab

	// https://thomaso.cartodb.com/api/v2/viz/5ef04544-6df0-11e5-a05e-0e98b61680bf/viz.json

	cartodb.createVis('map', 'https://thomaso.cartodb.com/api/v2/viz/5ef04544-6df0-11e5-a05e-0e98b61680bf/viz.json')
	.done(function(vis, layers) {
	// layer 0 is the base layer, layer 1 is cartodb layer
	// when setInteraction is disabled featureOver is triggered
	layers[1].setInteraction(true);
	layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
	console.log(e, latlng, pos, data, layerNumber);
	});

	// you can get the native map to work with it
	var map = vis.getNativeMap();

	$( "#knapp1" ).click(function() {
	map.setZoom(14);
	map.panTo([63.403316, 10.330281]);
	});

	$( "#knapp2" ).click(function() {
	map.setZoom(15);
	map.panTo([63.503316, 10.530281]);
	});

	// now, perform any operations you need, e.g. assuming map is a L.Map object:

	});
	</script>

	</body>
	</html>