I'm using jqbargraph to show data from a Model, it's working fine but the axis values are overlapping.. is there a way to show them as Vertical so they will take less space ?
i checked the jqbargraph properties but there is no specific property to do that.
Thanks
jqbargraph adds a class to each label that is "graphLabel" + id of the element you added the graph to. For example if you do:
$('#divForGraph').jqBarGraph({ data: arrayOfData });
the class of the labels will be .graphLabeldivForGraph
So, you can transform those labels with css
.graphLabeldivForGraph {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
padding-left:10px;
padding-top:5px;
}
Related
I am trying to recreate Parallel Coordinates example.
Everytime an axis is brushed, I would like that particular axis to be highlighed by a change in color.
How do I do this?
Here is a screenshot of what I'm trying to implement:
I dont have a lot of experience with D3.js, so any help is appreciated.
Thanks in advance.
Here's one way to highlight the brushed dimensions in a parallel chart:
https://bl.ocks.org/shashank2104/92bed39893773d085794be54b73c233e/56b1c0df3fa1579c6a6f60ef9f660e99901af935
Code changes:
Added dimension name as ID to the <g> element:
.enter().append("g")
.attr("class", "dimension").attr('data-id', function (d) { return d;})
In the brushed function, based on the computed active dimensions, a selected class can be added. (this can also be done in the brushend cb)
// highlight brushed axes
dimensions.forEach(function(dimension) {
svg.select('g[data-id="'+dimension+'"]').classed('selected', actives.indexOf(dimension) > -1);
});
Based on the class applied in the previous step, use CSS to highlight the brush path (feel free to change this as per your requirements):
/* selected brushing dimension */
g.dimension.selected .axis path.domain {
stroke: red;
stroke-width: 2px;
}
Let me know if you have any questions. Hope this helps.
This is my result belowing:
But what I want is put every bars together like this:
And follow the belowing is my major code about legend:
The most traditional (and versatile) way for creating such legends among D3 community is using <text> and <rect> SVG elements (which you can position the way you want). But once you're using HTML <li>, try one of these two approaches in your CSS:
li {
display: inline;
}
Or
li {
float: left;
}
My jqplot graphs have, sometimes, long texts as tick text.
I'd like to ask if is any way to short that text (using jqplot) and to add a tool tip with full text on the tick label?
I hope this will help someone looking for the same solution, Originally answered by me here.
The hover is not detecting because of the z-index of the canvas which lies on top of the whole chart. I did the following and now it's shorten the tootip by CSS ellipsis and show the tooltip with full name on hover.
Based on the Gyandeep's answer, the exact JS and CSS I used are,
Javascript:
$('div.jqplot-xaxis-tick').each(function (i, obj) {
$(this).prop('title', ($(this).text()));
$(this).css('z-index', 999); // this is important otherwise mouseover won't trigger.
});
CSS:
.jqplot-xaxis .jqplot-xaxis-tick {
position: absolute;
white-space: pre;
max-width: 92px; // Change it according to your need
overflow: hidden;
text-overflow: ellipsis;
}
The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.
I have a jqplot object that has x-axis tick marks/labels rendered on bottom. Basically, there is a stack of charts, all using the same x-axis. I would like to reclaim the bottom axis area from the middle charts for the plot lines.
How can I dynamically relocate the x-axis to top (i.e., northward)
How to make the x-axis label go away? For this I tried
plotobject.axes.xaxis.showLabel = false;
plotobject.replot();
but that seems to have no visible effect. plotobject is what's returned by the original $.jqplot() call and I am using $.jqplot.DateAxisRenderer for xaxis.renderer. I have access only to the plot object.
Thanks
This simple CSS solution is working for me to put the x-axis labels on top of the chart.
.jqplot-xaxis {
position: relative;
top: -30px;
}
well, the label for each axis (which is the axis title) has it's own renderer, and thus it's own options. I use the plugin one ( http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html ) but also the default has a show: true/false setting. ( http://www.jqplot.com/docs/files/jqplot-axisLabelRenderer-js.html )
it should look something like this:
axes: {
xaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Dates',
labelOptions: {
show: true,
fontSize: '10pt'
},
}
}
For putting the x-axis on top, I'm not sure what your problem realy is, but I try to select it with jquery and set it's z-index to something high to bring it on top. Take a look at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html for some selection ideas.
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!