I'm using the following piece of code to display a set of bar charts in jqPlot. However, I am getting 2 problems:
There is no padding on either side of the range values for the xaxis. The pad attribute seems to have no effect.
When the number of bars is large, the bars overlap on top of each other. The barPadding attribute seems to have no effect.
I looked at this link Having problems with jqPlot bar chart . The answer suggested there was to use a CategoryAxisRenderer. But since I'm using time-series data, I require the DateAxisRenderer.
Please help.
function plotBarGraph(data,myticks,series)
{
$("#placeholder").empty();
$.jqplot('placeholder',data,
{
//stackSeries:true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
barMargin:1,
barPadding:0.5
},
axes:
{
xaxis:
{
ticks:myticks,
tickInterval:10,
renderer:$.jqplot.DateAxisRenderer,
pad:2.5,
tickOptions:
{
formatString:'%d-%m-%y'
}
}
},
legend:
{
show:true,
labels:series
}
});
}
In this case if you do not want to use the approach mentioned in the link, you might want to play with min/max values for your date axis.
I think you might also find useful the approach to a similar sort of problem with padding where I chose to set ticks on creation and hide the unwanted ones after the plot is drawn.
Before I can be of any further assistance please provide a sample presenting your problem.
For your second problem, I ran into a similar issue. I set up a selection statement that widened the size of my chart depending on how many bars would be in it. I then made the parent div scrollable (called "dataHolder"), and that solved the problem.
// set div properties depending on how many sets of data are in the
//array so the view is sized properly
$("#chartDiv").html("").css("width", "750px"); // chartDiv's default settings
$("#tabs-6").removeClass("dataHolder").css("width", "900px"); // parent Div's default settings
if (dataArray.length > 10) {
$("#chartDiv").css("width", "1600px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
} else if (dataArray.length > 6) {
$("#chartDiv").css("width", "1200px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
}
I found a solution to use Date data with CategoryAxisRenderer. You have to configure de xaxis like follows:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.DateTickRenderer,
tickOptions: {
formatter: $.jqplot.DateTickFormatter,
formatString:'%d/%m'
}
}
}
}
I hope it helps! ;)
Related
How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]
I currently have a map loaded, and I have some bars on the map. I would like to include my variable text_toltip[i] in the tooltip so that the coordinates and text of the variable text_toltip[i] are displayed in each bar. how can I do it? I'm new in this library.
I know that there is an attribute called minHeight, which allows to establish a minimum height for the bars, but I would like to establish a maximum predetermined size for the bars and so the other sizes and colors of the bars are calculated. how can I do it?
series: [{
type: 'bar3D',
coordinateSystem: 'geo3D',
barSize:0.05,
minHeight:0.05,
data: data.map(function (item) {
return {
value: [item[0], item[1], item[2]],
label: {
show: false
}
}
}),
shading: 'lambert'
}]
https://plnkr.co/edit/Tdwwk8yKCi0fiY7I3AqK?p=preview
Thank you.
For this question,I read the Echarts's documentation and found a property belonging to "geo3D called "boxHeight" ,which can play the same role as you say "maxheight".I've tested it,no problem.
boxHeight
I would like to ask how can I position bottom labels using ChartJS library to display them like on the image below:
I tried to find it in official docs, but without the luck.
Many thanks for any advice.
In the xAxe ticks attribute, you can edit the userCallback property to change what is displayed on your labels. Furthermore, if you return an array of strings, every string will be displayed with line breaks.
So if you combine these two informations, you'll get the following :
options: {
scales: {
xAxes: [{
ticks: {
userCallback: function(tick, value, ticks) {
// `ticks` is the default display
// `.split("")` makes it an array of every character
return tick.split("");
}
}
}]
}
}
You can see a working example on this jsFiddle and here is its result :
I've made a MultiBarChart with NVD3.
It works, however, a colleague said I needed more space between each Australian state.
So, Tasmania further from Victoria etc.
Here is the data visualisation
I can not find a forum that explains this in non-developer language. I'm not a developer, but having a go.
Here is my code...
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 105, bottom: 30, left: 103})
.tooltips(true)
.showControls(false);
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg')
.datum(long_short_data)
.transition().duration(1400)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
Thanks you super kind and smart people!
No Need to use too much code for spacing just use below code :
var chart = nv.models.multiBarChart();
//added by santoshk for fix the width issue of the chart
chart.groupSpacing(0.8);//you can any value instead of 0.8
This is unfortunately something you can't configure in NVD3. However, you can change the height of the bars after the chart has been created to make it appear as if there's more space between them. The code to do this is simple:
d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3);
The default height is chart.xAxis.rangeBand()/2 -- you can adjust this as you see fit. The only thing to keep in mind when running this code is that NVD3 animates its elements, so not everything will be there in the beginning or values may be overwritten. You can solve this by waiting a small amount of time before calling that code using setTimeout:
setTimeout(function() {
d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3);
}, 100);
Just found this question while searching for a way to add more space between bars. Like Lars said, you can change the bar size after the chart has been drawn. However, when you increase the bar height without changing the space between each bar, it overflows. To add space between the bars you should use xRange:
var chart = nv.models.multiBarHorizontalChart().xRange([0, 125])
I am using the jqplot charting library from quite sometime.
I don't want to display the y2axis (i.e when I am working with multiple axes/series)
Went through the documentation and found that 'show: false' will not show the axis.
Link here: http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.show
But this doesn't seem to work.
Any help would be greatly appreciated.
Thanks in advance
Fixed it.
Here's what I did.
axes: {
yaxis: {
tickOptions: {
show: false
},
rendererOptions: {
drawBaseline: false
}
}
Setting tickoptions to false, hides the axis labels and ticks and drawBaseline: false hides the axis line.
Hope it helps.
You just need to specify showTicks : false
Here is a link on a working fiddle without yaxis ticks : http://jsfiddle.net/BLfRe/23/
I'm using jqplot and I wanted to hide the y2axis too in some case.
Using plot1.axes.y2axis.show = false; seems to work perfectly.
Can you put the piece of code you use in order to find what can cause your troubles?