I am trying to apply a title to YAxis of my chart, it looks smudged (overlaps on each other) on the screen, whereas my other titles looks just fine.
My code :
yAxis: [{
title: {
text : 'User Count',
margin : 60,
style : {
fontWeight : '100%',
fontFamily : 'verdana'
}
}
}],
series: [{
data: [1,2,3,4,5,6,3,8,1,10,4,11]
}]
});
});
Sample: I get this in IE9, but not in FF and chrome. Please suggest a solution. I have been stuck with this for months. Thanks in Advance.
Related
I wanted to remove a title that appears on Highchart when I leave the mouse on the graph. I already tried to remove the title and it still appears.
enter image description here
I've tried using Title inside the chart and outside and nothing happens. Put the text = '' and it doesn't work either.
Example:
{
chart: {
type: 'column',
marginBottom: 40,
title: {enabled: false},
},
xAxis:{
labels:{
style:{
color: 'black',
fontSize:'11px'
}
}
}
Thanks
The title options object should not be defined inside the chart options.
See: https://jsfiddle.net/BlackLabel/ayjw6pom/
Highcharts.chart('container', {
title: {
text: ''
},
series: [{
data: [29.9, 71.5, ...]
}]
});
API: https://api.highcharts.com/highcharts/title.text
If this wouldn't help please reproduce your issue on some online editor which I could work on.
I am using Kendo pie chart in onsenui framework and it works great if i use
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}]
}],
tooltip: {
visible: true,
format: "{0}%"
}
});
}
I have my own JSON object which is $scope.localData
and when i replace the JSON data (which is inside series) with my localData, the chart doesn't work. Any help would be appreciated. Thank you guys.
Here is my codepen
host : varanjith.com
username : demo
password : demo
Update #1
Brief Intro about the app, It gets the JSON object from web and store it in the local database, based on that data the pie chart is generated. Everything is working fine other than that chart. Please help
Update #2
I think i found out the problem, but still not sure, the kendo pie chart uses json as in the format
[{category:"Asia", value:87},{category:"Europe", value:97}]
but the $scope.localData has the value [{"category":"Asia", "value":87},{"category":"Europe", "value":97}]
I think that double quotation marks is the problem. Can anyone tell me how to remove it?
The data you're feeding to the Pie Chart looks malformed. I tried redefining the data with:
var data = $scope.localData.map(function(item) {
return {
category: item.Country,
value: item.Rating1
};
});
Also, I changed the template string back to "#= category #: \n #= value#%". After doing that it worked fine.
The tooltip in my Highchart is behaving strangely. It is living its own life. It doesn't show the tooltip of the point on which I hover, but shows the tooltip of any point randomly.
Here is a JSFiddle example: http://jsfiddle.net/AeV7h/9/
$(function () {
var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null, MinValue: null, MaxValue: null, Decimals: 2 };
$('#container').highcharts({
chart: {
height: 700,
width: 400,
plotBorderWidth: 1,
plotBorderColor: '#E4E4E4',
},
xAxis: {
title: {
useHTML: true,
text: param.Name + "( m/s )",
},
gridLineWidth: 1,
min: param.MinValue,
max: param.MaxValue,
gridLineDashStyle: 'Dot',
tickInterval: param.TickInterval
},
yAxis: {
title: {
text: 'Depth(m)',
},
reversed: true,
tickLength: 50,
gridLineDashStyle: 'Dot'
},
title: {
text: null,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return this.y;
}
},
series: [{
name: param.Name,
data: data,
color: param.Color,
dashStyle: param.LineStyle,
lineWidth: param.LineWidth,
type: "line"
}]
});
});
Can anyone help and tell me why it is behaving like this, and how I can fix it?
Your problem is that your data is not sorted by increasing X value. If you read the Series.data documentation it says that (API):
Note data must be sorted by X in order for the tooltip positioning and data grouping to work.
You should always sort your data like this before handing it over to Highcharts. Highcharts doesn't sort any data. Doing it by hand for your example your data should look like this:
var data=[[16,10],[24,3],[28,0]];
As in this JSFiddle demonstration, and everything works as intended.
I'm using jqplot in my website using the following code
$(document).ready(function(){
var xticks = [ '0', '1', '2', '3', '4','5', '6', '7', '8', '9', '10','11', '13','14','15','16','17','18','19','20','21','22','23'];
var data1 = [2,4,6,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,6,3,1,2,2,0,0,0,0,0,0,2,5,6,6,7,6,6,6,5,7,7,6,1,0,0,0,0];
var plot2 = jQuery.jqplot ('chart1', [data1],
{
animate : true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot : true,
seriesDefaults : {
pointLabels : {
show : true,
hideZeros : true,
location : 's',
ypadding : 12
},
renderer : $.jqplot.BarRenderer,
rendererOptions : {
varyBarColor : true,
barPadding : -20
}
},
axes : {
xaxis : {
label : 'X axis',
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
renderer : $.jqplot.CategoryAxisRenderer,
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
ticks : xticks,
tickOptions : {
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
angle : -90,
fontSize : '10pt'
}
},
yaxis : {
min : 0,
//max : 30,
tickInterval:5,
label : 'Y axis',
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
// labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions : {
fontFamily : 'OpenSans-Regular',
textColor : '#414141',
formatString : '%.2f',
fontSize : '10pt'
}
}
},
cursor : {
show : true,
zoom : false,
showTooltip : true,
followMouse : true,
useAxesFormatters : true
/*
* To show both x and y values showTooltipDataPosition :true,
* showVerticalLine:true, useAxesFormatters:true
*/
},
legend : {
renderer : $.jqplot.EnhancedLegendRenderer,
show : true,
showSwatches : true,
fontFamily : 'OpenSans-Regular',
marginTop : '100px',
textColor : '#414141',
rowSpacing : '14px',
border : 'none',
background : 'transparent',
placement : 'outsideGrid'
},
grid : {
background : 'transparent',
gridLineColor : '#c5c5c5'
},
seriesColors : [ '#F6BD0F' ],
series : [ {
seriesColors : [ "#D85252" ],
//label : 's1',
color : [ '#D85252' ]
}, {
seriesColors : [ "#F6BD0F" ],
label : 's2',
color : [ '#F6BD0F' ]
} ],
highlighter : {
show : false
}
}
);
});
It works fine in Firefox and IE9 without any issues as in figure1. But in IE8 it looks very bad as in figure2.
I have included excanvas.js as follows
<script type="text/javascript" language="javascript" src="jQuery/jQplot/excanvas.min.js"></script>
IE9 and Firefox
IE8
Here is the working jsfiddle
Can anyone tell me how can I resolve this issue? What I'm doing wrong here? Any help will be appreciated..
Finally I got the answer after research for a day
The issue was with the background property used in jqplot options.
grid : {
background : 'transparent',
gridLineColor : '#c5c5c5'
}
I fixed it by replacing 'transparent' using 'rgba(255, 255, 255, 0.1)' in my code and it is working in all browsers including IE8. The same thing can be achieved by using background:url('blank.gif')
I got help from the following links
Highcharts chart option backgroundColor:'transparent' showing black on IE 8
IE CSS bug background color transparent behaves differently to background-color
I have create a floating panel above a panel and have added carousel to the floating panel.
Now the problem is that while carousing i can see all the items that were added. I want only one item to get displayed on the floating panel while others to be hidden and not be displayed outside the floating panel. How can i achieve this?
Thanks in advance.
Code:
var App = new Ext.Application({
name: 'CarouselDemo',
useLoadMask: true,
launch: function () {
overlayView.show();
}
});
var overlayView = new Ext.Panel({
floating: true,
centered: true,
styleHtmlContent: true,
width:600,
height:600,
items: [
{
xtype : 'carousel',
ui : 'light',
direction: 'horizontal',
items: [
{ html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>'
},
{ html: 'Card #2'
},
{ html: 'Card #3'
}
]
}]
});