thomasorten/gist:3d7f8bd3c50bd7fb0d82

## gistfile1.txt
<!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>

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

  <script>

 var minGraf = {
  "plotOptions": {
    "series": {
      "stacking": "normal"
    }
  },
  "credits": {
    "branded": true,
    "text": "Highcharts",
    "href": "//cloud.highcharts.com/",
    "enabled": false
  },
  "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",
     "renderTo": 'container',
  },
  "colors": [
    "#5e0c0c",
    "#434348",
    "#90ed7d",
    "#f7a35c",
    "#8085e9",
    "#f15c80",
    "#5a5845",
    "#2b908f",
    "#f45b5b",
    "#91e8e1"
  ]
};

 var minGraf2 = {
  "plotOptions": {
    "series": {
      "stacking": "normal"
    }
  },
  "credits": {
    "branded": true,
    "text": "Highcharts",
    "href": "//cloud.highcharts.com/",
    "enabled": false
  },
  "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",
     "renderTo": 'container2',
  },
  "colors": [
    "#5e0c0c",
    "#434348",
    "#90ed7d",
    "#f7a35c",
    "#8085e9",
    "#f15c80",
    "#5a5845",
    "#2b908f",
    "#f45b5b",
    "#91e8e1"
  ]
};


$(function () {
    //$('#container').highcharts(minGraf);
    var chart1 = new Highcharts.Chart(minGraf);
    var chart2 = new Highcharts.Chart(minGraf2);
});

function multipliser(etTall, medEtAnnetTall) {
  alert(etTall * medEtAnnetTall);
}

function enAlert() {
  alert("hoi!");
}

multipliser(2, 6);

enAlert();


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

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

	<script>

	var minGraf = {
	"plotOptions": {
	"series": {
	"stacking": "normal"
	}
	},
	"credits": {
	"branded": true,
	"text": "Highcharts",
	"href": "//cloud.highcharts.com/",
	"enabled": false
	},
	"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",
	"renderTo": 'container',
	},
	"colors": [
	"#5e0c0c",
	"#434348",
	"#90ed7d",
	"#f7a35c",
	"#8085e9",
	"#f15c80",
	"#5a5845",
	"#2b908f",
	"#f45b5b",
	"#91e8e1"
	]
	};

	var minGraf2 = {
	"plotOptions": {
	"series": {
	"stacking": "normal"
	}
	},
	"credits": {
	"branded": true,
	"text": "Highcharts",
	"href": "//cloud.highcharts.com/",
	"enabled": false
	},
	"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",
	"renderTo": 'container2',
	},
	"colors": [
	"#5e0c0c",
	"#434348",
	"#90ed7d",
	"#f7a35c",
	"#8085e9",
	"#f15c80",
	"#5a5845",
	"#2b908f",
	"#f45b5b",
	"#91e8e1"
	]
	};


	$(function () {
	//$('#container').highcharts(minGraf);
	var chart1 = new Highcharts.Chart(minGraf);
	var chart2 = new Highcharts.Chart(minGraf2);
	});

	function multipliser(etTall, medEtAnnetTall) {
	alert(etTall * medEtAnnetTall);
	}

	function enAlert() {
	alert("hoi!");
	}

	multipliser(2, 6);

	enAlert();


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