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.
Related
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.
I have a portal (attached image) in which when I click a button I get some images in a panel (right side). Now I want when I click on each of this image to get an alert box with the image id. How can I access this? Till now I have done everything using jquery and now I am in the process of migration. This is part of my code:
items: [{
xtype: 'tabpanel',
width: 600,
activeTab: 0,
flex: 2,
layout: {type: 'fit'},
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScroll:true,height:500 }],
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScroll:true,height:500 }]
}]
}]..
You can add listener to an image element, when you append it
{
xtype: 'image',
src: 'some-path',
listeners: {
el: {
click: function() { alert(this.id); }
}
}
}
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.
I have followed through a tutorial on the CKEditor website but I can't figure out why my custom tool bar is not appearing on the CKEditor. Originally I had all of the default toolbar on, but now it has reverted to just being a text area. Can someone help please? The code is as follows:
$(function () {
CKEDITOR.replace('txtBodyText',
config.toolbar=[
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'list', items: ['NumberedList', 'BulletedList'] },
{ name: 'Indent', items: ['Outdent', 'Indent'] },
{ name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'links', items: ['link', 'unlink;'] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule'] },
{ name: 'styles', items: [ 'Font', 'FontSize'] },
{ name: 'Clipboard', items: ['Cut', 'Copy', 'PasteText', 'PasteFromWord'},
{ name: 'undo', items: [ 'Undo', 'Redo'] },
{ name: 'tools', items: [ 'Maximise'] },
{ name: 'mode', items: [ 'Source'] }
]);
})
<td class="prompt">Body</td>
<td>
<%: Html.TextArea("txtBodyText", Model.EmailTemplate.BodyText)%>
</td>
That doesn't look like a valid second argument to the replace function. This might be of assistance:
var configObject = {};
configObject.toolbar = [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
'/',
[ 'Bold', 'Italic' ]
];
CKEDITOR.replace('txtBodyText', configObject);
See the difference between the two? The 2nd argument to replace needs to be a valid JavaScript object. There was a typo in your example: see unlink;? That's not really correct :).
I had an extra pair of brackets at the bottom. If there is a problem in the Javascript it will not run the whole segment of code. So it's best to check!
CKEDITOR.replace() accepts the ID of the element to replace with the editor and the config. However, you do not need to write:
CKEDITOR.replace( 'txtBodyText',
config.toolbar=...
it's enough to just use toolbar, without the preceding config. And also, as pointed above, your JavaScript code is incorrect (notice your = instead of :):
CKEDITOR.replace( 'txtBodyText', {
toolbar: ...
} );
See how it is done in the samples from the CKEditor SDK, e.g. the Custom Toolbar sample. Scroll down to get the complete source code of the sample.
Don't forget to clear your browser cache after any editor configuration change!
I use ExtDesigner designed a window, and the generated json is like:
{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [
{
xtype: 'form',
bodyStyle: 'padding: 10px',
title: '',
items: [
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '名称'
},
{
xtype: 'radiogroup',
anchor: '100%',
fieldLabel: '广告类型',
items: [
{
xtype: 'radio',
boxLabel: '文字'
},
{
xtype: 'radio',
boxLabel: '图片'
}
]
}
]
}
]
}
I copied it but I don't know how to use it. I don't find a method to convert it to an extjs component. How to do it?
PS: I use extjs 2.2
There are two ways to create an ExtJS component.
create the component explicitly, for example: new Ext.Window({...});. This way you get the component right away, meaning the event listeners, the extra methods...etc.
the second way is lazy loading, which is by specifying the xtype of a component in a plain javascript object. This is exactly what you have.
To make the second way work, you need to include your xtype-javascript-object in an ExtJs container, and the container will know how to render it at the appropriate time.
for example :
Ext.onReady(function(){
new Ext.Viewport({
layout : 'fit',
items : [{
xtype: 'window',
height: 477,
width: 666,
layout: 'fit',
title: '添加广告位',
items: [...]
}]
});
});
Think you are looking for something like this. This will show your window in a pop up.
var win = new Ext.Window({
width:400
,id:'autoload-win'
,height:300
,autoScroll:true
});
win.show();