I am comparing C3 to NVD3.
I really like the legend function of the NVD3. The C3 legend is boring.
How can I change the legend to a Circle with the C3?
Thanks.
How about a pure CSS solution?
.c3-legend-item-tile {
shape-rendering: auto;
stroke-linecap: round;
stroke-dasharray: 0.1 10;
stroke-width: 8;
transform: translate(6px, 1px);
}
See in action: https://jsfiddle.net/Dimmy/40cubjve/
You can achieve this by selecting the correct elements and changing their css code (it's in the docs).
Use d3 select function to select all the hierarchy you need:
d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
You can see some other nice example right here:
https://codepen.io/lucusc/pen/GZXBxX
But basically, go for the legend element and customize as you wish.
Related
I have this jsfiddle script that I am having trouble to do the following:
Respond to button click.
To show the box drawn on the canvas
I know that I could make this work if I add "z-index: -1" to
var sss = `
.container:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: url("${url}") 50% 50% no-repeat;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s
-o-transition: all 1s;
transition: all 1s;
}
`;
$(`<style id="dynastyle" type='text/css'>${sss}</style>`).appendTo("head");
But I don't want to do that for a peculiar reason that is too complicated to explain here.
Does anyone know how to get this to work? To be honest, I have no idea why the button is not clickable. enter link description here
Also, I need to be able to draw on top of the canvas. BTW, I don't want to draw the image in the canvas.
After tweaking it for a few hours, I finally got it working. Basically I needed to do the following:
enclosing the buttons in a div that has the position attribute and z-index'd (I used 1, I believe that the default value is 0, giving 1 to the buttons makes it bigger than the 0 for the background image).
place the canvas in a different div and use absolute position to overlay it on top of the div that has the background image and use z-index 1.
When all these two things are done, I can remove the z-index on the dynamic style for the background image. What has giving me a lot of trouble during this was that I keep forgetting to add the position attribute on the elements involved in the layering.
It seems like the height and fixedBarHeight cant both be used in a rowChart. Ids like to use fixedBarHeight so all the bars have the size I want, and the chart to be in a scrollable div so that the numbers of bars define the height of the chart. Is this possible?
#ialarmedalien made this block, which introduces a dc.axisChart to separate the axis of the row chart from the actual chart.
Then you can use conventional overflow-y: auto on the row chart div.
Here is a related issue on dc.js.
The dc.axis addon mentioned by #Gordon will solve the problem with the axis in a scrollable div, but not the problem asked. By default, the axis will only appear at the bottom, not before.
To solve this, add one div after the row chart div, this div will contain a copy of the axis.
<div id='row-axis'></div>
Then initialize this axis in the javascript
dc.axisChart('#row-axis')
.margins({ left: 10, top: 0, right: 10, bottom: 10 })
.height( 50 )
.width( 300 )
.dimension( dimension )
.group( group )
.elasticX( true );
Then change the margin of the row chart to 'glue' correctly with the axis. They also must have the same width.
.width(300)
.margins({ left: 10, top: 0, right: 10, bottom: 0 })
Then , in the css
div.dc-chart {
float: none;
}
Dont forget to include overflow-y: auto for the row style. Then you get:
This however doesnt solve the gap problem if your height is too large (or too small) compared to the fixedBarHeight.
But now your margin is zero, so the proper height is easy to calculate (but you must pass the gap value, which has 5 by default). Assuming N=chart.group().all().length, then do:
.fixedBarHeight(X)
.height(X*N + gap*(N+1))
Which will give you:
Worth mentioning that at this point you dont even need the fixedBarHeight anymore. Simply setting the height using XN + gap(N+1) will result in dc auto setting this value to X.
Based on: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1
Just add style="overflow-y: auto; height: 300px;" in your rowchart div. It should work.
I'm making an NVD3 line plot that will have significantly improved clarity if I can get markers to show for each data point instead of just the line itself. Unfortunately, I haven't been able to find an easy way to do this with NVD3 yet. I also considered using a scatter plot, but I couldn't figure out how to show connecting lines between the points. A third option I considered was to overlay a line and scatter plot, but this would show each series twice in the legend and may cause other unnecessary visual complications.
Is there a way to elegantly pull this off yet? Sample code of my formatting technique is listed below, but the 'size' and 'shape' attributes in test_data have no effect on the line plot with the current code.
test_data = [ { key: 'series1',
values: [
{ x: 1, y: 2.33, size:5, shape:"circle" },
{ x: 2, y: 2.34, size:5, shape:"circle" },
{ x: 3, y: 2.03, size:5, shape:"circle" },
] } ];
nv.addGraph(function() {
var test_chart = nv.models.lineChart();
test_chart.xAxis.axisLabel('Sample Number');
test_chart.yAxis
.axisLabel('Voltage (V)')
.tickFormat(d3.format('.02f'));
d3.select('#test_plot')
.datum(test_data)
.transition().duration(500)
.call(test_chart);
nv.utils.windowResize(test_chart.update);
return test_chart;
});
I also wanted to add markers in a project I was working on. Here is a solution my partner and I found.
First, you have to select all of the points in your chart and set the fill-opacity to 1:
#my-chart .nv-lineChart circle.nv-point
{
fill-opacity: 1;
}
Now your points will be visible. To adjust the size of each point you need to modify each one's "r" (for radius) attribute. This isn't a style so you can't do it with css. Here is some jQuery code that does the job. The 500 millisecond delay is so the code will not run before the chart is rendered. This snippet sets the radius to 3.5:
setTimeout(function() {
$('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5");
}, 500);
This puzzled me until I got help from the community:
css styling of points in figure
So here is my solution, based on css:
.nv-point {
stroke-opacity: 1!important;
stroke-width: 5px!important;
fill-opacity: 1!important;
}
If anyone has come here from rCharts, below is a rmarkdown template to create an nPlot with both lines and markers:
```{r 'Figure'}
require(rCharts)
load("data/df.Rda")
# round data for rChart tooltip display
df$value <- round(df$value, 2)
n <- nPlot(value ~ Year, group = 'variable', data = df, type = 'lineChart')
n$yAxis(axisLabel = 'Labor and capital income (% national income)')
n$chart(margin = list(left = 100)) # margin makes room for label
n$yAxis(tickFormat = "#! function(d) {return Math.round(d*100*100)/100 + '%'} !#")
n$xAxis(axisLabel = 'Year')
n$chart(useInteractiveGuideline=TRUE)
n$chart(color = colorPalette)
n$addParams(height = 500, width = 800)
n$setTemplate(afterScript = '<style>
.nv-point {
stroke-opacity: 1!important;
stroke-width: 6px!important;
fill-opacity: 1!important;
}
</style>'
)
n$save('figures/Figure.html', standalone = TRUE)
```
The current version of nvd3 use path instead of circle to draw markers. Here is a piece of css code that i used to show markers.
#chart g.nv-scatter g.nv-series-0 path.nv-point
{
fill-opacity: 1;
stroke-opacity: 1;
}
And I also write something about this in https://github.com/novus/nvd3/issues/321, you could find that how i change the shape of makers.
I don't know how to change the size of markers. Trying to find a solution.
Selectively enable points to some series using the following logic in nvd3.
//i is the series number; starts with 0
var selector = 'g.nv-series-'+i+' circle';
d3.selectAll(selector).classed("hover",true);
However an additional parameter( like say 'enable_points':'true') in the data would make better sense. I will hopefully push some changes to nvd3 with this idea.
For current version of NVD3 (1.8.x), I use this D3-based solution (scripting only, no CSS file or style block required):
nv.addGraph(function() {
// ...
return chart;
},
function() {
// this function is called after the chart is added to document
d3.selectAll('#myChart .nv-lineChart .nv-point').style("stroke-width",
"7px").style("fill-opacity", ".95").style("stroke-opacity", ".95");
}
);
The styles used are exactly the styles added by NVD3 by applying the "hover" class to each point (when hovered). Adjust them to your needs.
I'm facing a very odd issue here using Raphael.js to draw using SVG. If I set opacity on a triangle I've drawn, it cuts off the corners. It appears fine in Chrome and IE however. Using the same triangle drawing, if I change opacity to 1 or if I alter fill-opacity instead of just opacity, it renders correctly. Even more strange, creating a demo in jsFiddle using the same exact code and libraries renders fine. I double checked versions of Raphael.js, updated mine again just in case, etc.
Does anyone have any idea how this could be happening?
Here's the code I'm using:
var paper = Raphael(0,0, 800, 800);
var triangle1 = paper.path('M295,738 l0,-738 l500,0 Z')
var triangle2 = paper.path('M200,200 l0,-100 l100,0 Z')
triangle1.attr({
fill: '#fff',
'opacity': '0.5'
});
triangle2.attr({
fill: '#fff',
opacity: 1,
stroke: 'red'
});
Here is the jsFiddle: http://jsfiddle.net/crisp330/26PaS/
And here is what this looks like on my FF version 16.0.2: http://grab.by/hBWK
I even directly copied the iFrame source from jsFiddle (which looks correct in FF for me), and pasted it into a new HTML page... nope! Corners get cutoff again.
Any ideas as to whats going on?
Does anyone have any examples of input validation changing the input border color to red?
Thanks.
Erik
It's best to keep as much of the styling as you can in the style-sheets. Defined a
input.invalid {
border: solid red 1px;
}
and use .addClass("invalid") on your elements