I'm attempting to use a float/double value for my annotation vertical line depicting the mean of a bell curve. When I use the provided annotation plugin for chartjs, it won't let me use a floating value with a decimal.
var opt1 = {
canvasBorders: true,
canvasBordersWidth: 3,
canvasBordersColor: "black",
legend: true,
datasetFill: false,
annotateDisplay: true,
pointDot: false,
animationLeftToRight: true,
animationEasing: "linear",
yAxisMinimumInterval: 0.02,
graphTitleFontSize: 18,
scales: {
yAxes: [{
position: "left",
"id": "y-axis-0"
}, {
position: "right",
"id": "y-axis-1"
}],
xAxes: [{
"id": "tots-1",
}]
},
annotation: {
annotations: [{
id: 'a-line-1', // optional
type: 'line',
mode: 'vertical',
scaleID: 'tots-1',
value: average,
borderColor: 'red',
borderWidth: 5,}]
}
},
}
Any thoughts?
Related
I'm trying to add a custom video to the Fotorama slider on the product page when selecting an option.
the code below works but does not play the video when clicking the thumbnail.
galleryData.push({
img: '<img_url>',
thumb: 'thumb_url',
video : '<youtube_video_url>',
type: 'video',
caption: 'Video caption'
});
$('div.product.media').html("");
$('div.product.media').each(function (index, element) {
gallery({
options: {
"nav": "thumbs",
"thumbwidth": 88,
"thumbheight": 110,
"loop": 1,
"arrows": 1,
"navarrows": 1,
"allowfullscreen": 1,
"navtype": "slides",
"navdir": "vertical",
"width": 700,
"height": 560,
"transitionduration": 500
},
data: galleryData,
fullscreen: {
"nav": "thumbs",
"navdir": "vertical",
"navtype": "slides",
"arrows": 1,
"loop": 1,
"transition": "slide",
"transitionduration": 500,
},
"breakpoints": {
"Lesro": {
"conditions": {
"max-width": "767px"
},
"options": {}
}
}
}, element);
});
Thanks a lot!
I want to show in my map in a cluster layer filtering by if is opened or not. How can do it? Should I create two layers?
One with filter: filter["has", "opened"] and other with filter: filter["!", ["has", "opened"]]?
export const clusterLayerOpened = {
id: "clusters",
type: "circle",
source: "earthquakes",
filter: ["has", "opened"],
paint: {
"circle-color": [ "step", ["get", "opened"], "#51bbd6",100,"#f1f075",750,"#f28cb1", ],
"circle-radius": ["step", ["get", "opened"], 20, 100, 30, 750, 40],
},
};
export const clusterLayerNoOpened = {
id: "clusters",
type: "circle",
source: "earthquakes",
filter: ["!", ["has", "opened"]],
paint: {
"circle-color": [ "step", ["get", "opened"], "#51bbd6",100,"#f1f075",750,"#f28cb1", ],
"circle-radius": ["step", ["get", "opened"], 20, 100, 30, 750, 40],
},
};
This is my geojson:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": "ak16994521",
"mag": 2.3,
"time": 1507425650893,
"felt": null,
"tsunami": 0,
"opened": true
},
"geometry": {
"type": "Point",
"coordinates": [-151.5129, 63.1016, 0.0]
}
},
{
"type": "Feature",
"properties": {
"id": "ak16994519",
"mag": 1.7,
"time": 1507425289659,
"felt": null,
"tsunami": 0,
"opened": false
},
"geometry": {
"type": "Point",
"coordinates": [-150.4048, 63.1224, 105.5]
}
}
]
}
It's not necessary to create two separate layers to filter by whether the a point has been opened or not. Here is some code showing how to add a layer which displays all points with the property "opened": true, and hides all points with "opened": false:
map.addLayer({
'id': 'opened',
'type': 'circle',
'source': 'points',
'paint': {
'circle-radius': 10,
'circle-opacity': ["match", ["to-string", ["get", "opened"]], 'true', 1 , 'false', 0, 0]
}
});
To instead show all points with the property "opened": false, you can switch the 'circle-opacity' expression to read:
["match", ["to-string", ["get", "opened"]], 'true', 0 , 'false', 1, 0]
This code makes use of a few Mapbox expressions. I've linked the documentation to each relevant expression here: match, to-string, and get.
Here is a JSFiddle where two layers are added to the map: https://jsfiddle.net/hpkzrm4n/. The points with "opened": true are shown in red and the points with "opened": false are shown in blue. Note that you will need to add your own Mapbox access token where indicated in order to view the results. Here is a screenshot, as a preview:
I am trying to create a graph plot in Echarts 4, where each node belongs to one of two categories: https://codepen.io/autarkie/pen/LqqZjM:
var nodes = [{
"id": 1,
"category": 1
}, {
"id": 2,
"category": 0
}, {
"id": 3,
"category": 1
}, {
"id": 4,
"category": 0
}];
var links = [{
"source": "3",
"target": "1"
}, {
"source": "3",
"target": "2"
}, {
"source": "1",
"target": "2"
}, {
"source": "2",
"target": "4"
}];
var myChart = echarts.init(document.getElementById('chart'));
var option = {
backgroundColor: new echarts.graphic.RadialGradient(0.4, 0.4, 0.7, [{
offset: 0,
color: '#162436'
}, {
offset: 1,
color: '#000'
}]),
legend: {
data: ["Type 1", "Type 2"],
textStyle: {
color: '#fff'
},
icon: 'circle',
type: 'scroll',
orient: 'vertical',
left: 10,
top: 20,
bottom: 20,
itemWidth: 10,
itemHeight: 10
},
animationDurationUpdate: 300,
animationEasingUpdate: 'quinticInOut',
series: [{
type: 'graph',
layout: 'force',
// symbol: 'rect',
//symbolSize: 10,
lineStyle: {
normal: {
curveness: 0.1
}
},
roam: true,
focusNodeAdjacency: true,
legendHoverLink: true,
draggable: true,
force: {
repulsion: 30,
gravity: 0.03,
edgeLength: 50,
layoutAnimation: true
},
data: nodes,
links: links,
categories: [{
name: 'Type 1',
symbol: 'diamond', // !!! DOES NOT WORK !!!
symbolSize: 30, // !!! DOES NOT WORK !!!
itemStyle: {
color: '#79d2a6'
}
},
{
name: 'Type 2',
symbol: "rect", // DOES NOT WORK
symbolSize: 20, // DOES NOT WORK
itemStyle: {
color: '#ff9900'
}
}
],
}]
};
myChart.setOption(option);
Each category should have its own symbol. I know it is possible to specify the symbol for each node separately, like so:
var node_shaped = [{
"id": 1,
"symbol": "rect",
"category": 1
}]
but it this is quite inelegant. Echarts documentation (https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.categories.symbol) specifies the option to include a symbol per category, like in the code above. However, that option has no effect whatsoever on the node shapes. Instead, the default circle shape is used. It is possible to change category color using a similar category-wide option, so I am at loss as to why the shape specification doesn't work. Thanks for taking a look.
Data Table structure is as follows
{
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
}
H Axis options
hAxis: {
slantedText: true, slantedTextAngle: 35,
titleTextStyle: {bold: false, fontSize: 11, color: '#610B38'},
textStyle: {
bold: true, fontSize: 8, color: '#4d4d4d'
},
maxAlternation: 1,
showTextEvery: 1,
viewWindowMode : 'maximized',
gridlines:
{
count: 31
},
bar: { groupWidth: 40 }
}
But in the column graph it is displaying multiple adjacent bars looks like time instead of a single date
This issue happening only for single date.
I want to display the column chart as single bar instead of big rectangle.
Any feedback appreciated
recommend setting the min / max values on the viewWindow explicitly
keeping within a day should prevent "column overflow"
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).on('resize', drawChart);
},
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable({
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
});
var oneDay = (1000 * 60 * 60 * 24);
var dateRange = data.getColumnRange(0);
var chart = new google.visualization.ColumnChart($('.chart')[0]);
chart.draw(data, {
hAxis: {
slantedText: true,
slantedTextAngle: 35,
textStyle: {
bold: true,
fontSize: 8,
color: '#4d4d4d'
},
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart"></div>
not much you can do for the actual size of the column
the release notes from February, 23 2016 mention...
Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.
but none have ever worked for me when only one row of data...
Here is a jsfiddle example where I cannot get data label values or percentages to display when initializing the chart by passing it options when creating the chart object. Only the point.name is displayed in the label. Seems like you can only get these options to work when you create the entire object at run time using the plotOptions structure.
http://jsfiddle.net/nstvx7wc/7/
$(document).ready(function(){
var options = {
chart: {
renderTo: 'chartdiv',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
},
title: {
text: ''
},
};
options.series = [{"colorByPoint": "true", "data": [{"y": 0.36, "name": "series1"}, {"y": 0, "name": "series2"}, {"y": 0, "name": "series3"}, {"y": 0.03, "name": "series4"}, {"y": 0.04, "name": "series5"}, {"y": 0.07, "name": "series6"}]}];
options.title.text = "test pie";
options.pie.dataLabels.enabled = 'true';
chartObject = new Highcharts.Chart(options);
});
You 'pie' option was misconfigured. options.pie doesn't exist. It should be placed under series or the plotoptions property;
See this example; http://jsfiddle.net/nstvx7wc/21/
$(document).ready(function() {
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'test pie'
}
};
options.series = [{
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
"colorByPoint": "true",
"data": [{
"y": 0.36,
"name": "series1"
}, {
"y": 0,
"name": "series2"
}, {
"y": 0,
"name": "series3"
}, {
"y": 0.03,
"name": "series4"
}, {
"y": 0.04,
"name": "series5"
}, {
"y": 0.07,
"name": "series6"
}]
}];
Highcharts.chart('chartdiv', options);
});