Skip to content

Instantly share code, notes, and snippets.

@reinholdsson

reinholdsson/index.html

Created July 15, 2013 17:09
Show Gist options
  • Save reinholdsson/6001626 to your computer and use it in GitHub Desktop.
Save reinholdsson/6001626 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
<script src='http://dimplejs.org/dist/dimple.v1.min.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id='chartb94935e6472d' class='rChart dimple'></div>
<script type="text/javascript">
var opts = {
"dom": "chartb94935e6472d",
"width": 800,
"height": 400,
"x": "Year",
"y": "calc",
"type": "line",
"groups": "variable",
"id": "chartb94935e6472d"
},
data = [
{
"Year": 1999,
"variable": "KPI, skuggindextal",
"calc": 36400
},
{
"Year": 2000,
"variable": "KPI, skuggindextal",
"calc": 36500
},
{
"Year": 2001,
"variable": "KPI, skuggindextal",
"calc": 36800
},
{
"Year": 2002,
"variable": "KPI, skuggindextal",
"calc": 37800
},
{
"Year": 2003,
"variable": "KPI, skuggindextal",
"calc": 38500
},
{
"Year": 2004,
"variable": "KPI, skuggindextal",
"calc": 39200
},
{
"Year": 2005,
"variable": "KPI, skuggindextal",
"calc": 39300
},
{
"Year": 2006,
"variable": "KPI, skuggindextal",
"calc": 39600
},
{
"Year": 2007,
"variable": "KPI, skuggindextal",
"calc": 40200
},
{
"Year": 2008,
"variable": "KPI, skuggindextal",
"calc": 40900
},
{
"Year": 2009,
"variable": "KPI, skuggindextal",
"calc": 42600
},
{
"Year": 2010,
"variable": "KPI, skuggindextal",
"calc": 42200
},
{
"Year": 2011,
"variable": "KPI, skuggindextal",
"calc": 42600
},
{
"Year": 2012,
"variable": "KPI, skuggindextal",
"calc": 43900
},
{
"Year": 2013,
"variable": "KPI, skuggindextal",
"calc": 44400
},
{
"Year": 2014,
"variable": "KPI, skuggindextal",
"calc": 44300
},
{
"Year": 1999,
"variable": "KPI med fast ränta",
"calc": 36800
},
{
"Year": 2000,
"variable": "KPI med fast ränta",
"calc": 37300
},
{
"Year": 2001,
"variable": "KPI med fast ränta",
"calc": 37700
},
{
"Year": 2002,
"variable": "KPI med fast ränta",
"calc": 38700
},
{
"Year": 2003,
"variable": "KPI med fast ränta",
"calc": 39400
},
{
"Year": 2004,
"variable": "KPI med fast ränta",
"calc": 40300
},
{
"Year": 2005,
"variable": "KPI med fast ränta",
"calc": 40800
},
{
"Year": 2006,
"variable": "KPI med fast ränta",
"calc": 41200
},
{
"Year": 2007,
"variable": "KPI med fast ränta",
"calc": 42000
},
{
"Year": 2008,
"variable": "KPI med fast ränta",
"calc": 42500
},
{
"Year": 2009,
"variable": "KPI med fast ränta",
"calc": 43900
},
{
"Year": 2010,
"variable": "KPI med fast ränta",
"calc": 44400
},
{
"Year": 2011,
"variable": "KPI med fast ränta",
"calc": 45200
},
{
"Year": 2012,
"variable": "KPI med fast ränta",
"calc": 45900
},
{
"Year": 2013,
"variable": "KPI med fast ränta",
"calc": 46300
},
{
"Year": 2014,
"variable": "KPI med fast ränta",
"calc": 46700
},
{
"Year": 1999,
"variable": "Nettoprisindex",
"calc": 35600
},
{
"Year": 2000,
"variable": "Nettoprisindex",
"calc": 35200
},
{
"Year": 2001,
"variable": "Nettoprisindex",
"calc": 35900
},
{
"Year": 2002,
"variable": "Nettoprisindex",
"calc": 36900
},
{
"Year": 2003,
"variable": "Nettoprisindex",
"calc": 37700
},
{
"Year": 2004,
"variable": "Nettoprisindex",
"calc": 38100
},
{
"Year": 2005,
"variable": "Nettoprisindex",
"calc": 38200
},
{
"Year": 2006,
"variable": "Nettoprisindex",
"calc": 38300
},
{
"Year": 2007,
"variable": "Nettoprisindex",
"calc": 38700
},
{
"Year": 2008,
"variable": "Nettoprisindex",
"calc": 39600
},
{
"Year": 2009,
"variable": "Nettoprisindex",
"calc": 41000
},
{
"Year": 2010,
"variable": "Nettoprisindex",
"calc": 40600
},
{
"Year": 2011,
"variable": "Nettoprisindex",
"calc": 41100
},
{
"Year": 2012,
"variable": "Nettoprisindex",
"calc": 42000
},
{
"Year": 2013,
"variable": "Nettoprisindex",
"calc": 42600
},
{
"Year": 2014,
"variable": "Nettoprisindex",
"calc": 42400
},
{
"Year": 1999,
"variable": "Harmoniserat KPI",
"calc": 36900
},
{
"Year": 2000,
"variable": "Harmoniserat KPI",
"calc": 37100
},
{
"Year": 2001,
"variable": "Harmoniserat KPI",
"calc": 37600
},
{
"Year": 2002,
"variable": "Harmoniserat KPI",
"calc": 38600
},
{
"Year": 2003,
"variable": "Harmoniserat KPI",
"calc": 39300
},
{
"Year": 2004,
"variable": "Harmoniserat KPI",
"calc": 40100
},
{
"Year": 2005,
"variable": "Harmoniserat KPI",
"calc": 40500
},
{
"Year": 2006,
"variable": "Harmoniserat KPI",
"calc": 40900
},
{
"Year": 2007,
"variable": "Harmoniserat KPI",
"calc": 41600
},
{
"Year": 2008,
"variable": "Harmoniserat KPI",
"calc": 42200
},
{
"Year": 2009,
"variable": "Harmoniserat KPI",
"calc": 43900
},
{
"Year": 2010,
"variable": "Harmoniserat KPI",
"calc": 44600
},
{
"Year": 2011,
"variable": "Harmoniserat KPI",
"calc": 45300
},
{
"Year": 2012,
"variable": "Harmoniserat KPI",
"calc": 45900
},
{
"Year": 2013,
"variable": "Harmoniserat KPI",
"calc": 46300
},
{
"Year": 2014,
"variable": "Harmoniserat KPI",
"calc": 46600
},
{
"Year": 1999,
"variable": "Prisbasbelopp",
"calc": 36400
},
{
"Year": 2000,
"variable": "Prisbasbelopp",
"calc": 36600
},
{
"Year": 2001,
"variable": "Prisbasbelopp",
"calc": 36900
},
{
"Year": 2002,
"variable": "Prisbasbelopp",
"calc": 37900
},
{
"Year": 2003,
"variable": "Prisbasbelopp",
"calc": 38600
},
{
"Year": 2004,
"variable": "Prisbasbelopp",
"calc": 39300
},
{
"Year": 2005,
"variable": "Prisbasbelopp",
"calc": 39400
},
{
"Year": 2006,
"variable": "Prisbasbelopp",
"calc": 39700
},
{
"Year": 2007,
"variable": "Prisbasbelopp",
"calc": 40300
},
{
"Year": 2008,
"variable": "Prisbasbelopp",
"calc": 41000
},
{
"Year": 2009,
"variable": "Prisbasbelopp",
"calc": 42800
},
{
"Year": 2010,
"variable": "Prisbasbelopp",
"calc": 42400
},
{
"Year": 2011,
"variable": "Prisbasbelopp",
"calc": 42800
},
{
"Year": 2012,
"variable": "Prisbasbelopp",
"calc": 44000
},
{
"Year": 2013,
"variable": "Prisbasbelopp",
"calc": 44500
},
{
"Year": 2014,
"variable": "Prisbasbelopp",
"calc": 44400
}
],
xAxis = {
"type": "addCategoryAxis",
"showPercent": false
},
yAxis = {
"type": "addMeasureAxis",
"showPercent": false,
"overrideMin": 35000
},
zAxis = [],
legend = {
"x": 100,
"y": 10,
"width": 800,
"height": 20,
"horizontalAlign": "left"
};
var svg = dimple.newSvg("#" + opts.id, opts.width, opts.height);
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
if (opts.bounds) {
myChart.setBounds(opts.bounds.x, opts.bounds.y, opts.bounds.width, opts.bounds.height);//myChart.setBounds(80, 30, 480, 330);
}
//dimple allows use of custom CSS with noFormats
if(opts.noFormats) { myChart.noFormats = opts.noFormats; };
//for markimekko and addAxis also have third parameter measure
//so need to evaluate if measure provided
//x axis
var x;
if(xAxis.measure) {
x = myChart[xAxis.type]("x",opts.x,xAxis.measure);
} else {
x = myChart[xAxis.type]("x", opts.x);
};
if(!(xAxis.type === "addPctAxis")) x.showPercent = xAxis.showPercent;
if (xAxis.orderRule) x.addOrderRule(xAxis.orderRule);
if (xAxis.grouporderRule) x.addGroupOrderRule(xAxis.grouporderRule);
if (xAxis.overrideMin) x.overrideMin = xAxis.overrideMin;
if (xAxis.overrideMax) x.overrideMax = xAxis.overrideMax;
if (xAxis.overrideMax) x.overrideMax = xAxis.overrideMax;
if (xAxis.inputFormat) x.dateParseFormat = xAxis.inputFormat;
if (xAxis.outputFormat) x.tickFormat = xAxis.outputFormat;
//y axis
var y;
if(yAxis.measure) {
y = myChart[yAxis.type]("y",opts.y,yAxis.measure);
} else {
y = myChart[yAxis.type]("y", opts.y);
};
if(!(yAxis.type === "addPctAxis")) y.showPercent = yAxis.showPercent;
if (yAxis.orderRule) y.addOrderRule(yAxis.orderRule);
if (yAxis.grouporderRule) y.addGroupOrderRule(yAxis.grouporderRule);
if (yAxis.overrideMin) y.overrideMin = yAxis.overrideMin;
if (yAxis.overrideMax) y.overrideMax = yAxis.overrideMax;
if (yAxis.inputFormat) y.dateParseFormat = yAxis.inputFormat;
if (yAxis.outputFormat) y.tickFormat = yAxis.outputFormat;
//z for bubbles
var z;
if (!(typeof(zAxis) === 'undefined') && zAxis.type){
if(zAxis.measure) {
z = myChart[zAxis.type]("z",opts.z,zAxis.measure);
} else {
z = myChart[zAxis.type]("z", opts.z);
};
if(!(zAxis.type === "addPctAxis")) z.showPercent = zAxis.showPercent;
if (zAxis.orderRule) z.addOrderRule(zAxis.orderRule);
if (zAxis.overrideMin) z.overrideMin = zAxis.overrideMin;
if (zAxis.overrideMax) z.overrideMax = zAxis.overrideMax;
}
//here need think I need to evaluate group and if missing do null
//as the first argument
//if provided need to use groups from opts
if(opts.hasOwnProperty("groups")) {
var s = myChart.addSeries( opts.groups, dimple.plot[opts.type] );
//series offers an aggregate method that we will also need to check if available
//options available are avg, count, max, min, sum
if (!(typeof(opts.aggregate) === 'undefined')) {
s.aggregate = eval(opts.aggregate);
}
if (!(typeof(opts.lineWeight) === 'undefined')) {
s.lineWeight = eval(opts.lineWeight);
}
if (!(typeof(opts.barGap) === 'undefined')) {
s.barGap = eval(opts.barGap);
}
} else var s = myChart.addSeries( null, dimple.plot[opts.type] );
//unsure if this is best but if legend is provided (not empty) then evaluate
if(d3.keys(legend).length > 0) {
var l =myChart.addLegend();
d3.keys(legend).forEach(function(d){
l[d] = legend[d];
});
}
//quick way to get this going but need to make this cleaner
if(opts.storyboard) {
myChart.setStoryboard(opts.storyboard);
};
myChart.draw();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment