Related
I am trying to make a gradient line chart, The issue is with tooltip legend color and color of data points, they appear in brown gradient which was the default.
I was able to change the tooltip color, anyhow that is not the actual data point color but able to fix it to one color at least. whereas the points on the line do not pick up the color of the line.
Can someone point me in right direction?
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var data = [["2020-06-05",116],["2020-06-06",129],["2020-06-07",135],["2020-06-08",86],["2020-06-09",73],["2020-06-10",85],["2020-06-11",73],["2020-06-12",68],["2020-06-13",92],["2020-06-14",130],["2020-06-15",245],["2020-06-16",139],["2020-06-17",115],["2020-06-18",111],["2020-06-19",309],["2020-06-20",206],["2020-06-21",137],["2020-06-22",128],["2020-06-23",85],["2020-06-24",94],["2020-06-25",71],["2020-06-26",106],["2020-06-27",84],["2020-06-28",93],["2020-06-29",85],["2020-06-30",73],["2020-07-01",83],["2020-07-02",125],["2020-07-03",107],["2020-07-04",82],["2020-07-05",44],["2020-07-06",72],["2020-07-07",106],["2020-07-08",107],["2020-07-09",66],["2020-07-10",91],["2020-07-11",92],["2020-07-12",113],["2020-07-13",107],["2020-07-14",131],["2020-07-15",111],["2020-07-16",64],["2020-07-17",69],["2020-07-18",88],["2020-07-19",77],["2020-07-20",83],["2020-07-21",111],["2020-07-22",57],["2020-07-23",55],["2020-07-24",60]];
var dateList = data.map(function (item) {
return item[0];
});
var valueList = data.map(function (item) {
return item[1];
});
option = {
color: {
type: 'linear',
x: 0, y: 1,x2:0,y2:0,
colorStops: [{
offset: 0, color: '#00d4ff' // color at 0% position
}, {
offset: 1, color: '#090979' // color at 100% position
}],
global:true
},
// Make gradient line here
visualMap: [{
show: true,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
}],
title: [{
left: 'center',
text: 'Gradient along the y axis'
}],
xAxis: [{
data: dateList,
axisPointer: {
label:{
color:['#5470c6'],
}
},
axisLabel: {
formatter: function (value) {
return moment(value).format("MMM YY");
// And other formatter tool (e.g. moment) can be used here.
}
}
}],
yAxis: [{
type: 'value',
axisPointer: {
label:{
color:['#5470c6'],
}
}
}],
grid: [{
width:'auto',
height:'auto'
}],
tooltip : {
trigger: 'axis',
axisPointer: {
animation: true,
},
formatter: function (params) {
var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
let rez = '<p>' + params[0].axisValue + '</p>';
console.log(params); //quite useful for debug
params.forEach(item => {
// console.log(item); //quite useful for debug
var xx = '<p>' + colorSpan('#00d4ff') + ' ' + item.seriesName + ': ' + item.data + '</p>'
rez += xx;
});
console.log(rez);
return rez;
}
},
series: [{
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
type: 'line',
showSymbol: false,
data: valueList,
// smooth: true,
label:{
show:true,
position:'top'
},
lineStyle:{
color: {
type: 'linear',
x: 0, y: 1,x2:0,y2:0,
colorStops: [{
offset: 0, color: '#00d4ff' // color at 0% position
}, {
offset: 1, color: '#090979' // color at 100% position
}],
global:false
}
}
}]
};
console.log(myChart);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
You need to add gradientColor array to echarts options. Now echart will take care of changing color of tooltip and data point. You can also remove your custom tooltip formatted function.
gradientColor: ["#00d4ff", "#090979"]
Here the complete options object:
var data = [];
var dateList = data.map(function(item) {
return item[0];
});
var valueList = data.map(function(item) {
return item[1];
});
option = {
gradientColor: ["#00d4ff", "#090979"],
// Make gradient line here
visualMap: [
{
show: true,
type: "continuous",
seriesIndex: 0,
min: 0,
max: 400
}
],
title: [
{
left: "center",
text: "Gradient along the y axis"
}
],
xAxis: [
{
data: dateList,
axisPointer: {
label: {
color: ["#5470c6"]
}
},
axisLabel: {
formatter: function(value) {
return moment(value).format("MMM YY");
// And other formatter tool (e.g. moment) can be used here.
}
}
}
],
yAxis: [
{
type: "value",
axisPointer: {
label: {
color: ["#5470c6"]
}
}
}
],
grid: [
{
width: "auto",
height: "auto"
}
],
tooltip: {
trigger: "axis",
axisPointer: {
animation: true
}
},
series: [
{
type: "line",
showSymbol: false,
data: valueList,
// smooth: true,
label: {
show: true,
position: "top"
}
}
]
};
I am facing one issue while inserting horizontal line on the fly (i.e. at the time of creating dynamic tables).
As you can see from the code snippet below:
1) If you click on any row of the first table/grid, a horizontal line is shown below it and a new table is shown
2) If I click on any row of second grid/table ,everything looks good and a horizontal line is shown and a 3rd grid/table is shown
3) Click on 3rd grid , 4th grid is shown and a horizontal line. But when you click on 4th grid, you will notice an additional horizontal line getting added just above the grid as shown in the screenshot
(highlighted) below:
Could anyone tell me why this is happening?
I am trying to accomplish this using an additional variable hll in the code. Not sure if it's redundant to use hll or I could use hl for the same purpose?
var hll = document.createElement('div');
hll.id = 'newhorizLine';
hll.style.margin = "25px 0";
hll.style.height = "1px";
hll.style.background = "black";
hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
Please consider the code snippet below :
var source = {
localdata: [
["Test1", "2018-08-29 14:19:07", "2020-08-29 14:19:07", "Path1"],
["Test2", "2018-09-05 11:26:39", "2020-09-05 11:26:39", "Path2"],
["Test3", "2018-08-30 07:32:23", "2020-08-30 07:32:23", "Path3"],
["Test4", "2018-09-11 09:01:42", "2020-09-11 09:01:42", "Path4"],
["Test5", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path5"],
["Test6", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path6"],
["Test7", "2018-09-13 07:34:57", "2020-09-13 07:34:57", "Path7"]
],
datafields: [{
name: 'dataSetName',
type: 'string',
map: '0'
},
{
name: 'accessStartDate',
type: 'date',
map: '1'
},
{
name: 'accessEndDate',
type: 'date',
map: '2'
},
{
name: 'conceptPath',
type: 'string',
map: '3'
}
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function(data) {},
loadError: function(xhr, status, error) {}
});
$("#main_downloader_grid").jqxGrid({
source: dataAdapter,
width: 381,
height: '200',
pageable: true,
sortable: true,
autoheight: true,
columnsResize: true,
theme: 'classic',
columns: [{
text: 'Data Set',
datafield: 'dataSetName',
width: 140
},
{
text: 'Start Date',
datafield: 'accessStartDate',
width: 120,
cellsformat:'MM/dd/yyyy'
},
{
text: 'End Date',
datafield: 'accessEndDate',
width: 120,
cellsformat:'MM/dd/yyyy'
},
{
text: 'Concept Path',
datafield: 'conceptPath',
width: 50,
hidden: true
}
]
});
// Row Select Logic Starts Here
$("#main_downloader_grid").on("rowselect", function(e) {
let data_set_name = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'dataSetName');
console.log("Cell Value Test");
console.log(data_set_name.value);
let conceptPath = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'conceptPath');
console.log("Concept Path Test");
console.log(conceptPath.value);
$('#commonWindow').remove();
//$('.clickable').remove();
$('.clickable').next('#testbutton').remove();
$('.clickable').slice(1).remove();
var elem = document.createElement('div');
elem.id = 'commonWindow';
//elem.setAttribute('style', 'margin:500px 10px 20px 20px;');
console.log(elem);
let data = [{
letter: '<b>People</b>'
},
{
letter: '1) Detailed demographics data of all people'
},
{
letter: '2) Attributes associated with all people'
},
{
letter: '<b>Technology</b>'
},
{
letter: '1) Computer details'
},
{
letter: '2) Hardware Details'
},
{
letter: '3) Software Details'
},
{
letter: '<b>Company Details</b>'
}
/* {conceptpath: conceptPath.value } */
];
let source = {
localdata: data,
datatype: "array",
datafields: [{
name: 'letter',
type: 'string'
} /* ,{ name: 'conceptpath', type: 'string' } */ ]
};
let newDataAdapter = new $.jqx.dataAdapter(source);
$(elem).jqxGrid({
source: newDataAdapter,
width: 395,
height:310,
columns: [{
text: 'Data set <b>' + data_set_name.value + '</b> selected, what data do you want to see?',
datafield: 'letter'
//width: 450
}
]
});
$(elem).insertAfter('#main_downloader_grid');
elem.style.margin = "50px 10px 20px 50px";
var hl = document.createElement('div');
hl.id = 'horizLine';
hl.style.margin = "25px 0";
hl.style.height = "1px";
hl.style.background = "black";
hl.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
$(hl).insertAfter('#main_downloader_grid');
var hll = document.createElement('div');
hll.id = 'newhorizLine';
hll.style.margin = "25px 0";
hll.style.height = "1px";
hll.style.background = "black";
hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
$("#commonWindow").on("rowselect", handleClick);
function handleClick(e) {
var $el = $("<div />", {
class: "clickable",
style: "margin:100px 10px 20px 20px ",
})
.on('click', handleClick)
$el.jqxGrid({
height: 270,width:520, pageable: true,source: dataAdapter, columns: [
{ text: 'Data Set Name', datafield: 'dataSetName', width: 200 },
{ text: 'Access Start Date', datafield: 'accessStartDate', width: 150,cellsformat:'MM/dd/yyyy' },
{ text: 'Access End Date', datafield: 'accessEndDate', width: 150,cellsformat:'MM/dd/yyyy' },
{ text: 'Concept Path', datafield: 'conceptPath', width: 100,hidden:true }
]
});
$(hll).insertAfter(".clickable");
var $this = $(this), $parent = $(this).parent();
if (e.type == 'rowselect') {
$('.clickable').next('#testbutton').remove();
$('.clickable').next('#newhorizline').remove();
$('.clickable').slice(1).remove();
}
var $button = $("<div id = 'testbutton'></div>").on('click', function (e) {
$(".clickable").jqxGrid('exportdata', 'csv', 'jqxGrid');
});
console.log($button);
$button.jqxButton({ width: 100, height: 20});
$button.html('Download Data');
$el.after($button);
$parent.append($el);
$(this).off('click');
}
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="wrapper">
<div id="main_downloader_grid" style="margin:50px 10px 20px 50px"></div>
<div class="clickable" style="margin:50px 10px 20px 20px;"></div>
</div>
While, I am not exactly sure what you are try to accomplish, you can get horizontal lines without css using the tag in html!
<h2>Hello!</h2>
<hr>
<h3>Hi, Tim!</h3>
I'm facing issue with Feature layer. When plot map with local data. But when I'm using hosted data in feature layer then Drawing feature is working fine and query on drawing data is also working perfectly.
But when I'm using my local system data using api request then draw objects on map is working fine but query filtering is not working on feature layer data. Below is the example code.
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<style>
#viewDiv {
height: 100%;
}
.popUpMapView {
height: 400px;
border: 1px solid #A8A8A8;
}
#drawActions {
padding: 0 5px;
background: #eee;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
#drawActions ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#drawActions ul li {
display: inline-block;
}
#drawActions ul li .esri-widget--button {
background: #eee;
}
#drawActions ul li .esri-widget--button:hover {
background: #fff;
}
.esri-ui-top-left .esri-component {
margin-bottom: 0;
border-top: solid 1px rgba(50,50,50,0.25);
}
.esri-popup.esri-widget {
max-height: 100%;
}
.esri-view-width-xlarge .esri-popup__main-container {
width: 580px;
}
.esri-view-height-less-than-medium .esri-popup__main-container {
max-height: 500px;
}
.esri-view-height-small .esri-ui-corner .esri-component .esri-expand__content,
.esri-view-width-greater-than-xsmall .esri-expand--auto .esri-expand__content {
margin-left: 0;
white-space: nowrap;
}
.esri-widget--button {
outline: 0;
}
.esri-legend__layer-body {
display: table;
width: 100%;
margin: 0;
}
.color-selection-item-container {
cursor: pointer;
}
.item-selected .color-selection-item-container {
opacity: 0.5;
}
.item-selected .color-selection-item-container.active {
opacity: 1;
}
.item-selected .color-selection-item-container.active .esri-legend__layer-cell--info {
color: #000;
}
</style>
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
</script>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
let highlight;
let highlightFields = [];
let povLayer;
let plantTypeFilterObj = [];
require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/widgets/Home",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/geometry/Point",
"esri/config",
"esri/request",
"dojo/domReady!"
], function(
Map, MapView, WebMap, SketchViewModel, Graphic, GraphicsLayer, FeatureLayer, Home, Legend, Expand, Point, erisConfig, Request
) {
const tempGraphicsLayer = new GraphicsLayer();
var map = new Map({
basemap: "dark-gray",
layers: [tempGraphicsLayer]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [-91.891111, 42.477778],
zoom: 4,
highlightOptions: {
color: "black",
haloOpacity: 0,
fillOpacity: 0.45
},
});
let highlightHandle = null;
view.when(function() {
getData()
.then(createGraphics)
.then(createLayer)
.catch(errback);
});
function getData() {
let url = "http://localhost/arcgis/points-listing";
return Request(url, {
responseType: "json"
});
}
function createGraphics(response) {
let items = response.data.data;
let geojson = items.map(function(item, i) {
return {
geometry: new Point({
x: item.lng,
y: item.lat
}),
attributes: {
ObjectID: item.plant_id,
name: item.name,
address: item.street_address,
city: item.city,
state_code: item.state_code,
zip: item.zip,
county: item.county,
lng: item.lng,
lat: item.lat,
nameplate_capacity: item.nameplate_capacity,
plant_type: item.plant_type
}
};
});
return geojson;
}
function createLayer(graphics) {
let layer = new FeatureLayer({
source: graphics,
fields: getFields(),
objectIdField: "ObjectID",
renderer: getRender(),
geometryType: "point",
popupTemplate: getTemplate(),
elevationInfo: {
mode: "on-the-ground"
}
});
var legend = new Legend({
view: view,
layerInfos: [{
layer: layer,
title: "Plants detail"
}]
});
view.ui.add(legend, "top-right");
map.add(layer);
view.whenLayerView(layer).then(function(layerView) {
sketchGraphics(layerView);
setTimeout(function() {
hideShowPointsOnPlantTypeBasis();
colorSelectionClick();
}, 1000);
});
return layer;
}
function hideShowPointsOnPlantTypeBasis()
{
let legendContainer = document.getElementsByClassName("esri-legend__layer-table--size-ramp")[0];
legendContainer.className += " color-section";
let legendInfoItem = legendContainer.getElementsByClassName("esri-legend__layer-cell--info");
for (let i = 0; i < legendInfoItem.length; i++) {
let element = legendInfoItem[i];
let text = element.innerHTML;
let value = (text.toUpperCase()).replace(" ", "_");
checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("class", "plant-type-filtering-checkbox");
checkbox.setAttribute("style", "display:none;");
checkbox.setAttribute("value", value);
element.parentNode.classList.add("color-selection-item-container");
element.parentNode.insertBefore(checkbox, element.parentNode.firstChild);
}
}
function colorSelectionClick() {
$('.esri-expand__content').on('click', '.color-selection-item-container', function(e) {
e.preventDefault();
let $this = $(this);
let $input = $this.find('input.plant-type-filtering-checkbox');
let selectedVal = $input.val();
if(!$input.is(':checked')) {
plantTypeFilterObj.push(selectedVal);
$input.prop('checked', true);
$this.addClass('active');
} else {
$this.removeClass('active');
plantTypeFilterObj = plantTypeFilterObj.filter(function(value, index, arr){
return value != selectedVal;
});
$input.prop('checked', false);
}
let layerViews = view.layerViews;
if(plantTypeFilterObj.length > 0) {
viewLayer.layer.definitionExpression = "nameplate_capacity > 0 AND plant_type IN ('" + plantTypeFilterObj.join("','") + "')";
} else {
viewLayer.layer.definitionExpression = '';
}
let selectedCount = $('.esri-expand__content').find('.color-selection-item-container.active').length;
if(selectedCount > 0) {
$('.esri-expand__content').addClass('item-selected');
} else {
$('.esri-expand__content').removeClass('item-selected');
}
});
}
function sketchGraphics(layer) {
viewLayer = layer;
// create a new sketch view model
const sketchViewModel = new SketchViewModel({
view: view,
layer: tempGraphicsLayer,
pointSymbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
size: "16px"
}
});
setUpClickHandler(view);
sketchViewModel.on("create", createGraphic);
sketchViewModel.on("create-complete", addGraphic);
// Listen the sketchViewModel's update-complete and update-cancel events
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);
var drawCircleButton = document.getElementById("circleButton");
var drawRectangleButton = document.getElementById("rectangleButton");
var drawPolygonButton = document.getElementById("polygonButton");
drawCircleButton.onclick = function() {
resetSketchView();
sketchViewModel.create("circle");
setActiveButton(this);
};
drawRectangleButton.onclick = function() {
resetSketchView();
sketchViewModel.create("rectangle");
setActiveButton(this);
};
drawPolygonButton.onclick = function() {
resetSketchView();
sketchViewModel.create("polygon");
setActiveButton(this);
};
view.on('click', function(event) {
resetSketchView();
});
// reset all the changes from map on btn click.
document.getElementById("resetBtn").onclick = function() {
resetSketchView();
};
function addGraphic(event) {
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol
});
tempGraphicsLayer.add(graphic);
selectFeatures(event.geometry);
}
function createGraphic(event) {
resetHideShowPoints();
}
function updateGraphic(event) {
event.graphic.geometry = event.geometry;
tempGraphicsLayer.add(event.graphic);
editGraphic = null;
}
function setActiveButton(selectedButton) {
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
function resetSketchView() {
sketchViewModel.reset();
tempGraphicsLayer.removeAll();
// remove existing highlighted features
if (highlight) {
highlight.remove();
}
}
}
function selectFeatures(geometry) {
view.graphics.removeAll();
if (viewLayer) {
let query = {};
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query).then(function(results) {
const graphics = results.features;
if (graphics.length > 0) {
// remove existing highlighted features
if (highlight) {
highlight.remove();
}
highlight = viewLayer.highlight(graphics);
}
})
.catch(errback);
}
}
function removeUnSelectedPoints(viewLayer, graphics)
{
graphics.forEach(item => {
highlightFields.push(item.attributes.FID);
});
setTimeout(function() {
viewLayer.layer.definitionExpression = "FID IN (" + highlightFields.join(",") + ")";
}, 1000);
}
function resetHideShowPoints() {
if(highlightFields.length > 0) {
highlightFields = [];
viewLayer.layer.definitionExpression = "";
console.log('reset', highlightFields);
}
}
function errback(error) {
console.error(error);
}
function setUpClickHandler(mapview) {
mapview.on("click", function(event) {
event.stopPropagation();
streetView(view, event)
mapview.hitTest(event).then(function(response) {
var results = response.results;
});
});
}
function streetView(mainMapView, event) {
// Make sure that there is a valid latitude/longitude
if (event && event.mapPoint) {
// Create lat/lon vars to display in popup title
var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
mainMapView.popup.open({
// Set the popup's title to the coordinates of the location
title: "Map view coordinates: [" + lon + ", " + lat + "]",
location: event.mapPoint, // Set the location of the popup to the clicked location
content: innerMapPopUp(
mainMapView,
mainMapView.center,
mainMapView.scale
)
});
} else {
mainMapView.popup.open({
// Set the popup's title to the coordinates of the location
title: "Invalid point location",
location: event.mapPoint, // Set the location of the popup to the clicked location
content: "Please click on a valid location."
});
}
}
function innerMapPopUp(mainMapView, center, scale) {
var popupDiv = document.createElement("div");
popupDiv.classList.add("popUpMapView");
var popupView = new MapView({
container: popupDiv,
map: new Map({
basemap: "topo"
}),
center: center,
zoom: 8,
ui: {
components: []
}
});
console.log(popupView);
// Return a dom node
return popupView.container;
}
function getFields() {
var fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "name",
alias: "name",
type: "string"
}, {
name: "address",
alias: "address",
type: "string"
}, {
name: "city",
alias: "city",
type: "string"
}, {
name: "state_code",
alias: "state_code",
type: "string"
}, {
name: "zip",
alias: "zip",
type: "string"
}, {
name: "county",
alias: "county",
type: "string"
}, {
name: "plant_type",
alias: "plant_type",
type: "string"
}, {
name: "nameplate_capacity",
alias: "nameplate_capacity",
type: "double"
}
];
return fields;
}
function getTemplate() {
// Set up popup template for the layer
var pTemplate = {
title: "{name}",
content: [{
type: "fields",
fieldInfos: [
{
fieldName: "street_address",
label: "Address",
visible: true
},
{
fieldName: "city",
label: "City",
visible: true
},
{
fieldName: "state_code",
label: "State Code",
visible: true
},
{
fieldName: "zip",
label: "Zip",
visible: true
},
{
fieldName: "county",
label: "County",
visible: true
},
{
fieldName: "plant_type",
label: "Plant Type",
visible: true
},
{
fieldName: "latitude",
label: "Latitude",
visible: true
},
{
fieldName: "longitude",
label: "Longitude",
visible: true
},
{
fieldName: "nameplate_capacity",
label: "Capacity (MW)",
visible: true
}
]
}]
};
return pTemplate;
}
function getRender() {
var renderer = {
type: "unique-value", // autocasts as new SimpleRenderer()
// Define a default marker symbol with a small outline
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "#FFD733"
},
defaultLabel: "Other",
field: "plant_type",
label: "Plant Type",
uniqueValueInfos: [
{
value: "HYDRO",
symbol: {
type: "simple-marker",
color: "hsla(345,80%, 65%, 1)"
},
label: "Hydro"
},
{
value: "NATURAL_GAS",
symbol: {
type: "simple-marker",
color: "hsla(213,80%, 65%, 1)"
},
label: "Natural Gas"
},
{
value: "BIOMASS",
symbol: {
type: "simple-marker",
color: "hsla(195,80%, 65%, 1)"
},
label: "Biomass"
},
{
value: "COAL",
symbol: {
type: "simple-marker",
color: "hsla(336,80%, 65%, 1)"
},
label: "Coal"
},
{
value: "NUCLEAR",
symbol: {
type: "simple-marker",
color: "hsla(224,80%, 65%, 1)"
},
label: "Nuclear"
},
{
value: "PETROLIUM",
symbol: {
type: "simple-marker",
color: "hsla(264,80%, 65%, 1)"
},
label: "Petrolium"
},
{
value: "SOLAR",
symbol: {
type: "simple-marker",
color: "hsla(287,80%, 65%, 1)"
},
label: "Solar"
},
{
value: "WIND",
symbol: {
type: "simple-marker",
color: "hsla(344,80%, 65%, 1)"
},
label: "Wind"
}
],
visualVariables: [
{
type: "size",
field: "nameplate_capacity",
valueUnit: "unknown",
legendOptions: {
title: "Nameplate Capacity (MW)"
},
stops: [
{
value: 500,
size: 10,
label: "<500"
},
{
value: 2000,
size: 15,
label: "1000"
},
{
value: 3000,
size: 20,
label: "4000"
},
{
value: 5000,
size: 35,
label: "< 10000"
}]
}
]
};
return renderer;
}
// Set up a home button for resetting the viewpoint to the intial extent
var homeBtn = new Home({
view: view
}, "homeDiv");
// Instructions expand widget
const drawIcons = document.getElementById("drawActions");
instructionsExpand = new Expand({
expandIconClass: "esri-icon-expand",
expandTooltip: "Draw Actions",
expanded: false,
view: view,
iconNumber: 4,
content: drawIcons
});
view.ui.add(homeBtn, "top-left");
view.ui.add(instructionsExpand, "top-left");
// hide the instructions expand widget when the view becomes focused
view.watch("focused", function(newValue, oldValue, property, object) {
if (newValue) {
instructionsExpand.expanded = false;
}
});
});
</script>
And below is the screen-shot what issue I'm getting.
I spend my too much time to research on that. But unfortunately I'm not finding any way how to resolve this issue.
Please give a clue what I'm missing.
It looks like you are not setting up the query correctly. You have:
let query = {};
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query)
You need to use the featureLayer's createQuery method to create a query object:
let query = layer.createQuery();
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query)
Also, WebGL rendering is only supported for layers hosted on ArcGIS Online, or on ArcGIS Server 10.6.1 so highlight and other functionality will not work on layers that do not meet these requirements.
I'm using vis.js v. 4.12.0. I've noticed that sometimes using Graph2d some points are not connected.
.
I think this behaviour depends on points distance; does someone knows how to force points connection?
#selten98: Sure, here my code:
for (var i in plot) {
groups.add({
content: labelArray[i],
id: plot[i],
options: {
shaded: {
orientation: "bottom"
}
}
});
for (var j in GD) {
if (GD[j].hasOwnProperty(plot[i])) {
items.push({
group: plot[i],
label: {
className: "visibility-hidden label-group-" + labelArray[i],
content: GD[j][plot[i]].toFixed(1),
xOffset: -10 / 3 * GD[j][plot[i]].toFixed(1).length,
yOffset: 20
},
x: new Date(GD[j].timestamp),
y: Number(String(GD[j][plot[i]]).replace(",", "."))
});
}
}
}
for (var i = 0; i < items.length; i++) {
if (i == 0) {
groups.add({
content: groupId,
id: groupId,
style: "stroke:" + arr_color[properties],
options: {
shaded: {
orientation: "bottom",
style: "fill:" + arr_color[properties]
},
drawPoints: {
styles: "stroke:" + arr_color[properties] + ";fill:" + arr_color[properties]
}
}
});
items[i].group = groupId;
scope.labels[properties].max = Number(items[i].y).toFixed(1);
scope.labels[properties].min = Number(items[i].y).toFixed(1);
} else {
if (items[i].label.className == items[i - 1].label.className) {
if (items[i].x.getTime() - items[i - 1].x.getTime() > Number(type[1]) * 60 * 1000) {
groupId++;
groups.add({
content: groupId,
id: groupId,
style: "stroke:" + arr_color[properties],
options: {
shaded: {
orientation: "bottom",
style: "fill:" + arr_color[properties]
},
drawPoints: {
styles: "stroke:" + arr_color[properties] + ";fill:" + arr_color[properties]
}
}
});
}
items[i].group = groupId;
scope.labels[properties].max = Math.max(scope.labels[properties].max, Number(items[i].y)).toFixed(1);
scope.labels[properties].min = Math.min(scope.labels[properties].min, Number(items[i].y)).toFixed(1);
} else {
groupId++;
properties++;
groups.add({
content: groupId,
id: groupId,
style: "stroke:" + arr_color[properties],
options: {
shaded: {
orientation: "bottom",
style: "fill:" + arr_color[properties]
},
drawPoints: {
styles: "stroke:" + arr_color[properties] + ";fill:" + arr_color[properties]
}
}
});
items[i].group = groupId;
scope.labels[properties].max = Number(items[i].y).toFixed(1);
scope.labels[properties].min = Number(items[i].y).toFixed(1);
}
}
}
var container = document.getElementById("graph");
container.innerHTML = "";
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {
left: {
format: function (value) {
return Number(value).toFixed(1);
}
}
},
drawPoints: {
style: "circle"
},
orientation: "top",
showCurrentTime: true,
end: new Date(end),
max: new Date(end),
min: new Date(start),
start: new Date(start)
};
startTime = options.start.getTime();
endTime = options.end.getTime();
var graph2d = new vis.Graph2d(container, dataset, groups, options);
Given my data names can be super long, I want to implement a tooltip when the user hover the data name, however, I can't find any documentation on adding custom tags to the generated data name html. One can add a class but not data tag.
Example
The way too long data name in that case. A tooltip would be perfect.
Ok I understood what you wanted :)
We can just use a couple extra functions in our c3.generate call and extend the library a bit, this will give you some more flexibility. Just define your long labels inside the oninit function.
Here is the jsFiddle, hover over the legend to see:
https://jsfiddle.net/abacaj90/6v2tpft2/14/
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function legendFollowMouse(e) {
var x = e[0];
var y = e[1];
return {
x: x - 50 + 'px',
y: y + 20 + 'px'
}
}
function createLegendTooltip() {
var svg = this.svg[0][0];
var frag = document.createDocumentFragment();
var div = document.createElement('div');
var span = document.createElement('span');
div.className = 'c3-legend-tooltip-container';
span.className = 'c3-legend-tooltip';
div.appendChild(span);
frag.appendChild(div);
insertAfter(svg, frag);
this.legendHoverNode = span;
}
function generateLegendHoverLabels(labels) {
createLegendTooltip.call(this);
var obj = {};
this.data.targets.map(function(data, i) {
if(typeof labels[i] !== 'undefined') {
obj[data.id] = data.id + ': ' + labels[i];
}
})
return obj;
}
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 20, 180, 240, 100, 190, 250],
['data3', 20, 180, 240, 100, 190, 250]
],
},
oninit: function() {
// declare your extra long labels here
var legendLongLabels = ['long content here, data3 doesnt have a tooltip!','even longer content here, you can style me with css!'];
this.legendHoverContent = generateLegendHoverLabels.call(this, legendLongLabels);
},
legend: {
item: {
onmouseover: function (id) {
// keep default behavior as well as our tooltip
d3.select(this.svg[0][0]).classed('c3-legend-item-focused', true);
if (!this.transiting && this.isTargetToShow(id)) {
this.api.focus(id);
}
// if we defined the long labels, display them
if (this.legendHoverContent.hasOwnProperty(id)) {
var coords = legendFollowMouse(d3.mouse(this.svg[0][0]))
this.legendHoverNode.parentNode.style.display = 'block';
this.legendHoverNode.parentNode.style.top = coords.y;
this.legendHoverNode.parentNode.style.left = coords.x;
this.legendHoverNode.innerHTML = this.legendHoverContent[id];
}
},
onmouseout: function (id) {
// keep default behavior as well
d3.select(this.svg[0][0]).classed('c3-legend-item-focused', false);
this.api.revert();
// just hide the tooltips
this.legendHoverNode.parentNode.style.display = 'none';
}
}
}
});
Temporary answer while waiting for something better:
This is the input Data Im using.
var data = {
"data": [{
"A": "1075.000000",
"date": "01-03-2016"
}, {
"A": "878.571429",
"date": "01-04-2016"
}, {
"A": "485.000000",
"date": "04-03-2016"
}, {
"A": "795.000000",
"date": "05-03-2016"
}, {
"A": "620.000000",
"date": "06-03-2016"
}, {
"A": "957.500000",
"date": "07-03-2016"
}, {
"name": "H1W",
"A": "990.000000"
}, {
"A": "950.000000",
"date": "09-03-2016"
}, {
"A": "680.000000",
"date": "10-03-2016"
}, {
"A": "1000.000000",
"date": "17-03-2016"
}, {
"A": "535.000000",
"date": "18-02-2016"
}],
"name": "A",
"namePlus": {
"location": "B or C or D or E",
"vars": {
"sizes": "Sizes: 2 or 3 or 5",
"unitSizes": "Units Amount: (0 to 2) or (3 to 5)"
}
}}
This is how I process the input
var tooltip = "<ul><li>" + data.name + "</li><li>" + data.namePlus.location + "</li>";
$.each(data.namePlus.vars, function (key, value) {
tooltip += "<li>" + value + "</li>";
});
tooltip += "</ul>";
c3.generate({
bindto: '#lineChart',
data: {
json: data.data,
keys: {
x: 'date',
value: [data.name]
},
xFormat: '%d-%m-%Y',
classes: {
value: 'HEY'
}
});
$(".c3-legend-item-" + data.name).mouseover(function (e) {
$(".myTooltip").html(tooltip).css({visibility: "visible"});
});
$(".c3-legend-item-" + data.name).mouseleave(function (e) {
$(".myTooltip").html(tooltip).css({visibility: "hidden"});
});
And this is the actual css
.myTooltip {
background-color: black;
border-radius: 6px;
color: #fff;
font-size: 12px;
height: 25px;
margin: auto;
opacity: 0.68;
padding: 5px 0;
position: relative;
text-align: center;
top: 14px;
visibility: hidden;
width: 50%;}