Having a strange issue with jqplot. I've created a horizontal bar chart with 2 series and 5 labels; all populated with variables from a table.
var plot1 = $.jqplot('chart1', [
[[SERIESA[0],TITLE[0]], [SERIESA[1],TITLE[1]], [SERIESA[2],TITLE[2]], [SERIESA[3],TITLE[3]], [SERIESA[4],TITLE[4]]],
[[SERIESB[0],TITLE[0]], [SERIESB[1],TITLE[1]], [SERIESB[2],TITLE[2]], [SERIESB[3],TITLE[3]], [SERIESB[4],TITLE[4]]]], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
// Rotate the bar shadow as if bar is lit from top right.
shadow: false,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
This renders a lovely horizontal bar chart. I would like for the two series to be stacked under each label, but when I add the line
stackSeries: true,
above my seriesDefaults my bars all vanish. Everything else (labels, ticks, etc) remains the same. Is there something in addition to the stackSeries option I need to add?
I am not sure what might be the reason with your code, what you showed appears to be all right. Maybe something wrong with the way you set the data, but then again it wouldn't work at all.
Check out my example it might help you out.
I found a way to fix my problem (not entirely, but sufficiently for my need). This issue only occurs when I use custom lables pulled from somewhere else; if I use generic "1,2,3,4,etc." the graph stacks properly and shows data. Ideally I would have custom lables, but I can just put a simple table beside the graph to act as the axis labels.
Actually you can have custom labels, by adding tickt, for example:
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: -90
},
labelOptions: {
fontSize: '11pt',
},
ticks: ['tick 1', 'tick 2'],
}
Related
Is there a way to make the labels in a legend with horizontal direction wrap?
I made a simple example wtih the cars dataset where i transformed the categtories to generate longer strings in the Vega Editor:
Suppose I have more categories but also want to put the legend at the top/bottom to provide more horizontal space for the chart area.
Use the columns property of legend:
{
"legend": {
"orient": "top",
"direction": "horizontal",
"columns": 2
}
I've created a custom legend in a separate div.
The categories and their mapped colors in the Vega visualization can be accessed via the View API:
const colors = vegaView.scale('color').range();
const categories = vegaView.scale('color').domain()
I have this issue with my pre tag that I have been trying to resolve for a while now. I have tried almost 20 suggestions that I have found and none of them seem to work.
I have a server running with node.js that has 2 websites on it, technically it's one website with 2 layouts. If I try using pre-tag on my 1st layout, everything seems to be displaying normally, however on my 2nd page I guess extra tabs that I can't seem to locate.
Here is what I have:
<pre><pre><code >
<script>
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Blue", "Black", "Green", "Silver", "Red"],
datasets: [
{
label: "Votes for this color: ",
backgroundColor: ["#3e95cd", "#000000", "#35d90e", "#c0c0c0", "#c45850"],
data: [120, 384, 81, 223, 192]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Best Car Colors according to a 1000 votes survey'
}
}
});
</script>
</code></pre></pre>
and it is displaying like this:
Visuals
anyone have any idea what and why? I have tried unsetting all css and re-setting pre tag, but it does exactly the same thing.
Updated:
For all those who were and are still struggling with same issue, I found the problem! So I am using handlebars, and one the features is called "partials"
and I had a page that called on those partials, in this manner:
{{>crashcorse/intro_lessons}}
however it had some extra spaced before the {{> }} tag, due to auto formatting, removing these extra spaced seem to solved the issue.
We've just updated to the latest Highcharts version and now a few of our chart types have a new line connecting the tooltip to the point.
It's mainly obvious on charts with fixed tooltips.
Does anyone know how to remove this line without removing the border of the tooltip itself?
I have come up with a work around that involves setting the borderwidth of the tooltip to 0 and adding a rounded, bordered, coloured div to the tooltip using useHTML:true and disabling the shadow.
Though I dont want to do this for every chart as it seems a bit nasty.
This also affects bar and tree maps that I can see and I've trawled the documentation to no avail.
http://jsfiddle.net/mattscotty/bqw4bc4x/1/
Highcharts.chart('container', {
title: {
text: 'Fixed tooltip'
},
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
//Uncomment below to remove line, but this also removes tooltip border
//borderWidth:0,
//shadow:false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 106.4]
}, {
data: [194.1, 95.6, 54.4]
}]
});
Thanks in advance.
By default tooltip's shape is set to a callout which has a chevron/line pointing to the point. You can change the tooltip's shape to, e.g. rectangle - which does not have any connector.
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
shape: 'rect'
example: http://jsfiddle.net/bqw4bc4x/2/
The accepted answer only partially worked in Highstock. The connectors for the volume and indicator tooltips were suppressed, but I still had a connector from the DateTime box to the crosshair.
As an alternative to the shape: 'rect' hack, you can try:
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
split: false,
shared: true,
backgroundColor: 'rgba(255,255,255,0.8)'
These split: and shared: settings consolidate all the tooltip boxes into a single box. Provided that this meets your needs it seems to solve the connector issue.
Very odd design decision by Highcharts. The connectors are highly intrusive visually and I can't imagine that many designers will want to use them, but you can only disable them with a hack. What were they thinking?
I have used ag-grid ng in angular application. when number of columns exceeds not getting the horizontal scroll bar.
Are you sure is because of the number of columns? I had the same problem and the solution was take off the pinned option of every column.
For example if you have this:
{headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'}
it has to be:
{headerName: "Athlete", field: "athlete", width: 150}
You can just say,
gridOptions.api.sizeColumnsToFit();
This will set the columns width and hence remove horizontal scrolling.
Sure you haven't got the suppressHorizontalScroll property on the gridOptions object set to true have you ?
var gridOptionsTop = {
columnDefs: columnDefs,
// don't show the horizontal scrollbar on the top grid
suppressHorizontalScroll: false,
enableSorting: true,
};
Try putting in minWidth across EACH columnDefs in ag-grid, this makes sure each has a width prop associated with it, so then if it overflows, a horizontal scroll-bar appears below
columnDefs = [
{minWidth : 100, field: 'a', headerName: 'test1'},
{minWidth: 120, field: 'b', headerName: 'test2'},
{minWidth: 80, field: 'c', headerName: 'test2'}
]
What you may find if you use:
gridOptions.api.sizeColumnsToFit();
Is that some pages take quite a time to shuffle out into the display.
What I found is that there is a flag on the api to show whether the width is dirty or not. Therefore I implemented a method of checking this:
refreshTable() {
if (this.gridColumnApi.columnController && this.gridColumnApi.columnController.bodyWidthDirty) {
this.gridApi.sizeColumnsToFit();
if (this.refreshAttempts) {
this.refreshAttempts--;
setTimeout(() => {
this.refreshTable();
}, 100);
}
} else {
this.refreshAttempts = 0;
}
}
I put this in a service class with an initialiser, the refresh attempts is passed into that too. I suggest going around twice, you may also want to play with the timeout delay as you may not wish such a large one.
The reason this seems to be happening is on some more complex grids is that one shuffle results in a bit of work but the width is still dirty. The next and maybe next one will help.
Is there anyway to change default mouseover range? Simple example, I have a map with a bunch o tracks which are 1-2 px wide and are clickable. To click a track and display info you need to click very precisely which can be very annoying. Is there any way to change that tolerance? Just to show what I mean here's my example.
Thanks in advance.
http://members.upcpoczta.pl/w.racek/mapa.html
I'm afraid there is not much you can do about that except for upping the weight on your polylines. It's just the way SVG works, precise. What you also can do, to make selecting a polyline less irritating, is dropping the dasharray. It leads to irregular behaviour on hover because the gaps between the lines don't respond to the mouseover. When hovering you'll think you're on the line but you're not, that can also be very frustrating. See this testcase on Plunker and you'll understand: http://plnkr.co/edit/7WPTWN?p=preview
L.polyline([[0, -180],[0, 180]], {
'dashArray': [10, 50]
})
There is a solution however it's very hacky and performancewise i wouldn't recommend it. For each polyline, add another line, with exactly the same coordinates, make it transparent and set the weight to 10 or more. Hook the mouseovers on the transparent line and use their handlers to change the style of the visible line. Code example:
var visibleLine = L.polyline([[0, -180],[0, 180]], {
'weight': 2,
'opacity': 1,
'dashArray': 3
}).addTo(map);
var transparentLine = L.polyline([[0, -180],[0, 180]], {
'weight': 10,
'opacity': 0
})
.on('mouseover', function (e) {
visibleLine.setStyle({
'color': 'red',
'weight': 4,
'dashArray': 0
});
})
.on('mouseout', function (e) {
visibleLine.setStyle({
color: 'blue',
'weight': 2,
'dashArray': 3
});
})
.addTo(map);
Here's a working example on Plunker: http://plnkr.co/edit/jChoQ0?p=preview