trygu/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Export of fresh salmon using Chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <link href="/d/6522356/style.css" type="text/css" rel="stylesheet" />
    <meta charset='utf-8'>
</head>
<body>

    	<div id="legend"></div>
	<div id="canvas">
		<canvas id="chart" width="1024" height="768"></canvas>
	</div>

    <script type="text/javascript">

      var context = document.getElementById("chart").getContext("2d"),
      j = JSONstat('http://data.ssb.no/api/v0/dataset/1122.json'),
      ds = j.Dataset(0),
      varegruppe = "01",
      statistikkvariabel = "Kilopris",
      t = ['2019','2020']

	// The datapart of data here is a single array with figures.
var chartdata = {
    labels: createLabels(),
    datasets: [
    {
        fillColor : "rgba(126,192,66,0.3)",
        strokeColor : "rgba(126,192,66,1)",
        pointColor : "rgba(126,192,66,1)",
        pointStrokeColor : "#fff",
        data: getSliceFromDataSetByYear(t[0]),
        label : t[0]
    },
    {
        fillColor : "rgba(126,40,66,0.3)",
        strokeColor : "rgba(126,40,66,1)",
        pointColor : "rgba(126,40,66,1)",
        pointStrokeColor : "#fff",
        data: getSliceFromDataSetByYear(t[1]),
        label : t[1]
    },
    {
        fillColor : "rgba(80,80,80,0.3)",
        strokeColor : "rgba(80,80,80,1)",
        pointColor : "rgba(80,80,80,1)",
        pointStrokeColor : "#fff",
        data: getSliceFromDataSetByYear(t[2]),
        label : t[2]
    }

    ]
}

// No support for legends in this version of Chart.js apparently

var label = "NOKoner";

var options = { showLegend : true,
    bezierCurve : false,
    scaleLabel : '<%=value+" NOK"%>',
    scaleOverride: true,
    scaleStepWidth: 5,
    scaleSteps: 18,
    scaleStartValue: 0,
	  multiTooltipTemplate: '<%= value + " NOK" %>',
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li style=\"color:<%=datasets[i].strokeColor%>;\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
	}

    var thisChart = new Chart(context).Line(chartdata,options);

	var legend = document.getElementById("legend");
		legend.innerHTML = thisChart.generateLegend();


// Create the x-axis labels
function createLabels() {
    var d = []
    for (var i = 0; i<53; i++) {
        d[i] = "Week " + (i+1)
    }
    return d
}

// This is a nice example of how to slice weekly or monthly datasets
// by year. This is one of the great strenghts of the JSON-stat toolkit.
function getSliceFromDataSetByYear(year) {
    var array = ds
    .toTable(
        {type: 'array',content: 'id'},
        function(dimension){
            if ( dimension[0] === varegruppe &&
               dimension[2] === statistikkvariabel &&
               dimension[1].substring(0,4) == year) {

             // returns only the actual figure
         return dimension[3]
     }
 }
 )

    // Removes heading element in the beginning of array
    array.shift()
    return array
}
</script>
</body>
</html>

## style.css
body {
  font-family: sans-serif;
}

li {
  font-size: 200%;
  list-style: square;
}

#legend {
  float: left;
}

#canvas {
  float: right;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Export of fresh salmon using Chart.js</title>
	<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
	<link href="/d/6522356/style.css" type="text/css" rel="stylesheet" />
	<meta charset='utf-8'>
	</head>
	<body>

	<div id="legend"></div>
	<div id="canvas">
	<canvas id="chart" width="1024" height="768"></canvas>
	</div>

	<script type="text/javascript">

	var context = document.getElementById("chart").getContext("2d"),
	j = JSONstat('http://data.ssb.no/api/v0/dataset/1122.json'),
	ds = j.Dataset(0),
	varegruppe = "01",
	statistikkvariabel = "Kilopris",
	t = ['2019','2020']

	// The datapart of data here is a single array with figures.
	var chartdata = {
	labels: createLabels(),
	datasets: [
	{
	fillColor : "rgba(126,192,66,0.3)",
	strokeColor : "rgba(126,192,66,1)",
	pointColor : "rgba(126,192,66,1)",
	pointStrokeColor : "#fff",
	data: getSliceFromDataSetByYear(t[0]),
	label : t[0]
	},
	{
	fillColor : "rgba(126,40,66,0.3)",
	strokeColor : "rgba(126,40,66,1)",
	pointColor : "rgba(126,40,66,1)",
	pointStrokeColor : "#fff",
	data: getSliceFromDataSetByYear(t[1]),
	label : t[1]
	},
	{
	fillColor : "rgba(80,80,80,0.3)",
	strokeColor : "rgba(80,80,80,1)",
	pointColor : "rgba(80,80,80,1)",
	pointStrokeColor : "#fff",
	data: getSliceFromDataSetByYear(t[2]),
	label : t[2]
	}

	]
	}

	// No support for legends in this version of Chart.js apparently

	var label = "NOKoner";

	var options = { showLegend : true,
	bezierCurve : false,
	scaleLabel : '<%=value+" NOK"%>',
	scaleOverride: true,
	scaleStepWidth: 5,
	scaleSteps: 18,
	scaleStartValue: 0,
	multiTooltipTemplate: '<%= value + " NOK" %>',
	legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li style=\"color:<%=datasets[i].strokeColor%>;\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
	}

	var thisChart = new Chart(context).Line(chartdata,options);

	var legend = document.getElementById("legend");
	legend.innerHTML = thisChart.generateLegend();


	// Create the x-axis labels
	function createLabels() {
	var d = []
	for (var i = 0; i<53; i++) {
	d[i] = "Week " + (i+1)
	}
	return d
	}

	// This is a nice example of how to slice weekly or monthly datasets
	// by year. This is one of the great strenghts of the JSON-stat toolkit.
	function getSliceFromDataSetByYear(year) {
	var array = ds
	.toTable(
	{type: 'array',content: 'id'},
	function(dimension){
	if ( dimension[0] === varegruppe &&
	dimension[2] === statistikkvariabel &&
	dimension[1].substring(0,4) == year) {

	// returns only the actual figure
	return dimension[3]
	}
	}
	)

	// Removes heading element in the beginning of array
	array.shift()
	return array
	}
	</script>
	</body>
	</html>
	body {
	font-family: sans-serif;
	}

	li {
	font-size: 200%;
	list-style: square;
	}

	#legend {
	float: left;
	}

	#canvas {
	float: right;
	}