I was trying to implement generate Excel from jQuery datatable. The icons in the flash video were in disabled state except print option. What could be the issue?
<style type="text/css" media="screen">
#import "/public/stylesheets/TableTools.css";
.dataTables_info { padding-top: 0; }
.dataTables_paginate { padding-top: 0; }
.css_right { float: right; }
#example_wrapper .fg-toolbar { font-size: 0.8em }
#theme_links span { float: left; padding: 2px 10px; }
</style>
<script>
$(document).ready( function() {
oTable = $('#example').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/public/swf/copy_cvs_xls_pdf.swf"
},
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
}
);
});
This issue is usually caused by the fact that the flash component is not loaded correctly. You should set the path manually like this:
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
}
} );
Upgrade the datatables and TableTools it's working fine.
Related
So I have seen this pie menu generator which gives you an HTML, CSS and JS code and I wanted to use it in my Vue 3 project. I am new to vue and this was how I imported it.
here is the link to the pie menu generator: http://pmg.softwaretailoring.net/
I did this in my wrapper component. Somehow this bought many errors in which I think is because of how I imported the JS library.
<template>
<div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" #blur="close">
<div id='piemenu' data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-marker
data-wheelnav-markerpath='PieLineMarker' data-wheelnav-rotateoff data-wheelnav-navangle='270'
data-wheelnav-cssmode data-wheelnav-init>
<div data-wheelnav-navitemtext='0' onmouseup='alert("Place your logic here.");'></div>
<div data-wheelnav-navitemtext='1' onmouseup='alert("Place your logic here.");'></div>
</div>
</div>
</template>
<script>
import '../assets/raphael.min.js'
import '../assets/raphael.icons.min.js'
import '../assets/wheelnav.min.js'
var piemenu = new wheelnav('piemenu');
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
piemenu.createWheel();
export default {
name: 'CmpContextMenu',
props: {
display: Boolean, // prop detect if we should show context menu
},
data() {
return {
left: 0, // left position
top: 0, // top position
show: false, // affect display of context menu
};
},
computed: {
// get position of context menu
style() {
return {
top: this.top + 'px',
left: this.left + 'px',
};
},
},
methods: {
// closes context menu
close() {
this.show = false;
this.left = 0;
this.top = 0;
this.myTrigger = false;
console.log('trigger false');
},
open(evt) {
this.show = true;
// updates position of context menu
this.left = evt.pageX || evt.clientX;
this.top = evt.pageY || evt.clientY;
},
},
};
</script>
<style>
.context-menu {
position: fixed;
z-index: 999;
cursor: pointer;
}
#piemenu>svg {
width: 100%;
height: 100%;
}
#piemenu {
height: 400px;
width: 400px;
margin: auto;
}
#media (max-width: 400px) {
#piemenu {
height: 300px;
width: 300px;
}
}
[class|=wheelnav-piemenu-slice-basic] {
fill: #497F4C;
stroke: none;
}
[class|=wheelnav-piemenu-slice-selected] {
fill: #497F4C;
stroke: none;
}
[class|=wheelnav-piemenu-slice-hover] {
fill: #497F4C;
stroke: none;
fill-opacity: 0.77;
cursor: pointer;
}
[class|=wheelnav-piemenu-title-basic] {
fill: #333;
stroke: none;
}
[class|=wheelnav-piemenu-title-selected] {
fill: #fff;
stroke: none;
}
[class|=wheelnav-piemenu-title-hover] {
fill: #222;
stroke: none;
cursor: pointer;
}
[class|=wheelnav-piemenu-title]>tspan {
font-family: Impact, Charcoal, sans-serif;
font-size: 24px;
}
.wheelnav-piemenu-marker {
stroke: #444;
stroke-width: 2;
}
</style>
I am new to Arcgis maps and using ArcGIS Javascript 4.2 library. Currently the features are showing up on the map and I am trying to go to feature and open it's popup programmatically. below is my code to query the features which is working fine.
var query = layer.createQuery();
query.where = "key= " + dataItem.key+ "";
query.returnGeometry = true;
query.returnCentroid = true;
query.returnQueryGeometry = true;
layer.queryFeatures(query).then(function (results) {
//I am getting the feature results here.
//trying to navigate to feature and open popup
});
Note: I tried using the following code from documentation which is working fine but I don't have the center as the features are polylines in my case.
view.goTo({center: [-126, 49]})
First, View goTo method has several options, including just using a geometry wich I think would be a better option for your case, zoom to a polyline.
Second to open the popup you just need to use the open method and you can pass there the features to show.
Check this example I put for you, has both suggestions,
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#selectDiv {
height: 30px;
width: 100%;
margin: 5px;
}
#cableNameSelect {
height: 30px;
width: 300px;
}
#cableGoToButton {
height: 30px;
width: 100px;
}
#viewDiv {
height: 500px;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
</head>
<body>
<div id="selectDiv">
<select id="cableNameSelect"></select>
<button id="cableGoToButton">GO TO</button>
</div>
<div id="viewDiv">
</div>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
const cableNameSelect = document.getElementById("cableNameSelect");
const cableGoToButton = document.getElementById("cableGoToButton");
const map = new Map({
basemap: 'hybrid'
});
const view = new MapView({
container: 'viewDiv',
map: map,
zoom: 10,
center: {
latitude: 47.4452,
longitude: -121.4234
}
});
view.popup.set("dockOptions", {
buttonEnabled: false,
position: "top-right"
});
const layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/cables/FeatureServer/0",
popupTemplate: {
title: "{NAME}",
outFields: ["*"],
content: [{
type: 'fields',
fieldInfos: [
{
fieldName: "length"
},
{
fieldName: "owners"
},
{
fieldName: "rfs"
}
]
}],
}
});
map.add(layer);
layer.queryFeatures({
where: "1=1",
outFields: ["Name"],
returnGeometry: false
}).then(function(results) {
for(const graphic of results.features) {
cableNameSelect.appendChild(new Option(graphic.attributes.Name, graphic.attributes.Name));
}
});
cableGoToButton.onclick = function() {
if (!cableNameSelect.value) {
return;
}
cableGoToButton.disabled = true;
layer.queryFeatures({
where: `Name='${cableNameSelect.value}'`,
outFields: ["*"],
returnGeometry: true
}).then(function (results) {
cableGoToButton.disabled = false;
if (!results.features) {
return;
}
view.goTo(results.features[0].geometry);
view.popup.open({
features: [results.features[0]]
})
})
};
});
</script>
</body>
</html>
I am using a multiline option on a label (using \n to delineate lines) and would like to know if it is possible to use a different font size for the second line (in the example having 'test' be a smaller font size
if you really need this, I would use the cytoscape-node-html-label extension (you can find it here). According to the documentation, you can use this code to get a multiline multistyle label:
document.addEventListener("DOMContentLoaded", function() {
var sampleDataset = [{
group: "nodes",
data: {
id: "16150999",
name: "xps plrmr",
type: 0,
code: "7704322293"
},
classes: "class1"
}];
var mainNodeDiameter = 20;
var otherNodesDiameter = 17;
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
minZoom: 0.1,
maxZoom: 3,
zoom: 0.5,
style: [{
selector: "node", // default node style
style: {
width: mainNodeDiameter + "px",
height: mainNodeDiameter + "px",
"overlay-padding": "5px",
"overlay-opacity": 0,
"z-index": 10,
"border-width": 2,
"border-opacity": 0
}
},
{
selector: "node[type=0]",
style: {
"background-color": "#7CACC2"
}
},
{
selector: "edge", // default edge style
style: {
"curve-style": "unbundled-bezier",
"control-point-distance": 30,
"control-point-weight": 0.5,
opacity: 0.9,
"overlay-padding": "3px",
"overlay-opacity": 0,
label: "data(title)",
"font-family": "FreeSet,Arial,sans-serif",
"font-size": 9,
"font-weight": "bold",
"text-background-opacity": 1,
"text-background-color": "#ffffff",
"text-background-padding": 3,
"text-background-shape": "roundrectangle",
width: 1
}
},
{
selector: "node:selected",
style: {
"border-width": 2,
"border-style": "solid",
"border-color": "#3f3f3f",
"border-opacity": 1
}
}
],
layout: {
name: "random"
},
elements: sampleDataset
}));
// add html labels to cytoscape
cy.nodeHtmlLabel([{
query: "node[type=0]",
cssClass: "cy-title",
valign: "top",
valignBox: "top",
tpl: function(data) {
return '<div><p class="cy-title__name">' + data.name + '</p><p class="cy-title__info">' + data.code + "</p></div>";
}
}]);
// fit cy to viewport
cy.ready(function () {
cy.fit();
cy.center();
});
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
float: left;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
p {
margin: 0;
padding: 0;
}
.cy-title {
text-align: center;
font-size: 13px;
width: 130px;
color: #2b2b2b;
background: radial-gradient(#87CeFa, #7B68EE);
text-transform: capitalize;
}
.cy-title__name {
font-size: 1.5em;
}
.cy-title__info {
font-size: 0.9em;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-node-html-label#1.1.3/dist/cytoscape-node-html-label.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
This way, you can use html styling for each label.
The node-html-label is a good one, as Stephen mentioned. You also may be interested in the popper extension:
https://www.npmjs.com/package/cytoscape-popper
The popper extension is a bit more flexible, but the html-label one is a bit more automatic. Take a look at both and see which suits your project best.
Always check the extension list for an up-to-date list: http://js.cytoscape.org/#extensions
I am working on a cytoscape.js graph in browser. I want to show some information of nodes (e.g. node label) as the mouse hovers over the nodes in a cytoscape graph. The following code is working for console.log() but I want to show the information in the browser:
cy.on('mouseover', 'node', function(evt){
var node = evt.target;
console.log( 'mouse on node' + node.data('label') );
});
Please help !
Cytoscape.js has popper.js with tippy. I can give you a working exapmle for popper.js:
popper with tippy:
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
content: "data(id)"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "a"
}
}, {
data: {
id: "b"
}
}],
edges: [{
data: {
id: "ab",
source: "a",
target: "b"
}
}]
},
layout: {
name: "grid"
}
}));
function makePopper(ele) {
let ref = ele.popperRef(); // used only for positioning
ele.tippy = tippy(ref, { // tippy options:
content: () => {
let content = document.createElement('div');
content.innerHTML = ele.id();
return content;
},
trigger: 'manual' // probably want manual mode
});
}
cy.ready(function() {
cy.elements().forEach(function(ele) {
makePopper(ele);
});
});
cy.elements().unbind('mouseover');
cy.elements().bind('mouseover', (event) => event.target.tippy.show());
cy.elements().unbind('mouseout');
cy.elements().bind('mouseout', (event) => event.target.tippy.hide());
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/popper.js#1.14.7/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper#1.0.4/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#4.0.1/umd/index.all.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#4.0.1/index.css" />
</head>
<body>
<div id="cy"></div>
</body>
Hi guys the Stephan's answer won't work using module based code like in React.js so I'm giving you an alternative without tippy
popper.css // popper style
.popper-div { // fill free to modify as you prefer
position: relative;
background-color: #333;
color: #fff;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
outline: 0;
padding: 5px 9px;
}
App.js
import cytoscape from "cytoscape";
import popper from "cytoscape-popper"; // you have to install it
import "./popper.css";
cytoscape.use(popper);
const cy = cytoscape({....});
cy.elements().unbind("mouseover");
cy.elements().bind("mouseover", (event) => {
event.target.popperRefObj = event.target.popper({
content: () => {
let content = document.createElement("div");
content.classList.add("popper-div");
content.innerHTML = event.target.id();
document.body.appendChild(content);
return content;
},
});
});
cy.elements().unbind("mouseout");
cy.elements().bind("mouseout", (event) => {
if (event.target.popper) {
event.target.popperRefObj.state.elements.popper.remove();
event.target.popperRefObj.destroy();
}
});
I have a working chartist Line chart and I have configured the plugins as suggested in documentations. I don't get any errors when loading the page. Its just that nothing gets reflected on the chart according to plugin. I have added two plugins - they don't show any error and my line chart shows perfectly fine.
But I see no effect of those plugins - tooltip plugin and pointlabel plugin.
And yes they are loaded in the HTML and their css files are also included else would have got errors about plugins not being present.
var options = {
low: 0,
high: 100,
showGridBackground: false,
showArea: true,
axisX: {
showGrid: false
},
axisY: {
},
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle',
labelInterpolationFnc: function(value) {console.log("i was called"); return '$' + value}
}),
Chartist.plugins.tooltip({
})
]
};
var m = new Chartist.Line('#myChart', data, options);
Here is simple working example using your code. One thing to watch out for is that the tooltips need additional CSS to display correctly.
https://jsfiddle.net/rxdb576n/1/
var data = {
labels: ["Mon", "Tue", "Wed"],
series: [
[10, 20, 75]
],
}
var options = {
low: 0,
high: 100,
showGridBackground: false,
showArea: true,
axisX: {
showGrid: false
},
axisY: {},
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle',
labelInterpolationFnc: function(value) {
console.log("i was called");
return '$' + value
}
}),
Chartist.plugins.tooltip({
})
]
};
var m = new Chartist.Line('#myChart', data, options);
.chartist-tooltip {
opacity: 0;
position: absolute;
margin: 20px 0 0 10px;
background: rgba(0, 0, 0, 0.8);
color: #FFF;
padding: 5px 10px;
border-radius: 4px;
}
.chartist-tooltip.tooltip-show {
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script>
<script src="https://unpkg.com/chartist-plugin-tooltips#0.0.17"></script>
<script src="https://unpkg.com/chartist-plugin-pointlabels#0.0.6"></script>
<div id="myChart"></div>