I'm trying to figure out how to get my legend to appear at the bottom of a chart but having no luck.
In the code below, since my chart has a height of 600, i figure i could simply add an offset of 600 for the Y coordinate and that would do the trick. Does not work however.
var svg = dimple.newSvg("#chart", 800, 600);
...
chart.addLegend(0, 600 + 40, 200, 10, "left");
Anyone know how to solve this either with dimple.js or d3.js? It would also be great if i did not have to hard code these values and instead could do something like this:
chart.addLegend(0, d3.select("#chart").height + 40, 200, 10, "left");
here is the documentation for addLegend for dimple.js:
https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#addLegend
Your code should be Ok.
Please check js fiddle(http://jsfiddle.net/ch2187dd/)
var svg = dimple.newSvg("#chartContainer", 590, 540);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 35, 480, 325)
myChart.addCategoryAxis("x", ["date"]);
myChart.addCategoryAxis("y", "close");
myChart.addSeries("Price Tier", dimple.plot.bubble);
myChart.addLegend(90, 480, 330, 20, "left");
myChart.draw();
Related
The following code draws two rectangles:
const demoCanvas = document.getElementById('canvas-demo').getContext('2d');
window.onload = function() {
demoCanvas.fillStyle = 'red';
demoCanvas.rect(10, 10, 60, 60);
demoCanvas.fill(); // first rectangle
demoCanvas.fillStyle = 'blue';
demoCanvas.rect(10, 110, 60, 60);
demoCanvas.fill();
}
<canvas id="canvas-demo" width="300" height="300">
The output is two blue rectangles. I tried adding begin and close path as well, but the rectangles take only one color for some reason. In this case, it's blue. How can I fix this?
Here is the solution:
const demoCanvas = document.getElementById('canvas-demo').getContext('2d');
window.onload = function() {
demoCanvas.beginPath();
demoCanvas.fillStyle = 'red';
demoCanvas.rect(10, 10, 60, 60);
demoCanvas.fill();
demoCanvas.closePath();
demoCanvas.beginPath();
demoCanvas.fillStyle = 'blue';
demoCanvas.rect(10, 110, 60, 60);
demoCanvas.fill();
demoCanvas.closePath();
}
<canvas id="canvas-demo" width="300" height="300">
Hope you found this helpful, Cheers 🙂.
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
Want to make a plot with the average values of HR and avg. Looked it up in the documentation, but it seems i cannot get the average command to work :(
Can anybody spot my stupid mistake ?
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("bbd3.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 490, 330)
myChart.addMeasureAxis("x", "HR");
myChart.addMeasureAxis("y", "avg");
myChart.aggregate = dimple.aggregateMethod.avg;
myChart.addSeries( ["handedness"], dimple.plot.bubble);
myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
Aggregation applies to the series not the chart. So you can rewrite like this:
var mySeries = myChart.addSeries( ["handedness"], dimple.plot.bubble);
mySeries.aggregate = dimple.aggregateMethod.avg;
I'm using DimpleJS to render a BubblePlot. My data looks like this:
[
{type: "A", name:"First", x:1, y:200},
{type: "A", name:"Second", x:30, y:10},
{type: "B", name:"Third", x:50, y:120},
{type: "B", name:"Fifth", x:90, y:100}
]
The graph is created with:
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(50, 30, 370, 230);
var x = myChart.addMeasureAxis("x", "x");
var y = myChart.addMeasureAxis("y", "y");
var series = myChart.addSeries(["type", "name"], dimple.plot.bubble);
myChart.addLegend(10, 10, 360, 20, "right");
myChart.draw();
This nearly does what I want, with all the data available in the tooltips etc. But coloring is based on both typeand name.
Also unfortunately the legend also picks up all the values from the name field where I'd prefer to just see the type values within the legend.
I also tried to the use the addColorAxismethod like this:
var c = myChart.addColorAxis("type");
var series = myChart.addSeries("name", dimple.plot.bubble);
But that renders black bubbles, shows "NaN" as type in the tooltips and putting that into a legend also doesn't seem to be possible.
Any suggestions are welcome!
Turns out that the order of arguments in the series is important.
This solved my problem:
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(50, 30, 370, 230);
var x = myChart.addMeasureAxis("x", "x");
var y = myChart.addMeasureAxis("y", "y");
var series = myChart.addSeries(["name","type"], dimple.plot.bubble);
myChart.addLegend(10, 10, 360, 20, "right");
myChart.draw();
Messing with strokeRect, the width seems to be sharing the overall width so a rect with a line thickness of 100 and a width of 200 would really be 300 width including the line. Is this correct or am I missing something else.
Yes, the lineWidth will add 50% of its width to each of the sides of the path itself.
var ctx = document.querySelector("canvas").getContext("2d");
ctx.lineWidth = 100;
ctx.strokeRect(50, 50, 200, 200);
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 200, 200);
<canvas width=400 height=400></canvas>