Develop Reference

Drawing apexchart timeline chart with dynamic series of data

hi guys i am trying apexchart.js librry to draw a timeline chart.
i want a multiple series depending on tasks i have in sprint in bubble.io in which i want to give name and data parameter dynamically.
following is my code
<div id='chart' style='height: 70vh;'></div>
<script>
var task=[Parent group's Sprint's tasks:each item's Name:formatted as JSON-safe];
var names=[Parent group's Sprint's tasks:each item's developer:unique elements's Fname:formatted as JSON-safe];
var _startDates=[Parent group's Sprint's tasks:each item's Start-date:extract UNIX];
var _endDates=[Parent group's Sprint's tasks:each item's End-date:extract UNIX];
var startDates=[];
var endDates=[];
for(var i=0;i<task.length;i++){
startDates.push(new Date(_startDates[i]));
endDates.push(new Date(_endDates[i]));
}
console.log(names);
function getResult(){
var result=[];
var _data=[];
for (var j=0;j<task.lenght;j++){
_data.push({x:task[i],y:[startDates[i].getTime(), endDates[i].getTime()], fillColor: "#008FFB"})
}
for(var i=0;i<names.length;i++){
result.push({name:names[i],data: _data[i]});
}
return result;
}
var options = {
series:[
getResult()
],
chart: {
height: 450,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true
}
}, xaxis: {
type: 'datetime'
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
but it is giving me an error saying
It is a possibility that you may have not included 'data' property in series.
i would appreciate if anyone can suggest me where i am making mistake
thanks

Remove/Hide/Delete an array of features from Azure Map

This is a follow on questions from Azure Maps (with Turf.js) - can't get the 'points' from the SymbolLayer
I now have a function that loads the data "onclick" from a JSON location.
What I am trying to do is now Remove the data. A toggle-on / toggle-off function.
Full code is: https://espiritos.projectwebdev.co.uk/index-v1.0.8a.html
But the key function I am concerned with is:
$(document).on("click", ".toggleCounty.on", function(event) {
if ($(this).hasClass("on")) {
var elementsToRemove = "";
$(this).toggleClass("off");
$(this).toggleClass("on");
var countyID = $(this).attr("data-countyID");
var url = geoJsonData[countyID].url;
$.getJSON(url, function(data) {
var noOfFeatures = Object.keys(data.features).length;
console.log(noOfFeatures);
for (var i = 0; i < noOfFeatures; i++) {
console.log("[" + i + "]");
console.log(data.features[i]);
datasource.remove(data.features[i]);
// map.data.remove(data.features[i]);
debugger;
}
});
}
});
I do an API lookup from a variable "geoJsonData":
var geoJsonData = [
{
name: "Hertfordshire",
shown: "off",
url:
"https://www.naptan.projectwebdev.co.uk/api/v1/get/stoppoints?fields=all&format=geojson&filter=NptgLocalityRef|E0000708",
geomType: "points"
},
{
name: "Hampshire",
shown: "off",
url:
"https://www.naptan.projectwebdev.co.uk/api/v1/get/stoppoints?fields=all&format=geojson&filter=NptgLocalityRef|E0044074",
geomType: "points"
},
{
name: "Oxfordshire",
shown: "off",
url:
"https://www.naptan.projectwebdev.co.uk/api/v1/get/stoppoints?fields=all&format=geojson&filter=NptgLocalityRef|E0000708",
geomType: "points"
}
];
I load in the "features" from the JSON...
And then I just can't work out how to remove those features from the map.
I have popped a "debugger;" where the issue is.
I am extremely grateful for any guidance. Thank you.

It looks like in the first code block you are loading GeoJSON data from the web and then trying to remove it from a data source, but you never add it to the data source. That won't work. If you previously loaded the same data into the data source, I don't think that would work either since these are fundamentally different JSON object instances. The one way you can get this to work is to add unique ID's to each feature in your GeoJSON files. Then the data source can do a match on that. For example:
{
"type": "Feature",
"id": 1,
"geometry": {
"type": "Point",
"coordinates": [-0.61827807482, 51.537852954]
},
"properties": {
"AtcoCode": "040000000127",
"NaptanCode": "bucgjtjt",
"CommonName": "Farnham House",
"Street": "Farnham Lane",
"Indicator": "adj",
"NptgLocalityRef": "E0044074",
"GridType": "UKOS",
"Easting": "495927",
"Northing": "183010",
"StopType": "BCT",
"BusStopType": "MKD",
"TimingStatus": "OTH",
"CompassPoint": "SE",
"Degrees": "135",
"StopAreaRef": "",
"AdministrativeAreaRef": "70"
}
},
Note you will need to make sure all id's across all your files are unique.
Some other approaches you can consider;
If there is a property in each feature that can relate a feature back to its original file (i.e. "source": "Hertfordshire"), then you could us a filter in the layers to control what is rendered based on this property.
If you only ever load the data for one file at a time and remove all other data, then consider using the datasource.setShapes function. This will overwrite all data in the data source.
Update
I have put together a more in depth sample that shows toggling between different data sets. It looks like these data sets are small, so I load them the first time they are needed into the data source and leave them in there. Then to toggle I simply use a filter at the layer level. This makes it much faster to reload a data set a second time. This will work fine for data sets that are tens of thousands in size. If you are working with larger data sets, then removing the data might be something to consider. I also noticed when putting this sample together, the URL for the first and last data set you provided are the same (assuming this is an error).
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script type='text/javascript'>
var map, datasource, layer;
var geoJsonData = [
{
name: "Hertfordshire",
shown: "off",
url:
"https://www.naptan.projectwebdev.co.uk/api/v1/get/stoppoints?fields=all&format=geojson&filter=NptgLocalityRef|E0000708",
geomType: "points"
},
{
name: "Hampshire",
shown: "off",
url:
"https://www.naptan.projectwebdev.co.uk/api/v1/get/stoppoints?fields=all&format=geojson&filter=NptgLocalityRef|E0044074",
geomType: "points"
},
{
name: "Oxfordshire",
shown: "off",
url:
"https://www.naptan.projectwebdev.co.uk/api/v1/get/stoppoints?fields=all&format=geojson&filter=NptgLocalityRef|E0000708",
geomType: "points"
}
];
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-0.76, 51.6],
zoom: 10,
view: 'Auto',
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a layer to render the points.
layer = new atlas.layer.BubbleLayer(datasource);
map.layers.add(layer);
loadDataSetPanel();
});
}
function loadDataSetPanel(){
var html = [];
for(var i=0;i<geoJsonData.length;i++){
html.push(`<input type="checkbox" onclick="toggleDataSet('${geoJsonData[i].name}')"> ${geoJsonData[i].name}<br/>`);
}
document.getElementById('dataSetPanel').innerHTML = html.join('');
}
function toggleDataSet(name){
var ds = getDataSetByName(name);
if(ds){
//Toggle the shown state of the data set.
ds.show = (typeof ds.show === undefined)? true : !ds.show;
//Update filter on data source.
updateFilter();
//Check to see if data set is loaded, if not, load it.
if(!ds.loaded){
loadDataSet(ds);
}
}
}
function loadDataSet(ds) {
//Fetch the data directly as we want to modify it before it is entered into the data source.
fetch(ds.url)
.then(r => r.json())
.then(r => {
var f = r.features;
//Enrich the features.
for(var i=0;i<f.length;i++){
//Make the AtcoCode the unique ID for each feature. This will allow for lookups and removal by ID.
f[i].id = f[i].properties.AtcoCode;
//Add the data set name as a property for each feature for filtering purposes.
f[i].properties.dataset = ds.name;
}
//Add the features to the data source.
datasource.add(f);
});
}
function updateFilter(){
var dataSetsToShow = [];
//Get the name of each data set that should be shown.
for(var i=0;i<geoJsonData.length;i++){
if(geoJsonData[i].show){
dataSetsToShow.push(geoJsonData[i].name);
}
}
if(dataSetsToShow.length === 0){
//If there is no layers to show, set filter to false.
layer.setOptions({ filter: ['literal', false] });
} else {
//Create a data driven filter to hide the
var filter = [
'match',
//Get the data set property.
['get', 'dataset'],
//See if it matches any of the data set names to show.
dataSetsToShow,
//If so, return true, to indicate the feature should be shown.
true,
//Else, return false to not render feature.
false
];
//Update the filter on the layer.
layer.setOptions({ filter: filter });
}
}
function getDataSetByName(name){
for(var i=0;i<geoJsonData.length;i++){
if(geoJsonData[i].name === name){
return geoJsonData[i];
}
}
return null;
}
</script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#myMap {
position: relative;
width: 100%;
height: 100%;
}
#dataSetPanel {
position: absolute;
left:10px;
top:10px;
background-color: white;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
<div id="dataSetPanel"></div>
</body>
</html>

How to create custom legend in ChartJS

I need to create custom legend for my donut chart using ChartJS library.
I have created donut with default legend provided by ChartJS but I need some modification.
I would like to have value above the car name. Also I don't like sticky legend I want to have it separate from donut so I can change the style for fonts, boxes (next to the text "Audi" for example)
I know there is some Legend generator but I'm not sure how to use it with VueJS - because I'm using VueJS as a framework
This is how my legend looks like now - http://imgur.com/a/NPUoi
My code:
From Vue component where I import a donut component:
<div class="col-md-6">
<div class="chart-box">
<p class="chart-title">Cars</p>
<donut-message id="chart-parent"></donut-message>
</div>
</div>
Javascript:
import { Doughnut } from 'vue-chartjs'
export default Doughnut.extend({
ready () {
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.legend.display = false;
this.render({
labels: ['Audi','BMW','Ford','Opel'],
datasets: [
{
label: 'Cars',
backgroundColor: ['#35d89b','#4676ea','#fba545','#e6ebfd'],
data: [40, 30, 20, 10]
}
]
},
{
responsive: true,
cutoutPercentage: 75,
legend: {
display: true,
position: "right",
fullWidth: true,
labels: {
boxWidth: 10,
fontSize: 14
}
},
animation: {
animateScale: true
}
})
}
});

I'm having the same problem trying to understand the documentation and this link might clarify the process of customize the legends:
https://codepen.io/michiel-nuovo/pen/RRaRRv
The trick is to track a callback to build your own HTML structure and return this new structure to ChartJS.
Inside the options object:
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
text.push('<li><span style="background-color:' +
chart.data.datasets[0].backgroundColor[i] + '">');
if (chart.data.labels[i]) {
text.push(chart.data.labels[i]);
}
text.push('</span></li>');
}
text.push('</ul>');
return text.join("");
}
Second, you need a container to insert the new html and using the method myChart.generateLegend() to get the customized html:
$("#your-legend-container").html(myChart.generateLegend());
After that, if you need, track down the events:
$("#your-legend-container").on('click', "li", function() {
myChart.data.datasets[0].data[$(this).index()] += 50;
myChart.update();
console.log('legend: ' + data.datasets[0].data[$(this).index()]);
});
$('#myChart').on('click', function(evt) {
var activePoints = myChart.getElementsAtEvent(evt);
var firstPoint = activePoints[0];
if (firstPoint !== undefined) {
console.log('canvas: ' +
data.datasets[firstPoint._datasetIndex].data[firstPoint._index]);
}
else {
myChart.data.labels.push("New");
myChart.data.datasets[0].data.push(100);
myChart.data.datasets[0].backgroundColor.push("red");
myChart.options.animation.animateRotate = false;
myChart.options.animation.animateScale = false;
myChart.update();
$("#your-legend-container").html(myChart.generateLegend());
}
}
Another solution that I found, if you don't need to change the HTMl structure inside the legend, you can just insert the same HTML in your legend container and customize it by CSS, check this another link:
http://jsfiddle.net/vrwjfg9z/
Hope it works for you.

You can extract the legend markup.
data () {
return {
legendMarkup: ''
}
},
ready () {
this.legendMarkup = this._chart.generateLegend()
}
And in your template you can output it.
<div class="legend" ref="legend" v-html="legendMarkup"></div>
this._chart is the internal chartjs instance in vue-chartjs. So you can call all chartjs methods which are not exposed by vue-chartjs api over it.
However you can also use the legend generator. The usage is the same in vue. You can pass in the options, use callbacks etc.

please check this documentation
.
Legend Configuration
The chart legend displays data about the datasets that area appearing on the chart.
Configuration options
Position of the legend. Options are:
'top'
'left'
'bottom'
'right'
Legend Item Interface
Items passed to the legend onClick function are the ones returned from labels.generateLabels. These items must implement the following interface.
{
// Label that will be displayed
text: String,
// Fill style of the legend box
fillStyle: Color,
// If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
hidden: Boolean,
// For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
lineCap: String,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
lineDash: Array[Number],
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
lineDashOffset: Number,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
lineJoin: String,
// Width of box border
lineWidth: Number,
// Stroke style of the legend box
strokeStyle: Color
// Point style of the legend box (only used if usePointStyle is true)
pointStyle: String
}
Example
The following example will create a chart with the legend enabled and turn all of the text red in color.
var chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
}
});
Custom On Click Actions
It can be common to want to trigger different behaviour when clicking an item in the legend. This can be easily achieved using a callback in the config object.
The default legend click handler is:
function(e, legendItem) {
var index = legendItem.datasetIndex;
var ci = this.chart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
}
Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
var index = legendItem.datasetIndex;
if (index > 1) {
// Do the original logic
defaultLegendClickHandler(e, legendItem);
} else {
let ci = this.chart;
[ci.getDatasetMeta(0),
ci.getDatasetMeta(1)].forEach(function(meta) {
meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
});
ci.update();
}
};
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
}
}
});
Now when you click the legend in this chart, the visibility of the first two datasets will be linked together.
HTML Legends
Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a generateLegend() method on their prototype that returns an HTML string for the legend.
To configure how this legend is generated, you can change the legendCallback config property.
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legendCallback: function(chart) {
// Return the HTML string here.
}
}
});

How to get a decent last-row height in vis.js?

I'm new to this vis.js library (timeline module) and I'm trying to draw a timeline with some blocks. The problem is the height of the last row / group; as you can see in the picture, it's just too high compared to the other rows in the timeline.
The height of these rows are calculated by the library so I can't just give it a styling.
Javascript code to initiate the timeline:
var groups = new vis.DataSet(
unitsData.map(function(unit) {
return {
id: unit.id,
content: unit.name,
};
})
);
var items = new vis.DataSet(
shiftsData.map(function(s) {
return {
id: s.Id,
group: s.UnitId,
content: s.ShiftTypeName,
start: moment(s.Start),
end: moment(s.End),
}
})
);
// Configuration for the Timeline
var options = {
stack: false,
};
// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);

You can set the configuration option {margin: { axis: 0}} for that, see docs for more information.

How to set default layer visible in openlayers 2

I have two layers and switcher in openlayers. After init immediately I would like to set second layer to be visible, but still showed first added layer.
I tried: setVisibility, setBaseLayer, but without successful.
Here is part of code:
var gmapLayer = new OpenLayers.Layer.Google("Google sattelite", { type: google.maps.MapTypeId.SATELLITE, visibility: false });
var gmapStreetLayer = new OpenLayers.Layer.Google("Google streets", { visibility: false });
map.addLayer(gmapLayer);
map.addLayer(gmapStreetLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
After init I tried:
map.setBaseLayer(selLayer);
//or
selLayer.setVisibility(true);

Ok I found problem. I used setBaseLayer wrong because called to array see:
var selLayer = map.getLayersByName(selectedLayer);
if (selLayer !== null) {
map.setBaseLayer(selLayer); //<---Wrong
}
Right solutions is:
var selLayer = map.getLayersByName(selectedLayer);
if (selLayer !== null) {
map.setBaseLayer(selLayer[0]); //<--Good
}