I have tried to make the font-size 0 but I still see the name
Does anyone have an idea?
Thanks
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '0',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
}
markerLabelStyle: {
initial: {
'font-size': '8',
}
Specify your font-size inside markerLabelStyle.
Related
I'm trying to insert data into var usa_markers from a json file, it looks OK but data is not displayed on the map.
this is my code:
// USA Map
$.get('map.json', function(data) {
var usa_markers = data;
console.log(usa_markers);
var usa_options = {
map: 'us_mill_en',
normalizeFunction: 'polynomial',
backgroundColor: '#fff',
regionsSelectable: false,
markersSelectable: false,
zoomButtons: false,
zoomOnScroll: false,
markers: usa_markers,
regionStyle: {
initial: {
fill: Colors.byName('blueGrey-200')
},
hover: {
fill: Colors.byName('gray-light'),
stroke: '#fff'
},
},
markerStyle: {
initial: {
fill: Colors.byName('blue-500'),
stroke: '#fff',
r: 10
},
hover: {
fill: Colors.byName('orange-500'),
stroke: '#fff'
}
}
};
$('#vector-map').vectorMap(usa_options);
});
The code that does work, looks like this:
var usa_markers = [{
latLng: [40.71, -74.00],
name: 'New York'
}]
solved it... just had to add JSON.parse to the data
I have a kendo pie chart and I want to display some dollar amount with thousand separators. Currently I am getting result as "$4312341.87" but I want it like this: "$4,312,341.87".
I also want to reduce the size of the pie chart without reducing the size of a complete div.
Here is my code,
$("#pie-chart").kendoChart({
legend: {
visible: false
},
dataSource: {
transport: {
read: {
url: "myService",
dataType: "json"
}
}
},
seriesDefaults: {
type: "pie",
startAngle: 0,
labels: {
/
template: "$${value}",
//template: '#= kendo.toString(value, "c") #',
format: "c",
visible: true,
font: "1.1em Arial, Helvetica, sans-serif;",
background: "transparent",
margin: 0,
padding: 0
}
},
seriesColors: ["#0066FF", "#FF9900", "#CC0000", "#004D71"],
series: [
{
field: "current"
}],
tooltip: {
visible: true,
template: "$${value}"
},
chartArea: { margin: 1 },
plotArea: { margin: 1 }
});
Any ideas will be helpful.
Thanks.
I want to have everything like this example
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-allowpointselect-pie/
but ion the application it works slightly different. When I am clicking on the segment it changes the color after animation. So it works like this example, if I will change the rows
from
`series: {allowPointSelect: true}`
to
series: {
allowPointSelect: true,
states: {
select : {
color: '#00FF00'
}
}
}
`
What is the problem, could someone help me to understand this problem
It sounds like you have different version of Highcharts - maybe some old version has that kind of bug?
Anyway, try to set color: null directly. See:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select : {
color: null
}
}
}
},
http://jsfiddle.net/MmJ4t/2/
If this won't help, the only solution may be to set for each point directly selected color:
series: [{
data: [{
y: 29.9,
states: {
select: {
color: 'red'
}
}
}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.
I need to put a image on center of titlebar in sencha touch 2 , but I can't! I touch js and CSS but it's impossible.... any idea, please? Thanks!
try this one it will help for You..
Its very simple...
title:'give image tag with location thats all'
You can try setTitle('<div class="logo"/>')
and
.logo {
background: url('../images/logo.png') no-repeat center;
width:100px;
height:40px
}
ImageTitleBar class.
Ext.define('myapp.controls.ImageTitleBar', {
extend: 'Ext.TitleBar',
alias: 'widget.imageTitleBar',
requires: [
'Ext.Img'
],
config: {
imageSource: ''
},
applyInitialItems: function(items) {
var me = this,
defaults = me.getDefaults() || {};
me.initialItems = items;
me.leftBox = me.add({
xtype: 'container',
style: 'position: relative',
layout: {
type: 'hbox',
align: 'center'
},
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.spacer = me.add({
xtype: 'component',
style: 'position: relative',
flex: 1,
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.rightBox = me.add({
xtype: 'container',
style: 'position: relative',
layout: {
type: 'hbox',
align: 'center'
},
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.titleComponent = me.add({
xtype: 'container',
hidden: defaults.hidden,
centered: true,
layout: {
type: 'hbox',
align: 'middle'
}
});
me.titleImage = me.titleComponent.add({
xtype: 'img',
width: 36,
height: 36
})
me.titleLabel = me.titleComponent.add({
xtype: 'title'
});
me.doAdd = me.doBoxAdd;
me.remove = me.doBoxRemove;
me.doInsert = me.doBoxInsert;
},
updateTitle: function(newTitle) {
this.titleLabel.setTitle(newTitle);
this.titleLabel.setHidden(!newTitle);
if (this.isPainted()) {
this.refreshTitlePosition();
}
},
updateImageSource: function(newImageSource) {
this.titleImage.setSrc(newImageSource);
this.titleImage.setHidden(!newImageSource);
if (this.isPainted()) {
this.refreshTitlePosition();
}
}
})