From d39997486f5cb909b12cd328675f0286943aa25a Mon Sep 17 00:00:00 2001 From: Abhas Bhattacharya Date: Fri, 17 Mar 2017 08:01:07 +0530 Subject: [PATCH] Bar chart half done --- index.html | 4 +- js/app.js | 28 +++++++++--- js/draw-chart.js | 108 ++++++++++++++++++++++++++++++++++++++++++++++- style.css | 14 +++++- 4 files changed, 145 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 1b13aa5..1b45e36 100644 --- a/index.html +++ b/index.html @@ -52,7 +52,9 @@
- +
+ +
diff --git a/js/app.js b/js/app.js index a50af69..5f84983 100644 --- a/js/app.js +++ b/js/app.js @@ -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 { diff --git a/js/draw-chart.js b/js/draw-chart.js index fcb807e..76898a1 100644 --- a/js/draw-chart.js +++ b/js/draw-chart.js @@ -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(""); } \ No newline at end of file diff --git a/style.css b/style.css index db9e9f6..2992684 100644 --- a/style.css +++ b/style.css @@ -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 {