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.
Related
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;
}
I have taken the d3 ZoomableTreeMap example from here and applied my own data to it. I am now trying to stop the text from overflowing outside of rectangle boundaries. As you can see in the following screenshot, this makes the vis very ugly and difficult to read, especially in the bottom right region.
I have tried setting the css property overflow: hidden for a few different elements but it seems to have no effect. Any idea why?
body {
overflow: hidden;
}
text {
overflow: hidden;
}
rect {
overflow: hidden
}
I have a jqgrid in which I have implemented the filter toolbar on top of the grid. Now I want to increase the height of all filter toolbar columns but I am not getting exact idea. I searched it on the web and got to know that it can be done by changing in .css file of the grid but not getting the exact code snippet.
Also I have to increase the height of grid rows.
$('#mytable').jqGrid('filterToolbar', {autosearch: true});
The height of the filter toolbar are set by some lines of ui.jqgrid.css. Default height is 20px. To increase it for example up to 30px you can add additional CSS style definitions to your page which overwrite the settings from ui.jqgrid.css. For example the following demo (and another one which uses no searching operations) uses the following styles
.ui-jqgrid .ui-search-table { height: 30px; }
.ui-jqgrid .ui-search-table .ui-search-oper { height: 30px; }
.ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th { height: 32px; }
It displays
I added to the demos the style described in the answer too just to improve the visibility of the input fields.
I'm using a sprite image to change the background on hover and click (the .keepImage class is for the click). It all works, but when the background picture changes it scrolls over to the correct position. Is there a way to do it without the scrolling motion?
JS:
<script>
$(document).ready(function(){
$("a.doing").click(function() {
$(this).siblings(".keepImage").removeClass("keepImage");
$(this).addClass("keepImage");
});
});
</script>
CSS:
a.doing {
width: 229px;
height: 202px;
margin-right: 8px;
background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0;
}
a.doing:hover, a.doing.keepImage {
background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0;
}
I think, somewhere in your css you have the transition property specified. Usually when you have a transition property specified like this: "transition: all 500ms ease;", the background position will change with a scrolling effect. If you want to prevent this scrolling from happening, then you can either remove the transition property completely, or you can use transition only for the properties you want to animate like - border, color etc.. but not background. If you can somehow provide a link to your page, or give the html mark up and css, it will help. Thanks.
I am currently using nvd3 for charting in my application. I have a problem in that if the div is hidden via display:none before the charts are rendered, the charts will throw an error, and upon "un-hiding" the div, I have to click on the charts to get them to render correctly. Is there any way to pre-render the charts even if the div is hidden? I have tried setting the width and height of the parent svg before calling the chart, but to no avail.
nv.addGraph(function () {
//chart setup code
d3.select("#chart svg").attr("width", 300).attr("height", 500);
d3.select("#chart svg").datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I figured out how to make a previously hidden chart render properly without needing to statically define the dimensions of the chart area:
NVD3 Charts not rendering correctly in hidden tab
This solution also depends on using JS to display the hidden content and at the same time trigger a resize event which forces NVD3 to resize the now visible chart to fill parent. In my case I didn't care about SEO so I used display:none; but visibility:hidden; would work too.
Just add this JavaScript:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
})
hidden.bs.tab is the event that fires after a new tab is shown as per the Bootstrap docs. This code fires a resize event after each tab change.
You can hide a chart – but still render the graph – using a class like this:
.out-of-sight-and-space{
visibility: hidden !important;
position: absolute !important;
top: 0 !important;
}
You should apply this to the parent of the svg, in your case #chart. When you want to show the chart, remove the class.