All I want is to load a basic pie/donut chart, (actually a few bar plots in addition to that , too), but looks like there is some error in my . If I comment the same, I am able to serve the bare-bones python rendered page(but not the pie chart, though).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
.legend{
font-size: : 12px;
}
rect{
stroke-width: 2;
}
#chart_Imp,#chart_Bid{
width: 50%;
}
.axis{
font: 10px sans-serif;
}
.axis path,
.axis line{
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div style="max-width: 800px; border:2px black solid">
<h1>{{haider_Imp}}</h1>
<div id="chart_Imp"></div>
<h1>{{haider_Bid}}</h1>
<div id="chart_Bid"></div>
</div>
<div id="Bar-plots">
<div id="Bar-plots 1st set">
<h1>{{haider_cpa}}</h1>
<div id="cpa"></div>
<h1>{{haider_cpc}}</h1>
<div id="cpc"></div>
<h1>{{haider_cpm}}</h1>
<div id="cpm"></div>
</div>
<div id="Bar-plots 2nd set">
<h1>{{haider_avgbid}}</h1>
<div id="avg_bid"></div>
<h1>{{haider_winrate}}</h1>
<div id="winrate"></div>
</div>
</div>
<script src="/static/script/d3.min.js"></script>
<script>
(function(d3){
'use strict';
var width = 360;
var height = 360;
var radius = Math.min(width,height)/2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.category20b();
var svg = d3.select('#chart_Imp')
.append('svg')
.attr('width',width)
.attr('height',height)
.append('g')
.attr('transform','translate('+(width/2)+','+(height/2)+')');
var arc = d3.svg.arc()
.innerRadius(radius-donutWidth)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.impsplit; })
.sort(null);
d3.csv('./static/summary.csv',function(error,dataset){
dataset.forEach(function(d) {
d.impsplit = +d.impsplit;
});
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d',arc)
.attr('fill',function(d,i)
{
return color(d.data.label);
});
var legend = svg.selectAll('.legend1')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
});
(window.d3);
var margin = {top: 20,right:20, bottom: 70, left: 40},
width = 600-margin.left-margin.right,
height = 300 - margin.top - margin.bottom;
</script>
</body>
</html>
