I am creating a personal blog site. I stumbled upon an interactive visited states map in which I wanted to implement in one of my html page. I was able to successfully put it on my website with the generated html they provided. However, I wanted to tweak it a little bit but I'm not all familiar with javascript.
There are two things I want to add:
1st: Make the selected states link to a specific html page.
2nd (optional): Disable the zoom and color change when clicking on states that are not highlighted(visited).
Here is the code I have currently:
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
<script type="text/javascript">
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor : "#FFFFFF",
backgroundAlpha : 1,
zoomControl: {
zoomControlEnabled : false
},
dataProvider : {
map : "usaHigh",
getAreasFromMap : true,
areas :
[
{
"id": "US-AZ",
"showAsSelected": true
},
{
"id": "US-CA",
"showAsSelected": true
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings : {
autoZoom : true,
color : "#B4B4B7",
colorSolid : "#DB4646",
selectedColor : "#DB4646",
outlineColor : "#666666",
rollOverColor : "#9EC2F7",
rollOverOutlineColor : "#000000"
}
});
</script>
You can add a url property to the states you want a link to. You can also set urlTarget to "_blank" if you want to make the link open in a new tab/window:
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
// ... etc
I also recommend setting autoZoom to false and selectable to true in areasSettings so that the map doesn't try to zoom before triggering the URL:
areasSettings: {
autoZoom: false,
selectable: true,
To disable the zoom and color change on the other states, simply remove getAreasFromMap: true from your dataProvider.
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor: "#FFFFFF",
backgroundAlpha: 1,
zoomControl: {
zoomControlEnabled: false
},
dataProvider: {
map: "usaHigh",
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings: {
autoZoom: false,
selectable: true,
color: "#B4B4B7",
colorSolid: "#DB4646",
selectedColor: "#DB4646",
outlineColor: "#666666",
rollOverColor: "#9EC2F7",
rollOverOutlineColor: "#000000"
}
});
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
Related
I can not make this demo work, with the "hierarchy" parameter, even though I specify the parameter value, it applies the condition to all hierarchy chain.
"conditions": [{
"formula": "#value > 1",
"hierarchy": "Country",
"measure": "Discount",
"format": {
"backgroundColor": "#C5E1A5",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}]
Starter demo: https://www.webdatarocks.com/doc/conditional-formatting/
CodePen example which is also referenced from starter demo : https://codepen.io/webdatarocks/pen/oMvYGd
You could replace CodePen JS code with the code below to get a hierarchic render directly.
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
report: {
"slice": {
"rows": [
{
"uniqueName": "Country"
},
{
"uniqueName": "Category"
}
],
"columns":[
{ "uniqueName": "Color" }
],
"measures": [
{
"uniqueName": "Discount",
"aggregation": "sum"
}
] ,
},
"conditions": [{
"formula": "#value > 1",
"hierarchy": "Country",
"measure": "Discount",
"format": {
"backgroundColor": "#C5E1A5",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}],
"dataSource": {
"filename": "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
Here is related github issue, https://github.com/WebDataRocks/web-pivot-table/issues/2
You are right. The "hierarchy" parameter seems to have no effect.
An alternative solution is to apply the formatting with the customizeCell hook: https://www.webdatarocks.com/doc/customizecell/.
For example:
JS:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
customizeCell: customizeCellFunction,
report: {
slice: {
rows: [
{
uniqueName: "Country"
},
{
uniqueName: "Category"
}
],
columns: [{ uniqueName: "Color" }],
measures: [
{
uniqueName: "Discount",
aggregation: "sum"
}
]
},
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
function customizeCellFunction(cellBuilder, cellData) {
if (cellData && cellData.type === "value" && cellData.measure && cellData.measure.uniqueName === "Discount" && cellData.value > 1 ) {
if (
cellData.rows &&
cellData.rows.length > 0 &&
cellData.rows[cellData.rows.length - 1].hierarchyUniqueName === "Country"
) {
cellBuilder.addClass("green");
}
}
}
CSS:
.green {
background-color: #c5e1a5 !important;
color: #000000 !important;
font-family: Arial !important;
font-size: 12px !important;
}
Here is a CodePen example for illustration: https://codepen.io/VD_A/pen/vYXgqbY.
I've used Rich file manager with Laravel5.3.20 as the default configuration as below
Javascript
<script>
CKEDITOR.replace( 'textarea', {
filebrowserBrowseUrl: '{!! url('gallery/index.html') !!}',
///ImageBrowser : true,
autoUpdateElement:true,
language:'en'
});
</script>
Images in textarea url is wrong.
<p><img alt="" src="http://website.dev/gallery/connectors/php/filemanager.php?mode=readfile&path=%2Fae.jpg&config=filemanager.config.json&time=1477642950519" style="height:960px; width:720px" /></p>
All files, folder and sub folder have already update to userfiles
But it image url which i have to insert into Database with textarea go wrong as above url.
FileManager.configure.json
{
"_comment": "IMPORTANT : go to the wiki page to know about options configuration https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file",
"options": {
"culture": "en",
"lang": "php",
"theme": "flat-dark",
"defaultViewMode": "grid",
"localizeGUI": true,
"showFullPath": false,
"showTitleAttr": false,
"browseOnly": false,
"showConfirmation": true,
"showThumbs": true,
"searchBox": true,
"listFiles": true,
"fileSorting": "NAME_ASC",
"folderPosition": "bottom",
"quickSelect": false,
"charsLatinOnly": false,
"splitterWidth": 200,
"splitterMinWidth": 200,
"dateFormat": "d M Y H:i",
"serverRoot": true,
"fileRoot": false,
"fileConnector": false,
"fileRootSizeLimit": false,
"baseUrl": false,
"capabilities": ["select", "upload", "download", "rename", "move", "replace", "delete"],
"logger": false,
"plugins": []
},
"security": {
"allowFolderDownload": false,
"allowChangeExtensions": false,
"allowNoExtension": false,
"normalizeFilename": true,
"uploadPolicy": "DISALLOW_ALL",
"uploadRestrictions": [
"jpg",
"jpe",
"jpeg",
"gif",
"png",
"svg",
"txt",
"pdf",
"odp",
"ods",
"odt",
"rtf",
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pptx",
"csv",
"ogv",
"avi",
"mkv",
"mp4",
"webm",
"m4v",
"ogg",
"mp3",
"wav",
"zip",
"rar"
]
},
"exclude": {
"unallowed_files": [
".htaccess",
"web.config"
],
"unallowed_dirs": [
"_thumbs",
".CDN_ACCESS_LOGS",
"cloudservers"
],
"unallowed_files_REGEXP": "/^\\./",
"unallowed_dirs_REGEXP": "/^\\./"
},
"upload": {
"multiple": true,
"paramName": "files",
"chunkSize": false,
"numberOfFiles": 5,
"fileSizeLimit": 16000000,
"overwrite": false,
"imagesOnly": false
},
"images": {
"imagesExt": [
"jpg",
"jpe",
"jpeg",
"gif",
"png",
"svg"
],
"main": {
"autoOrient": true,
"maxWidth": 1280,
"maxHeight": 1024
},
"thumbnail": {
"enabled": true,
"cache": true,
"dir": "_thumbs/",
"crop": true,
"maxWidth": 64,
"maxHeight": 64
}
},
"videos": {
"showVideoPlayer": true,
"videosExt": [
"ogv",
"mp4",
"webm",
"m4v"
],
"videosPlayerWidth": 400,
"videosPlayerHeight": 222
},
"audios": {
"showAudioPlayer": true,
"audiosExt": [
"ogg",
"mp3",
"wav"
]
},
"pdfs": {
"showPdfReader": true,
"pdfsExt": [
"pdf",
"odt",
"odp",
"ods"
],
"pdfsReaderWidth": "640",
"pdfsReaderHeight": "480"
},
"docs": {
"showGoogleViewer": true,
"docsExt": [
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pptx"
],
"docsReaderWidth": "640",
"docsReaderHeight": "480"
},
"edit": {
"enabled": true,
"lineNumbers": true,
"lineWrapping": true,
"codeHighlight": false,
"theme": "elegant",
"editExt": [
"txt",
"csv"
]
},
"customScrollbar": {
"enabled": true,
"theme": "inset-2-dark",
"button": true
},
"extras": {
"extra_js": [],
"extra_js_async": true
},
"icons": {
"path": "images/fileicons/",
"folder": "_Open.png",
"parent": "_Parent.png",
"default": "default.png"
},
"url": "https://github.com/servocoder/RichFilemanager",
"version": "1.0.6"
}
The version that you use doesn't support absolute paths in preview links, it builds preview urls via connector request path only.It was done because some users keep connector file separate from the client-side scripts (different servers and so on). After some discussions it was decided to support both options: absolute path (by default) and connector path (configurable). The feature that you need will be included in the next major release 2.0. Some discussion on your problem is here.
I've checked the documentation but I cannot find it... how can I disable the rollover color on AmCharts Map on mouseover? Basically disable the change of color of map (for example, a state on US map). I don't want any mouseover interactivity or change of color. Thanks.
var map = AmCharts.makeChart("propertiesMap", {
"type": "map",
"listeners": [{
"event": "mouseover",
"method": removeListener
}],
"dragMap": false,
"theme": "light",
"colorSteps": 5,
"mouseEnabled": false,
"selectable": false,
"zoomOnDoubleClick": false,
"dataLoader": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22422.json",
format: "json",
"areas": [{
"mouseEnabled": false
}]
},
"areasSettings": {
"autoZoom": false,
"balloonText": "",
"outlineThickness": 1,
"selectable": false,
},
"valueLegend": {
"right": 10,
"minValue": "Cold",
"maxValue": "Hot"
},
"zoomControl": {
"zoomControlEnabled": false,
"panControlEnabled": false,
"homeButtonEnabled": false
}
});
To disable the rollover color for all states/areas, set the rollOverColor to null in your areasSettings object:
"areasSettings": {
// ...
"rollOverColor": null
},
Demo
From the docs
removeListener(chart, type, handler)
So in your case:
removeListener(myChart, 'mouseover', stateHoverFunction)
I have Simogeo FileManager version 2.0.0.
I extracted it in root/tools, changed the config file, set up the permissions, hooked it to tinymce and everything seemed to work. The tinymce opens the popup window with FileManager. I can create a folder, change folder and upload files.
Problem is when I upload file(s) I cannot see them in the FileManager but they are uploaded in the directories I created. The only thing I can see are directories.
I am testing it on Windows 8.1 with uwAmp, PHP 5.3.24 or PHP 5.4.31.
Config file:
{
"_comment": "IMPORTANT : go to the wiki page to know about options configuration https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file",
"options": {
"culture": "en",
"lang": "php",
"theme": "flat-dark",
"defaultViewMode": "grid",
"autoload": true,
"showFullPath": false,
"showTitleAttr": false,
"browseOnly": false,
"showConfirmation": true,
"showThumbs": true,
"generateThumbnails": true,
"searchBox": true,
"listFiles": true,
"fileSorting": "default",
"chars_only_latin": true,
"dateFormat": "d M Y H:i",
"serverRoot": true,
"fileRoot": false,
"relPath": false,
"logger": false,
"capabilities": ["select", "download", "rename", "delete", "replace"],
"plugins": []
},
"security": {
"allowFolderDownload": false,
"allowChangeExtensions": false,
"allowNoExtension": false,
"uploadPolicy": "DISALLOW_ALL",
"uploadRestrictions": [
"jpg",
"jpeg",
"gif",
"png",
"svg",
"txt",
"pdf",
"odp",
"ods",
"odt",
"rtf",
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pptx",
"csv",
"ogv",
"mp4",
"webm",
"m4v",
"ogg",
"mp3",
"wav",
"zip",
"rar"
]
},
"upload": {
"multiple": true,
"number": 5,
"overwrite": false,
"imagesOnly": false,
"fileSizeLimit": 16
},
"exclude": {
"unallowed_files": [
".htaccess",
"web.config"
],
"unallowed_dirs": [
"_thumbs",
".CDN_ACCESS_LOGS",
"cloudservers"
],
"unallowed_files_REGEXP": "/^\\./",
"unallowed_dirs_REGEXP": "/^\\./"
},
"images": {
"imagesExt": [
"jpg",
"jpeg",
"gif",
"png",
"svg"
],
"resize": {
"enabled":true,
"maxWidth": 1280,
"maxHeight": 1024
}
},
"videos": {
"showVideoPlayer": true,
"videosExt": [
"ogv",
"mp4",
"webm",
"m4v"
],
"videosPlayerWidth": 400,
"videosPlayerHeight": 222
},
"audios": {
"showAudioPlayer": true,
"audiosExt": [
"ogg",
"mp3",
"wav"
]
},
"edit": {
"enabled": true,
"lineNumbers": true,
"lineWrapping": true,
"codeHighlight": false,
"theme": "elegant",
"editExt": [
"txt",
"csv"
]
},
"customScrollbar": {
"enabled": true,
"theme": "inset-2-dark",
"button": true
},
"extras": {
"extra_js": [],
"extra_js_async": true
},
"icons": {
"path": "images/fileicons/",
"directory": "_Open.png",
"default": "default.png"
},
"url": "https://github.com/simogeo/Filemanager",
"version": "2.0.0-dev"
}
The problem was with the type in referer.
tinymce was passing ?type=image and filemanager expected ?type=images
Are you sure listFiles option is set to true inc config file ?
See the related doc : https://github.com/simogeo/Filemanager/wiki/Filemanager-configuration-file
listFiles Default value true. Display files in right column (filetree). If set to false, will display only folders. Can take value true or false.
For further help, could you copy-paste an URL or at least your config file!?
I am using a jQuery datatable with checkbox column for select checked rows value in button click event. Please see my below image.
I use this code for getting check rows
var checkedRows = dtTable._('tr.checked', { "filter": "applied" });
My problem is when i click the header row check box it's works fine. But it's shows null
in single row check box click. I am clueless.
Edit
firebug
JQuery
var dtTable = null;
var ajaxUrl = "";
$(document).ready(function () {
GetCustomerAcceptence();
$("#btnReceived").click(function () {
var checkedRows = dtTable._('tr.checked', { "filter": "applied" });
if (checkedRows == null) {
alert("checkedRows is null.");
}
else {
alert("checkedRows is not null. Value : " + checkedRows[0][1]);
}
});
function GetCustomerAcceptence() {
/* Clear datatable before reload. */
ClearDataTable();
var elementName = "";
ajaxUrl = "";
elementName = "#tblCustomerAcceptence";
ajaxUrl = '#Url.Action("GetCustomerAcceptenceOrders", "Dispatch")';
dtTable = $(elementName).dataTable({
bProcessing: false,
bLengthChange: false,
bInfo: false,
bFilter: false,
bPaginate: false,
sAjaxSource: ajaxUrl,
aoColumns: [
{
"sClass": "checkbox-column",
bSortable: false,
"mRender": function (data, type, full) {
return '<input type="checkbox" onclick="check(this)" class="icheck-input">';
}
},
{ sTitle: "Id", bSortable: false, bVisible: false },
{ sTitle: "Number", bSortable: false, },
{ sTitle: "Description", bFilterable: true, bSortable: false, },
{ sTitle: "PoBox Number", bSortable: false, },
{ sTitle: "Owner", bSortable: false, },
{ sTitle: "Physical Weight", bSortable: false, },
{ sTitle: "Vol.Weight", bSortable: false, },
{ sTitle: "Last Status", bSortable: false, },
{ sTitle: "Zone", bSortable: false, },
],
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "MasterAWB", "value": "0" },
{ "name": "PoboxNumber", "value": "0" },
{ "name": "TypeofGoods", "value": 0 },
{ "name": "Provider", "value": 0 },
{ "name": "DateFrom", "value": "0" },
{ "name": "DateTo", "value": "0" },
{ "name": "Zone", "value": 0 },
{ "name": "BagNumber", "value": "0" }
);
},
});
}
function ClearDataTable() {
if (dtTable != null) {
dtTable.dataTable().fnClearTable();
dtTable.dataTable().fnDestroy();
}
}
});
I am really sorry to say that there is a mistake in check box column. I need to place check function in my webpage to fire the check box checked event.
/* checkbox in table */
function check(e) {
if ($(e).parent('td').parent('tr').hasClass('checked')) {
$(e).parent('td').parent('tr').parent('tbody').parent('table').children('thead').find('th:first').children('div').removeClass('checked');
$(e).parent('td').parent('tr').removeClass('checked');
}
else {
$(e).parent('td').parent('tr').addClass('checked');
dtTable.fnDraw();
}
}
/* end */