mirror of
https://github.com/bendtherules/chart-builder-demo.git
synced 2026-08-18 13:42:05 +00:00
Bar chart half done
This commit is contained in:
+3
-1
@@ -52,7 +52,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
|
||||
<div class="chart-selector-container">
|
||||
<select class="chart-selector" ng-options="chartName as chartName|uppercase for chartName in chartTypes" ng-model="chartTypeChosen"></select>
|
||||
</div>
|
||||
<div class="chart"></div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -41,13 +41,19 @@ app.value("allData",{
|
||||
"measures": ["Sales","Orders","Revenue"]
|
||||
});
|
||||
|
||||
app.controller("mainController", ["allData","$scope",function (allData,$scope) {
|
||||
app.value("chartTypes",["column","bar","pie"]);
|
||||
|
||||
|
||||
app.controller("mainController", ["allData","chartTypes","$scope",function (allData,chartTypes,$scope) {
|
||||
$scope.data = {};
|
||||
$scope.data.chooserDimensions = allData.dimensions;
|
||||
$scope.data.chosenDimension = undefined;
|
||||
$scope.data.chooserMeasures = allData.measures;
|
||||
$scope.data.chosenMeasure = undefined;
|
||||
|
||||
$scope.chartTypes = chartTypes;
|
||||
$scope.chartTypeChosen = chartTypes[0];
|
||||
|
||||
$scope.data.values = allData.values;
|
||||
|
||||
$scope.allowDrop = function(ev,location) {
|
||||
@@ -128,16 +134,28 @@ app.controller("mainController", ["allData","$scope",function (allData,$scope) {
|
||||
|
||||
}
|
||||
|
||||
$scope.$watchGroup(["data.values","data.chosenDimension","data.chosenMeasure"],function(){
|
||||
$scope.$watchGroup(["data.values","data.chosenDimension","data.chosenMeasure","chartTypeChosen"],function(){
|
||||
if ($scope.data.chosenMeasure && $scope.data.chosenDimension){
|
||||
var tmpData = $scope.data.values[$scope.data.chosenDimension][$scope.data.chosenMeasure];
|
||||
var chartData = [];
|
||||
var keys = Object.keys(tmpData);
|
||||
for (var i = keys.length - 1; i >= 0; i--) {
|
||||
chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
|
||||
var axisLabel;
|
||||
if ($scope.chartTypeChosen.toLowerCase() === "bar")
|
||||
{
|
||||
for (var i = keys.length - 1; i >= 0; i--) {
|
||||
chartData.push({"y":keys[i],"x":tmpData[keys[i]]});
|
||||
}
|
||||
axisLabel = [$scope.data.chosenMeasure,$scope.data.chosenDimension];
|
||||
}
|
||||
else
|
||||
{
|
||||
for (var i = keys.length - 1; i >= 0; i--) {
|
||||
chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
|
||||
}
|
||||
axisLabel = [$scope.data.chosenDimension,$scope.data.chosenMeasure];
|
||||
}
|
||||
|
||||
drawChart(chartData,[$scope.data.chosenDimension,$scope.data.chosenMeasure]);
|
||||
drawChart($scope.chartTypeChosen,chartData,axisLabel);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
+106
-2
@@ -1,4 +1,19 @@
|
||||
function drawChart(data,axisLabel)
|
||||
|
||||
function drawChart(type,data,axisLabel) {
|
||||
var typeMapping = {
|
||||
"column" : drawColumnChart,
|
||||
"bar" : drawBarChart,
|
||||
// "pie" : drawPieChart
|
||||
};
|
||||
if (typeof(type) === "string"){
|
||||
var drawFunc = typeMapping[type.toLowerCase()];
|
||||
if (typeof(drawFunc) !== undefined){
|
||||
drawFunc(data,axisLabel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawColumnChart(data,axisLabel)
|
||||
{
|
||||
var eleChart = d3.select(".chart").html(""),
|
||||
eleChartBbox = eleChart.node().getBoundingClientRect(),
|
||||
@@ -8,7 +23,7 @@ function drawChart(data,axisLabel)
|
||||
|
||||
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
|
||||
|
||||
var x = d3.scaleBand().rangeRound([0, width]).padding(0.25),
|
||||
var x = d3.scaleBand().rangeRound([0, width/1.1]).padding(0.25),
|
||||
y = d3.scaleLinear().rangeRound([height, 0]);
|
||||
|
||||
var g = svg.append("g")
|
||||
@@ -81,6 +96,95 @@ function drawChart(data,axisLabel)
|
||||
|
||||
}
|
||||
|
||||
function drawBarChart(data,axisLabel){
|
||||
var eleChart = d3.select(".chart").html(""),
|
||||
eleChartBbox = eleChart.node().getBoundingClientRect(),
|
||||
margin = {top: 20, right: 35, bottom: 70, left: 60},
|
||||
width = +eleChartBbox.width - margin.left - margin.right,
|
||||
height = +eleChartBbox.height - margin.top - margin.bottom;
|
||||
|
||||
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
|
||||
|
||||
var x = d3.scaleLinear().rangeRound([0, width/1.1]),
|
||||
y = d3.scaleBand().rangeRound([height, 0]).padding(0.25);
|
||||
|
||||
var g = svg.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
|
||||
x.domain([0, d3.max(data, function(d) { return d.x; })]);
|
||||
y.domain(data.map(function(d) { return d.y; }));
|
||||
|
||||
// g.append("g")
|
||||
// .attr("class", "axis axis-x")
|
||||
// .style("font-size",".75em")
|
||||
// .attr("transform", "translate(0," + height + ")")
|
||||
// .call(d3.axisBottom(x));
|
||||
|
||||
// g.append("g")
|
||||
// .attr("class", "axis axis-y")
|
||||
// .style("font-size",".75em")
|
||||
// .call(d3.axisLeft(y).ticks(10))
|
||||
// .append("text")
|
||||
// .attr("transform", "translate(15,0) rotate(-90)")
|
||||
// .attr("y", 6)
|
||||
// .attr("dy", "0.71em")
|
||||
// .attr("text-anchor", "end")
|
||||
// .text("y");
|
||||
|
||||
// var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label";
|
||||
// var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label";
|
||||
|
||||
// var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height;
|
||||
// var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65;
|
||||
|
||||
// g
|
||||
// .append('g').classed("label-x",true)
|
||||
// .attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')')
|
||||
// .append('text')
|
||||
// .attr('text-anchor', 'middle')
|
||||
// .text(xLabel);
|
||||
|
||||
// g
|
||||
// .append('g').classed("label-y",true)
|
||||
// .attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)')
|
||||
// .append('text')
|
||||
// .attr('text-anchor', 'middle')
|
||||
// .attr("shape-rendering","crispEdges")
|
||||
// .text(yLabel);
|
||||
|
||||
var tip_points = d3.tip()
|
||||
.attr('class', 'd3-tip')
|
||||
.html(function(d) { return d.x; });
|
||||
|
||||
var vis = svg.call(tip_points);
|
||||
|
||||
g.selectAll(".bar")
|
||||
.data(data)
|
||||
.enter().append("rect")
|
||||
.attr("class", "bar")
|
||||
.attr("x", function(d) { return 0; })
|
||||
.attr("y", function(d) { return y(d.y); })
|
||||
.attr("width", function(d) { return x(d.x); })
|
||||
.attr("height", y.bandwidth())
|
||||
.on('mouseover', function () {
|
||||
tip_points.show.apply(this,arguments);
|
||||
|
||||
})
|
||||
.on('mouseout', function () {
|
||||
tip_points.hide.apply(this,arguments);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function cleanChart() {
|
||||
var eleChart = d3.select(".chart").html("");
|
||||
}
|
||||
@@ -98,7 +98,7 @@ body
|
||||
.chart
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100% - 3em);
|
||||
|
||||
/*background-color: lightgray;*/
|
||||
overflow: hidden;
|
||||
@@ -134,6 +134,18 @@ ul.unstyled-list
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.chart-selector-container
|
||||
{
|
||||
width: 100%;
|
||||
height: 3em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.chart-selector
|
||||
{
|
||||
float: right;
|
||||
/*margin-right: 1em;*/
|
||||
}
|
||||
|
||||
/* d3 styles*/
|
||||
.bar {
|
||||
|
||||
Reference in New Issue
Block a user