I'm using nvd3js for angular (http://krispo.github.io/angular-nvd3/#/), and I would like to add a text right after the title (in this case the title is 98%) and the text to be added is "done". I was able to make it work so far, but I couldn't seem to make it work. This is my plunkr so far: http://plnkr.co/edit/KSdnFepUaI4MUCwAQJgP?p=preview
chart: {
type: 'pieChart',
height: 100,
width: 200,
donut: true,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: false,
showLegend: false,
title: '89%',
transitionDuration: 500,
tooltips: false,
donutRatio: 1
}
<nvd3 options="options" data="data"></nvd3>
<style>
.nv-pie-title {
text-anchor: middle;
font-size: 95px !important;
fill: #cccccc !important;
}
</style>
Related
I'm new to extjs and cant find a way to put a google StreetView inside a panel. Can someone point me in the right direction?. I have tried from interpreting an html inside a panel to the old GMapPanel but I doesn't work.
Currently I have this function where the panel shows up but doesn't show the street view
function () {
alert("mostrar street view");
new Ext.Panel({
id: "streetView",
xtype: "map",
constrain: true,
floating: true,
resize: true,
width: 600,
height: 400,
closable: true,
style: {
backgroundColor: "#fff",
//backgroundColor: '#000',
border: "1px solid black",
},
listeners: {
click: Ext.Window({
layout: "fit",
closeAction: "hide",
title: "GPanorama Window",
width: 400,
height: 300,
x: 480,
y: 60,
items: {
xtype: "gmappanel",
gmapType: "panorama",
setCenter: {
lat: 42.345573,
long: -71.098326,
},
},
}),
},
draggable: {
delegate: "div",
},
}).show();
I have also tried placing the property html as follows html:'CODE-BELOW'
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}
</style>
<script>
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14,
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{ position: fenway, pov: { heading: 34, pitch: 10 } }
);
map.setStreetView(panorama);
}
</script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initialize&libraries=&v=weekly"
async></script>
</body>
Despite the same configuration works as expected on Firefox, the icon is not displayed on Chrome.
Here is my actioncolumn configuration:
xtype : 'actioncolumn',
width : 95,
align : 'center',
sortable : false,
menuDisabled: true,
items : [{
iconCls : 'icon-delete',
tooltip : 'Delete',
handler: function(grid, rowIndex, colIndex, node, e, record, rowNode) {
// delete action
}
}]
Here is the .css rules for the actioncolumn and the related iconCls:
.x-action-col-icon {
color: #919191;
font-size: 18px;
height: 18px;
width: 18px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
line-height: 1;
}
.icon-delete:before {
font: 18px/1 FontAwesome;
color: #dd6550;
content: "\f056";
}
The screenshot for Chrome:
And for Firefox:
Please check this fiddle, I have checked it and found working fine in both Chrome and Firefox browser.
Note: As of now I have included font-awesome and css (provided by you) in index.html
Screenshots attached:
I want to create a doughnut highchart using angular js.
javascript is-
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -180,
endAngle: 180,
center: ['50%', '55%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.9,
dataLabels: {
enabled: false
}
}
]
}]
});
});
html is-
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
and I am including these scripts files -
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
How would I convert the above script in angular js. Can anyone help me on this?
I think some directive function needs to be created.I am new to custom directives in angular, can anybody help how we do this in angular for the doughnut highchart?
No need to convert the highcharts in angular as its already exists. No need to inject the dependencies. You can use it directly. Just inject the highcharts
files
<script src="script/chart/highcharts.js"></script>
<script src="script/chart/highcharts-more.js"></script>
<script src="script/chart/drilldown.js"></script>
<script src="script/chart/highcharts-3d.js"></script>
<script src="script/chart/exporting.js"></script>
as per need. and in controller use directly the Highcharts.chart({//code goes here}). Here is the link for donut highchart
I have a tab panel with two tabs.
I wish that both tabs would contain images alongside their text, yet the image on each tab would be shown only when the tab is clicked, otherwise it won't be shown (or replaced).
Can it be done?
You could probably do it by some css trick.For example,try this.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
id: 'tabPanel',
activeCls: 'activeTabCls',
renderTo: document.body,
items: [{
title: 'Foo',
}, {
title: 'Bar'
}]
});
Your CSS could be something like:
.activeTabCls .x-tab-default-top-active{
background-image: url(http://sencha.com/favicon.icon)!important;
background-position-y: 4px;
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
}
Note : Not Tested.Some modifications could be needed.
I am new to extjs . I am trying to add tooltip preferably css based to the column headers .
How can I go about adding custom tooltip to the extjs column header using css? the extjs default way doesnt seem to work.
I tried using the custom css tooltip for the header and it didnt work .. Is it at all possible in extjs to custom tooltip on the header?
Thanks
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
splitHandleWidth: 10,
columnLines: true,
viewConfig: {
emptyText: 'No images to display'
},
renderTo: containerEl,
columns: [{
text: ''+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span>',
flex: 10,
dataIndex: 'CName',
tooltip: 'C Name Some name test',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}, {
text: getString('notif.instance'),
flex: 30,
dataIndex: 'IDisplayName',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}]
});
CSS
.ttip {
border-bottom: 0px dotted #000000; color: #000000; outline: none;
/* cursor: help; */
text-decoration: none;
position: relative;
}
.ttip span {
margin-left: -999em;
position: absolute;text-decoration: none;
}
.ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;}
.ttip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 9999999;
margin-left: 0; width: 250px;
}
.ttip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.ttip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
So, I noticed you provided code for your store, but you are asking a question about the grid, which is a different component. Make sure you understand the relationship between the grid and the store. You should also use a Model definition instead of configuring fields on the store - which is the old way of doing things.
Having said that, I did come up with an interesting solution to your question: how to add a tooltip to the column header.
The column definition takes in a 'text' property that gets converted to the column header. The docs state that HTML tags are allowed, which means you can set a tooltip this way:
text: '<span data-qtip="hello">First Name</span>'
where data-qtip provides the text for the tooltip.
Note that tooltips must be enabled via:
Ext.QuickTips.init(); in your app.
To try other things use the docs Live Preview feature to quickly test out different configs and see them in action. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column
UPDATE: a tooltip property is now(since 4.1x) available on column config. Use that.
In the definition of your columns you only need set the tooltip parameter, like this:
var cm = new Ext.grid.ColumnModel([
{
xtype: 'column',
header: '<img src="../images/lupa.png">',
align: 'center',
dataIndex: 'consultar',
width: 50,
sortable: true,
menuDisabled: true,
tooltip: 'Permisos para consultar, si lo desactiva el usuario no verá el modulo'
}
]);
I hope this help you