How to Legend show Horizontal in d3js
1,579 views
Skip to first unread message
Raj Kumar
Jul 4, 2014, 7:48:16 AM7/4/14
to d3...@googlegroups.com
I am using d3js...for draw histogram...but my requirement little bit different. I want my legends show horizontally(top x-axis) not show Vertically(Y-axis).H
I am using this Json for draw a Chart
I am using this Json for draw a Chart
Json-----------------------------------------------------------------------------------------------------------------------
[{
"Key": "05/16/2014",
"SeriesY": [{"Name": "FBTotalCount - Average","count": 0,"min": 0,"max": 0,"avg": 18},
{"Name": "Negative - Count","count": 7,"min": 0,"max": 0,"avg": 10},
{"Name": "Neutral - Count","count": 53,"min": 0,"max": 0,"avg": 5},
{"Name": "Positive - Count","count": 7,"min": 0, "max": 0,"avg": 2}
]
},
{"Key": "05/17/2014",
"SeriesY": [{"Name": "FBTotalCount - Average","count": 0,"min": 0,"max": 0,"avg": 7.79},
{"Name": "Negative - Count","count": 4,"min": 0,"max": 0,"avg": 9},
{"Name": "Neutral - Count","count": 37,"min": 0,"max": 0,"avg": 6.2},
{"Name": "Positive - Count","count": 2,"min": 0,"max": 0,"avg": 7.5}
]
},
{
"Key": "05/18/2014",
"SeriesY": [{"Name": "FBTotalCount - Average","count": 0,"min": 0,"max": 0,"avg": 0.35},
{"Name": "Negative - Count","count": 1,"min": 0,"max": 0,"avg": 0},
{"Name": "Neutral - Count", "count": 34,"min": 0,"max": 0,"avg": 0},
{"Name": "Positive - Count","count": 1,"min": 0,"max": 0,"avg": 0}
]
},
{
"Key": "05/19/2014",
"SeriesY": [{ "Name": "FBTotalCount - Average","count": 0,"min": 0, "max": 0, "avg": 0.09},
{"Name": "Negative - Count","count": 7,"min": 0,"max": 0,"avg": 0},
{"Name": "Neutral - Count","count": 50,"min": 0,"max": 0,"avg": 0},
{"Name": "Positive - Count","count": 4,"min": 0,"max": 0,"avg": 0}
]
},
{
"Key": "05/20/2014",
"SeriesY": [{"Name": "FBTotalCount - Average","count": 0,"min": 0,"max": 0,"avg": 0},
{"Name": "Negative - Count","count": 3,"min": 0,"max": 0,"avg": 0},
{"Name": "Neutral - Count","count": 62,"min": 0,"max": 0,"avg": 0},
{"Name": "Positive - Count","count": 9,"min": 0,"max": 0,"avg": 0}
]
},
{"Key": "05/21/2014",
"SeriesY": [{"Name": "FBTotalCount - Average","count": 0,"min": 0,"max": 0,"avg": 0.85},
{"Name": "Negative - Count","count": 8,"min": 0,"max": 0,"avg": 0},
{"Name": "Neutral - Count","count": 76,"min": 0,"max": 0,"avg": 0},
{"Name": "Positive - Count","min": 0,"max": 0,"avg": 0}
]
},
{"Key": "05/22/2014",
"SeriesY": [{"Name": "FBTotalCount - Average","count": 0,"min": 0,"avg": 0.92},
{"Name": "Negative - Count","count": 2,"min": 0,"max": 0,"avg": 0},
{"Name": "Neutral - Count","count": 59,"min": 0,"max": 0,"avg": 0 },
{"Name": "Positive - Count","count": 6,"min": 0,"avg": 0
}
]
},
{"Key": "05/23/2014",
"SeriesY": [{"Name": "FBTotalCount - Average","count": 0,"max": 0,"avg": 2.33},
{"Name": "Negative - Count","count": 3,"min": 0,"max": 0,"avg": 0},
{"Name": "Neutral - Count","count": 53,"min": 0,"avg": 0},
{"Name": "Positive - Count","count": 0,"min": 0,"max": 0,"avg": 0}]
},
{ "Key": "05/25/2014",
"SeriesY": [{ "Name": "FBTotalCount - Average", "count": 0, "max": 0, "avg": 2.33 },
{ "Name": "Negative - Count", "count": 3, "min": 0, "max": 0, "avg": 15 },
{ "Name": "Neutral - Count", "count": 53, "min": 0, "avg": 10 },
{ "Name": "Positive - Count", "count": 0, "min": 0, "max": 0, "avg": 5}]
}
]
Codeing--------------------------------------------
<body>
<form id="form1" runat="server">
<div>
<span id="userTitle" style="margin-left: 408px;"></span>
<div id="canvasContainer"></div>
<script>
var svg = d3.select("#canvasContainer")
.append("svg")
.attr("width", 900)
.attr("height", 700);
var axisX = function (scale) {return d3.svg.axis().scale(scale).orient("bottom");};
var axisY = function (scale) {return d3.svg.axis().scale(scale).orient("left");};
var x0 = d3.scale
.ordinal()
.rangeRoundBands([0, dimensions.innerWidth], .1);
var x1 = d3.scale.ordinal();
var yScale = d3.scale
.linear()
.range([dimensions.innerHeight, 0]);
var xAxis = axisX(x0);
var yAxis = axisY(yScale).tickFormat(d3.format(format));
var colorScale = d3.scale
.ordinal()
.range(colorRange);
var data = json;
var seriesNames = [];
var seriesNamesIndex = 0;
data.forEach(function(d) {
if (d.SeriesY.length > 1) {
return seriesNamesIndex = d.SeriesY;
}
});
$.each(seriesNamesIndex, function(key, element) {
seriesNames.push(element.Name);
});
x0.domain(data.map(function(d) { return d.Key; }));
x1.domain(seriesNames).rangeRoundBands([0, x0.rangeBand()]);
var max = d3.max(data, function(d) {
return d3.max(d.SeriesY, function(dd) {
return dd.avg;
});
});
yScale.domain([0, max]);
chart = svg.append("g")
.attr("transform", "translate(" + 93 + "," + 60 + ")");
var specs = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) {
return "translate(" + x0(d.Key) + ", 0)";
});
var rects = specs.selectAll("rect")
.data(function(d) { return d.SeriesY; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) {
return x1(d.Name);
})
.attr("y", function(d) { return yScale(d.avg); })
.attr("height", 0)
.style("fill", function(d) { return colorScale(d.Name); });
rects.transition()
.attr("height", function(d) { return dimensions.innerHeight - yScale(d.avg); })
.delay(function(d, i) { return i * 600; })
.duration(500);
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (dimensions.innerHeight) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-1em")
.attr("dy", 8)
.attr("transform", "rotate(-45)");
chart.append("g")
.attr("class", "X axis")
.append("text")
.attr("transform", "rotate(-1)")
.attr("x", 186)
.attr("y", 619)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Date");
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")
.attr("dx", "-" + 8);
chart.append("g")
.attr("class", "y axis").attr("transform", "translate(-85,130)")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Sales-Average");
legend = svg.append("g")
.attr("transform", "translate(" + 138 + "," + 6 + ")").attr("font-size", "12px");
var perviousLength = 0;
var legendItems = legend.selectAll("g")
.data(seriesNames)
.enter().append("g")
.attr("transform", function (d, i)
{
perviousLength += d.length;
if (i == 0) {return "translate(0,0)";}
else {return "translate(" + (((x1(d)) + perviousLength)*4) + "," + "0)";}
});
legendItems.append("rect")
.attr("width", 12)
.attr("height", 12)
.style("fill", colorScale);
legendItems.append("text")
.attr("x", 22)
.attr("y", 9)
.attr("dy", ".2em")
.text(function (d) {
return d; });
});
</script>
</body>
</html>
0 new messages