public
Last active

Here is the test page for my reusable chart pattern.

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
<!DOCTYPE html>
 
<html>
 
<head>
<title>bar chart example</title>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="../example_d3/reusable_bar_chart.js"></script>
<style>
.bar_chart rect {
stroke: white;
fill: steelBlue;
}
.bar_chart text {
color: white;
font: 10px sans-serif;
}
#module_2 {
float: right;
}
</style>
 
<script>
// TODO turn this data into an object with a category (campaign) and a label for metric
// TODO what do I need to pass? a dimension (one column from table), a metric (one column from table), a label for the dimension, a label for the metric
// TODO what about sort order? is that part of the query? -- I think we sum, group by, and order by in every query.
// TODO need to remove height, width, and mod from bar_char -- might leave these in so we can add units of different size latert
// TODO need to add labels for dimension and metric in the chart
var module_2_data = [
{
"dimension1":"snow is fun"
,"dim1_label":"campaign"
,"metric1":15
,"met1_label":"clicks"}
,{
"dimension1":"painting for art"
,"dim1_label":"campaign"
,"metric1":22
,"met1_label":"clicks"}
,{
"dimension1":"renaissance scultpure"
,"dim1_label":"campaign"
,"metric1":12
,"met1_label":"clicks"}
,{
"dimension1":"oil painting"
,"dim1_label":"campaign"
,"metric1":34
,"met1_label":"clicks"}
,{
"dimension1":"old poetry"
,"dim1_label":"campaign"
,"metric1":46
,"met1_label":"clicks"}
,{
"dimension1":"gaugin history"
,"dim1_label":"campaign"
,"metric1":28
,"met1_label":"clicks"}
,{
"dimension1":"van gogh color"
,"dim1_label":"campaign"
,"metric1":21
,"met1_label":"clicks"}
,{
"dimension1":"cafe at night"
,"dim1_label":"campaign"
,"metric1":18
,"met1_label":"clicks"}
,{
"dimension1":"botticelli painting"
,"dim1_label":"campaign"
,"metric1":24
,"met1_label":"clicks"}
];
 
var module_1_data = [
{
"dimension1":"snow is fun"
,"dim1_label":"campaign"
,"metric1":15
,"met1_label":"opens"}
,{
"dimension1":"painting for art"
,"dim1_label":"campaign"
,"metric1":26
,"met1_label":"opens"}
,{
"dimension1":"renaissance scultpure"
,"dim1_label":"campaign"
,"metric1":14
,"met1_label":"opens"}
,{
"dimension1":"oil painting"
,"dim1_label":"campaign"
,"metric1":8
,"met1_label":"opens"}
,{
"dimension1":"old poetry"
,"dim1_label":"campaign"
,"metric1":28
,"met1_label":"opens"}
,{
"dimension1":"gaugin history"
,"dim1_label":"campaign"
,"metric1":21
,"met1_label":"opens"}
,{
"dimension1":"van gogh color"
,"dim1_label":"campaign"
,"metric1":16
,"met1_label":"opens"}
,{
"dimension1":"cafe at night"
,"dim1_label":"campaign"
,"metric1":24
,"met1_label":"opens"}
,{
"dimension1":"botticelli painting"
,"dim1_label":"campaign"
,"metric1":38
,"met1_label":"opens"}
];
</script>
</head>
 
<body>
<div id="module_1">
<script>
bar_chart("220","400",module_1_data,"1")();
</script>
</div>
 
<div id="module_2">
<script>
bar_chart("220","400",module_2_data,"2")();
</script>
</div>
 
</body>
 
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.