I have set these properties in pie chart, still labels are not fully visible.labels are only visible on clicking on any of the slice, but it is not visible when the page it loaded,what should i do now?
yearChart
.width(200)
.height(200)
.dimension(yearDim)
.group(countPerYear)
.innerRadius(20)
.drawPaths(true)
.externalRadiusPadding(30)
.externalLabels(40);
monthChart
.width(200)
.height(200)
.dimension(dist)
.group(countPerDist)
.innerRadius(20)
.drawPaths(true)
.externalRadiusPadding(30)
.externalLabels(40);
Finally I solved the problem. I only had to add .minAngleForLabel(0) so that all labels are shown.
yearChart
.width(300)
.height(300)
.dimension(yearDim)
.group(countPerYear)
.drawPaths(true)
.externalRadiusPadding(60)
.minAngleForLabel(0)
.externalLabels(40);
Adjust width,height with externalRadiusPadding
try this
yearChart
.width(300)
.height(300)
.dimension(yearDim)
.group(countPerYear)
.innerRadius(20)
.drawPaths(true)
.externalRadiusPadding(90)
.externalLabels(40);
monthChart
.width(300)
.height(300)
.dimension(dist)
.group(countPerDist)
.innerRadius(20)
.drawPaths(true)
.externalRadiusPadding(90)
.externalLabels(40);
Related
I have a barchart set-up as follows:
function makeGraphs(recordsJson, factorText) {
// Clean data
var records = jQuery.parseJSON(recordsJson);
let parseDate = d3.timeParse("%Y-%m-%d");
records.forEach(function(d) {
d.date = parseDate(d.date);
d.factor = d.factor == true ? 1 : 0;
});
// Create a Crossfilter instance
var ndx = crossfilter(records);
// Define Dimensions
var dateDim = ndx.dimension(d => d.date);
// Group Data
var dateGroup = dateDim.group();
var factorGroup = dateDim.group().reduceSum(dc.pluck('factor'));
var all = ndx.groupAll();
// Define values (to be used in charts)
var minDate = dateDim.bottom(1)[0]["date"];
var maxDate = dateDim.top(1)[0]["date"];
// Chart
const timeChart = new dc.CompositeChart("#time_chart");
timeChart
.height(300)
.x(d3.scaleTime().domain([minDate,maxDate]))
.yAxisLabel("Number of Lines")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose([
new dc.LineChart(timeChart)
.dimension(dateDim)
.colors('blue')
.group(dateGroup, "Total")
.curve(d3.curveLinear),
new dc.BarChart(timeChart)
.dimension(dateDim)
.colors('red')
.centerBar(true)
.gap(1)
.alwaysUseRounding(true)
.group(factorGroup, factorText)
.xUnits(d3.timeDays)
])
.brushOn(false)
.render();
The barchart is always displayed with pencil-thin columns, representing correctly the count of 'factor' items in that date. This occurs no matter the size of day range I apply.
I have tried .xUnits(d3.timeWeeks) to see if it can be made to display better, to no avail (actually, it still displays daily totals, suggesting I need to construct an aggregate function). However, I really need daily counts.
As advised by Gordon, a CompositeChart needs to have its .xUnit property defined in the main chart section, not under one of its sub-chart types:
timeChart
.height(300)
.x(d3.scaleTime().domain([minDate,maxDate]))
.yAxisLabel("Number of Lines")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.xUnits(d3.timeDays)
.compose([
new dc.LineChart(timeChart)
.dimension(dateDim)
.colors('blue')
.group(dateGroup, "Total")
.curve(d3.curveLinear),
new dc.BarChart(timeChart)
.dimension(dateDim)
.colors('red')
.centerBar(true)
.gap(1)
.alwaysUseRounding(true)
.group(factorGroup, factorText)
])
.brushOn(false)
.render();
The bar-chart component then displays with a proper width.
I have code of lineChart
as below,
var ndx = crossfilter(data),
dim = ndx.dimension(function(d) {return d.index;}),
profitGrp = dim.group().reduceSum(function(d) { return d.profit});
var profitChart = dc.lineChart("#profit-chart")
.width($("#profit-chart").parent().width())
.height(400)
.dimension(dim)
.mouseZoomable(true)
.x(d3.scale.linear()).xAxisPadding(0.25).elasticX(true)
.group(profitGrp, "Profit")
.renderHorizontalGridLines(true)
.elasticY(true)
.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
.margins({left: 100, right: 40, top: 40, bottom: 40})
.brushOn(false);
But I can't mouse zoom in/out.
What should I do? I think it is because of elasticX(true)
Right, zoom is contradictory to elasticX(true)
One trick, if you want "elastic once" behavior, is:
chart.on('postRender', function(chart) {
chart.elasticX(false);
});
http://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on
In my case Gordon answer didn´t work.
So there is another aproach, try to use "preRedraw" event:
chart.on('preRedraw', function(chart) {
chart.elasticX(false);
});
I have created a line chart to display last three month data. It works fine except it only show two dates/months in x-axis (first and last). The label for middle point doesn't show.
linechart.js
self.chart = nv.models.lineChart()
.margin({left:100,botoom:50,top:0})
.useInteractiveGuideline(true)
.transitionDuration(350)
.showYAxis(true)
.showXAxis(true)
.showLegend(false)
.width(220)
.height(150)
self.chart.xAxis
.axisLabel('Month')
.tickFormat(function(d) {
return d3.time.format("%b-%Y")(new Date(d)); })
self.chart.yAxis
.axisLabel(myData[0].ylabel)
.tickFormat(d3.format(',.1f'));
myData = self.data;
Data
[{'y': 7L, 'x': u'2016-10'}, {'y': 2L, 'x': u'2016-11'}, {'y': 6L, 'x': u'2016-12'}]
Image
https://github.com/d3/d3-axis/blob/master/README.md#axis_tickValues
You need to set tickValues for your axis or d3 will generate them for you. Take a look at the snippet below:
chart.xAxis
.tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); })
.tickValues(_.map(tick_values, function(d) { return getDate(d); }))
.rotateLabels(-30);
where tick_values is an array. For more info check the documentation above.
On load i see this, all data set without filters:
Picture: what i have
I want to see this, brush(selector) picked last 21 day already on load:
Picture: what i want
Solved! click for answer
Here i saw similar question, but not works for me
dc.js - is it possible to show the user grab handles upon page load
var lineChart = dc.lineChart(".chart-line-graph");
var dateRangeChart = dc.barChart('.chart-date-range');
var hourDim = ndx.dimension(function(d) {return d.hour;});
var valueByHour = hourDim.group().reduceSum(function(d) {return d.value;});
var minDate = hourDim.bottom(1)[0].date;
var maxDate = hourDim.top(1)[0].date;
lineChart
.renderArea(true)
.width(1360)
.height(350)
.transitionDuration(200)
.margins({top: 30, right: 50, bottom: 45, left: 80})
.dimension(hourDim)
.mouseZoomable(true)
.rangeChart(dateRangeChart)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.elasticY(true)
.group(value)
.renderHorizontalGridLines(true);
var dayDim = ndx.dimension(function (d) {return d.day;});
var groupByDayDim = moveDays.group();
dateRangeChart
.width(1360)
.height(35)
.margins({top: 0, right: 50, bottom: 20, left: 80})
.dimension(moveDays)
.group(volumeByMonthGroup)
.centerBar(false)
.gap(1)
.x(d3.time.scale().domain([minDate,maxDate]))
.round(d3.time.week.round)
.alwaysUseRounding(true)
.xUnits(d3.time.days);
dateRangeChart
.yAxis().ticks(0);
If i add this:
lineChart
.filter(dc.filters.RangedFilter(d3.time.day.offset(xrange[1], -21), d3.time.day.offset(xrange[1], 1)))
Then barChart are filtered, but not selected
I solved my first problem!
Just added filter after all code (after renderAll()) and then call redrawAll()
Screenshot, how it looks like for now, on load charts
I have a data like this
Sl.No,Sex,Age_band,TYPE of Mesh,Type of Surgery
16,M,0-25,PHS,UL Inguinal
20,M,0-25,PHS,UL Inguinal
90,M,0-25,UHSL,UL Inguinal
95,M,0-25,UHSL,UL Inguinal
117,M,0-25,UHSL,UL Inguinal
119,M,0-25,UHSL,UL Inguinal
32,M,0-25,Ultrapro,Incisional
14,M,26-35,PHS,UL Inguinal
18,M,26-35,PHS,UL Inguinal
I am trying to plot a composite chart
and my code is
var mFilteredData = crossfilter(mData);
var mDimension = mFilteredData.dimension(dc.pluck("Age_band"));
var mGroup = mDimension.group().reduceCount(dc.pluck("TYPE of Mesh"));
var mGroup1 = mDimension.group().reduceCount(dc.pluck("Type of Surgery"));
var chart = dc.compositeChart(".chart");
chart
.width(400)
.height(300)
.yAxisLabel("User Count")
.renderHorizontalGridLines(true)
.dimension(mDimension)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.compose([
dc.barChart(chart)
.centerBar(true)
.gap(100)
.colors('red')
.group(mGroup)
,
dc.barChart(chart)
.centerBar(true)
.gap(100)
.colors('blue')
.group(mGroup1)])
.brushOn(false)
.render();
But I am getting this errror
Uncaught TypeError: Cannot call method 'all' of undefined
I also had the same issue. After some digging around in the dc source code I saw that if you have an ordinal x scale, the chart calls it's groups all() function (not completely sure why, but it seems to be using the data for the x axis domain). By adding a group to your composite chart you will solve this issue. Like so:
dc.compositeChart(".chart")
.width(400)
.height(300)
.yAxisLabel("User Count")
.renderHorizontalGridLines(true)
.dimension(mDimension)
.group(mGroup)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)