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.
Related
I'm using chartkick with chart.js in Ruby on Rails. I saw the documentation and some issues, but I can't find anything to solve my problem.
I'm setting my chart in html.erb file, like this:
<%=
line_chart $hash_chart,
options: {
max: $value.max+5,
min: $value.min-5,
allowDecimals: false,
colors: color_line,
xtitle: "Title of x axis",
ytitle: "Title of y axis",
discrete: true,
points: false,
width: "500px",
height: "500px",
scales: {
yAxes: [{
distribution: 'linear'
}],
xAxes: [{
distribution: 'linear',
type: 'category', (part of a configuration attempt)
categories: $time, (part of a configuration attempt)
ticks: {
stepSize: 10
}
}]
}
}
%>
The settings until height param works, but scales settings doesn't. The answer of this issue is exactly what I make (according documentation of Chart.js), but didn't work: Force display of ticks on xAxes using chartkick gem and chart.js. I tried to put this setting inside library brace too.
Basically, I want to set the ticks in x Axis and show just some labels of my array of datas. Is it possible to format this (using this type of file)?
You are using the wrong old v2 syntax of chart.js, the scales in v3 for example have to be configured like this
scales: {
x:{
ticks: {}
},
y: {
// Y config
}
}
EDIT:
Since you are on V2 your syntax of declaring axis is correct, make sure you dont run the latest version of chartKick since it uses v3.
distribution does not do anything unless your scale type is time. The stepSize only works for linear and time scales so you will need to change type: 'category' to type: 'linear' or if you are using time data to type: 'time' if you are using time data the stepsize has to be configured in the time sub part so you will need to change ticks to time
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.
I have following HTML code:
https://gist.github.com/enlilcz/4c8baf50f35838ed5bb2
And phantomJs inserts this whitespace:
Almost no styles is on page, and I believe this problem is not about styles.
Problem is in nested tables - there is table in table.
When is removed parent table - removed lines 23-26 and 230-233 in HTML
and whitespace just dissapear.
PhantomJs settings is:
{
outputFormat: "pdf",
html: "myHTML",
version: 2,
phantomParams: {
paperSize: {
format: "A4",
margin: "0px"
}
}
}
And when I substitute paperSize to
viewportSize: {
'width': 2750, // or any other dimensions
'height': 3850
}
it also starts to work, but I need to use paperSize...
Does anyone knows where is the problem?
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'],
}