amchart add labels in between grids - grid

I need to add labels with difference of 10 in both axis( one each between the grid ), WITHOUT compromising the present number of grids.So the number of grid lines should stay 11 and number of labels will go up to 21. Hope that clears my query.Above is my chart, and this is the code -
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"dataProvider": json,
"valueAxes":
[
{
"id":"my_y",
"autoGridCount": false,
"position": "right",
"tickLength":0,
"gridThickness":0.25,
"minimum":-100,
"maximum":100,
"gridCount": 11,
"labelFrequency" : 0.5,
"gridColor":"black",
"gridAlpha":0.50,
"labelOffset": -356,
"axisAlpha":0,
"strictGridCount" : true,
},
{
"id":"my_x",
"autoGridCount": false,
"position": "bottom",
"tickLength":0,
"gridThickness": 0.25,
"minimum":-100,
"maximum":100,
"gridCount": 11,
"labelFrequency" : 0.5,
"gridColor":"black",
"gridAlpha":0.50,
"labelOffset": -320,
"axisAlpha":0,
},
],
"borderAlpha" : 0,
"startDuration": 0,
"legend":[{
"useGraphSettings": false,
"verticalGap":0,
}],
"guides":[
{
"fillAlpha": 0.10,
"value": -100,
"toValue": 100,
}
],
"graphs":
[
{
"id":"g1",
"lineColor": "#FF6600",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"animationDuration":0,
"balloonText": "[[value]]",
"bullet": "circle",
"lineAlpha": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"fillAlphas": 0,
"bulletBorderAlpha": 0,
"minBulletSize": 30,
"maxBulletSize": 30,
"labelText":"[[x]]",
"labelPosition":"inside",
"markerType" : "none",
"switchable":false,
},
],
"marginLeft": 20,
"marginBottom": 20,
"export": {
"enabled": true,
"menu" : [],
},
});
PS : I tried to change the labelFrequency value but I don't think it takes values below 1.

You're right to assume that labelFrequency can't be set to anything lower than 1, or a non-integer for that matter.
The only workaround I can think of is to increase gridCount to the number which displays labels in increments that you want. I.e. 21.
Then disable grid lines altogether. (gridAlpha: 0)
And finally use guides to display lines at values that you need lines displayed at. I.e.:
{
"id": "my_y",
"autoGridCount": false,
"position": "right",
"tickLength": 0,
"gridThickness": 0.25,
"minimum": -100,
"maximum": 100,
"gridCount": 21,
"labelFrequency": 0.5,
"gridColor": "black",
"gridAlpha": 0,
"labelOffset": -356,
"axisAlpha": 0,
"strictGridCount": true,
"guides": [
{ "value": 80, "lineAlpha": 0.5 },
{ "value": 60, "lineAlpha": 0.5 },
{ "value": 40, "lineAlpha": 0.5 },
{ "value": 20, "lineAlpha": 0.5 },
{ "value": 0, "lineAlpha": 0.5 },
{ "value": -20, "lineAlpha": 0.5 },
{ "value": -40, "lineAlpha": 0.5 },
{ "value": -60, "lineAlpha": 0.5 },
{ "value": -80, "lineAlpha": 0.5 }
]
}

Related

HighCharts: align rotated multiline label

I'm trying to align axis labels in HighCharts
Labels should not be trimed, so ellipsis is not allowed
How it looks now:
How I want it to be:
Code: https://jsfiddle.net/9xw6dL3f/25/
{
"chart": {
"width": 500,
"height": 300,
"type": "column"
},
"title": {
"text": null
},
"xAxis": {
"type": "category",
"labels": {
"rotation": -90,
"style": {
"textOverflow": "none"
}
}
},
"series": [
{
"name": "",
"data": [
{ "name": "Follow me into my theatre of lunacy", "y": -10, "color": "#ABC" },
{ "name": "1", "y": 1, "color": "#000" },
{ "name": "2", "y": 2, "color": "#000" },
{ "name": "3", "y": 3, "color": "#000" },
{ "name": "4", "y": 4, "color": "#000" },
{ "name": "5", "y": 5, "color": "#000" },
]
}
]
}
It is possible to move label depending on it's rows count
Add render function to the chart object
{
"chart": {
...
events: {
render() {
for (let i = 0; i < this.xAxis[0].names.length; i++) {
const label = this.xAxis[0].ticks[i].label;
const rows = (label.element.innerHTML.match(/<\/tspan>/g) || []).length;
label.translate(-8 * rows, 0);
}
}
}
where 8 is half of row size in px
https://jsfiddle.net/kLz1uoga/5/

Vega-Lite: Adding custom legends not based on the field value/auto color/auto shape

I'm looking for a way to output custom legends for multi-field data. Ideally, I'd like to statically color-code all the fields I may have (in total there might be about 20), and output legends per color and arbitrary text, or at least a field name.
In the example below, I'd like a legend to show "blue stroke Series 1 red stroke Series 2".
I'd be happy to show what I have at the moment, but I have tried placing "legend" seemingly everywhere it may fit, and it doesn't do anything.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"x": 1, "y": 10},
{"x": 2, "y": 7},
{"x2": 1, "y2": 11},
{"x2": 2, "y2": 12}
]
},
"encoding": {"x": {"type": "quantitative"},
"y": {"type": "quantitative"}},
"layer": [
{
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "x"},
"y": {"field": "y"},
"color": {"value": "blue"}
}
},
{
"mark": "line",
"encoding": {
"x": {"field": "x2"},
"y": {"field": "y2"},
"color": {"value": "red"}
}
}
]
}
]
}
Legends in Vega-Lite are created from encodings, so if you want a legend to be shown you need to construct an appropriate encoding. For layered charts, one way to do this is using a datum encoding for each layer, and then you can construct a custom color scale mapping these encodings to the desired color. For example (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"x": 1, "y": 10},
{"x": 2, "y": 7},
{"x2": 1, "y2": 11},
{"x2": 2, "y2": 12}
]
},
"encoding": {
"x": {"type": "quantitative"},
"y": {"type": "quantitative"},
"color": {
"type": "nominal",
"scale": {"domain": ["Series1", "Series2"], "range": ["blue", "red"]}
}
},
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "x"},
"y": {"field": "y"},
"color": {"datum": "Series1"}
}
},
{
"mark": "line",
"encoding": {
"x": {"field": "x2"},
"y": {"field": "y2"},
"color": {"datum": "Series2"}
}
}
]
}

Vega-Lite - Is it possible to have the same selector for two different plots?

I've created a plot using Vega-Lite that allows me to use a binder to alter the parameters of a functions that I'm visualizing. It's similar to this sample code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"transform": [
{"calculate": "amp.sin * sin(datum.x)", "as": "sin(x)"},
{"calculate": "amp.cos * cos(datum.x)", "as": "cos(x)"},
{"fold": ["sin(x)", "cos(x)"]}
],
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal", "title": null}
},
"selection": {
"amp": {
"type": "single",
"fields": ["sin", "cos"],
"init": {"sin": 1, "cos": 1},
"bind": {
"sin": {"input": "range", "min": 0, "max": 10, "step": 0.1},
"cos": {"input": "range", "min": 0, "max": 10, "step": 0.1}
}
}
}
}
Here is the code above in the Vega editor.
Now, what I'd like to do is to create another visualization parallel to this one, but with another function, but that would also vary with the same binder.
Is this possible? Note that in my code, each plot uses a different dataset, but share the variable of the binder in common.
Yes, for example you can do this using a "concat". Here is an example based on your chart (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"concat": [
{
"width": 300,
"height": 150,
"transform": [
{"calculate": "amp.sin * sin(datum.x)", "as": "sin(x)"},
{"calculate": "amp.cos * cos(datum.x)", "as": "cos(x)"},
{"fold": ["sin(x)", "cos(x)"]}
],
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal", "title": null}
},
"selection": {
"amp": {
"type": "single",
"fields": ["sin", "cos"],
"init": {"sin": 1, "cos": 1},
"bind": {
"sin": {"input": "range", "min": 0, "max": 10, "step": 0.1},
"cos": {"input": "range", "min": 0, "max": 10, "step": 0.1}
}
}
}
},
{
"width": 300,
"height": 150,
"transform": [
{
"calculate": "amp.cos * cos(datum.x) - amp.sin * sin(datum.x)",
"as": "cos(x) - sin(x)"
}
],
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"field": "cos(x) - sin(x)", "type": "quantitative"}
}
}
],
"resolve": {"scale": {"y": "shared", "color": "independent"}}
}

Changing the video background of this elementor slider

I'm working on this Wordpress website and trying to change the video background of the slider on the homepage. I see it in the code, I see it in the site editor, and it seems to be part of a revolution slider, yet in this slider's properties, I cannot find any instruction relating to it.
Has anyone worked with this situation before? Did I miss something obvious? or did I just research the wrong question?
Here is the JSON definition of the slider in question:
{
"addOns": [],
"carousel": {
"borderRadius": 0,
"borderRadiusUnit": "px",
"ease": "power3.inOut",
"fadeOut": true,
"horizontal": "center",
"infinity": false,
"justify": false,
"justifyMaxWidth": false,
"maxItems": 3,
"maxOpacity": 100,
"maxRotation": 0,
"offsetScale": false,
"paddingBottom": 0,
"paddingTop": 0,
"rotation": false,
"scale": false,
"scaleDown": 50,
"showAllLayers": "false",
"snap": true,
"space": 0,
"speed": 800,
"stretch": false,
"varyFade": false,
"varyRotate": false,
"varyScale": false,
"vertical": "center"
},
"class": "",
"codes": {
"css": "",
"javascript": ""
},
"def": {
"autoResponsive": true,
"background": {
"fit": "cover",
"fitX": 100,
"fitY": 100,
"imageSourceType": "full",
"position": "center center",
"positionX": 0,
"positionY": 0,
"repeat": "no-repeat"
},
"delay": 9000,
"intelligentInherit": true,
"panZoom": {
"blurEnd": 0,
"blurStart": 0,
"duration": 10000,
"ease": "none",
"fitEnd": 100,
"fitStart": 100,
"rotateEnd": 0,
"rotateStart": 0,
"set": false,
"xEnd": 0,
"xStart": 0,
"yEnd": 0,
"yStart": 0
},
"responsiveChilds": true,
"responsiveOffset": true,
"transition": "fade",
"transitionDuration": 300
},
"general": {
"autoPlayVideoOnMobile": true,
"disableFocusListener": false,
"disableOnMobile": false,
"disablePanZoomMobile": false,
"firstSlide": {
"alternativeFirstSlide": 1,
"alternativeFirstSlideSet": false,
"duration": 300,
"set": false,
"slotAmount": 7,
"type": "fade"
},
"layerSelection": false,
"lazyLoad": "none",
"nextSlideOnFocus": false,
"progressbar": {
"color": "rgba(255,255,255,0.5)",
"height": 5,
"position": "bottom",
"set": false
},
"slideshow": {
"initDelay": 0,
"loopSingle": false,
"presetSliderHeight": false,
"shuffle": false,
"slideShow": true,
"stopAfterLoops": 0,
"stopAtSlide": 1,
"stopOnHover": false,
"stopSlider": false,
"viewPort": false,
"viewPortArea": {
"d": {
"e": false,
"u": "",
"v": "200px"
},
"m": {
"e": false,
"u": "",
"v": "200px"
},
"n": {
"e": false,
"u": "",
"v": "200px"
},
"t": {
"e": false,
"u": "",
"v": "200px"
}
},
"viewPortStart": "wait",
"waitForInit": false
},
"useWPML": false
},
"googleFont": [],
"hero": {
"activeSlide": -1
},
"id": "",
"layout": {
"bg": {
"color": "transparent",
"dottedOverlay": "none",
"fit": "cover",
"image": "",
"imageSourceType": "full",
"padding": 0,
"position": "center center",
"repeat": "no-repeat",
"shadow": 0,
"useImage": false
},
"position": {
"addClear": false,
"align": "center",
"fixedOnTop": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0
},
"spinner": {
"color": "#ffffff",
"type": "0"
}
},
"layouttype": "fullwidth",
"modal": {
"bodyclass": "",
"cover": true,
"coverColor": "rgba(0,0,0,0.5)",
"horizontal": "center",
"vertical": "middle"
},
"modalshortcode": "[rev_slider usage=\"modal\" alias=\"slider-1\"][/rev_slider]",
"nav": {
"arrows": {
"alwaysOn": true,
"animDelay": "1000ms",
"animSpeed": "1000ms",
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"left": {
"align": "slider",
"anim": "fade",
"horizontal": "left",
"offsetX": 30,
"offsetY": 0,
"vertical": "center"
},
"preset": "default",
"presets": [],
"right": {
"align": "slider",
"anim": "fade",
"horizontal": "right",
"offsetX": 30,
"offsetY": 0,
"vertical": "center"
},
"rtl": false,
"set": false,
"style": "1000"
},
"bullets": {
"align": "slider",
"alwaysOn": true,
"anim": "fade",
"animDelay": "1000ms",
"animSpeed": "1000ms",
"direction": "horizontal",
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"horizontal": "center",
"offsetX": 0,
"offsetY": 20,
"preset": "default",
"presets": [],
"rtl": false,
"set": false,
"space": 5,
"style": "3000",
"vertical": "bottom"
},
"keyboard": {
"direction": "horizontal",
"set": false
},
"mouse": {
"reverse": "default",
"set": "off"
},
"preview": {
"height": 100,
"width": 50
},
"swipe": {
"blockDragVertical": false,
"direction": "horizontal",
"minTouch": 1,
"set": false,
"setDesktopCarousel": true,
"setMobileCarousel": true,
"setOnDesktop": false,
"velocity": 75
},
"tabs": {
"align": "slider",
"alwaysOn": true,
"amount": 5,
"anim": "fade",
"animDelay": "1000ms",
"animSpeed": "1000ms",
"direction": "horizontal",
"height": 50,
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"horizontal": "center",
"innerOuter": "inner",
"offsetX": 0,
"offsetY": 20,
"padding": 5,
"preset": "default",
"presets": [],
"rtl": false,
"set": false,
"space": 5,
"spanWrapper": false,
"style": "4000",
"vertical": "bottom",
"width": 100,
"widthMin": 100,
"wrapperColor": "transparent"
},
"thumbs": {
"align": "slider",
"alwaysOn": true,
"amount": 5,
"anim": "fade",
"animDelay": "1000ms",
"animSpeed": "1000ms",
"direction": "horizontal",
"height": 50,
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"horizontal": "center",
"innerOuter": "inner",
"offsetX": 0,
"offsetY": 20,
"padding": 5,
"preset": "default",
"presets": [],
"rtl": false,
"set": false,
"space": 5,
"spanWrapper": false,
"style": "2000",
"vertical": "bottom",
"width": 100,
"widthMin": 100,
"wrapperColor": "transparent"
}
},
"parallax": {
"ddd": {
"BGFreeze": false,
"layerOverflow": false,
"overflow": false,
"shadow": false,
"zCorrection": 65
},
"disableOnMobile": false,
"levels": [
5,
10,
15,
20,
25,
30,
35,
40,
45,
46,
47,
48,
49,
50,
51,
30
],
"mouse": {
"bgSpeed": 0,
"layersSpeed": 0,
"origo": "slidercenter",
"speed": 0,
"type": "scroll"
},
"set": false,
"setDDD": false
},
"scrolleffects": {
"bg": false,
"direction": "both",
"disableOnMobile": false,
"layers": false,
"maxBlur": 10,
"multiplicator": "1.3",
"multiplicatorLayers": "1.3",
"parallaxLayers": false,
"set": false,
"setBlur": false,
"setFade": false,
"setGrayScale": false,
"staticLayers": false,
"staticParallaxLayers": false,
"tilt": 30
},
"scrolltimeline": {
"ease": "none",
"fixed": false,
"fixedEnd": 4000,
"fixedStart": 2000,
"layers": false,
"set": false,
"speed": 500
},
"shortcode": "[rev_slider alias=\"slider-1\"][/rev_slider]",
"size": {
"custom": {
"d": true,
"m": true,
"n": true,
"t": true
},
"disableForceFullWidth": false,
"editorCache": {
"d": 500,
"m": 270,
"n": 600,
"t": 430
},
"forceOverflow": false,
"fullScreenOffset": "",
"fullScreenOffsetContainer": "",
"gridEQModule": false,
"height": {
"d": "500px",
"m": "270px",
"n": "600px",
"t": "430px"
},
"keepBPHeight": false,
"maxHeight": 0,
"maxWidth": 0,
"minHeight": "",
"minHeightFullScreen": "",
"overflow": false,
"overflowHidden": false,
"respectAspectRatio": false,
"useFullScreenHeight": true,
"width": {
"d": 1240,
"m": 480,
"n": 1024,
"t": 778
}
},
"skins": {
"cid": 2,
"colors": [
{
"alias": "Highlight",
"ref": [],
"v": "#ff0000"
},
{
"alias": "Headline Text",
"ref": [],
"v": "#ffffff"
},
{
"alias": "Content Text",
"ref": [],
"v": "#00ffff"
}
],
"colorsAtStart": false
},
"snap": {
"adjust": "none",
"gap": 20,
"helpLines": false,
"snap": false
},
"source": {
"facebook": {
"album": "",
"appId": "",
"appSecret": "",
"count": "",
"pageURL": "",
"transient": 1200,
"typeSource": "album"
},
"flickr": {
"apiKey": "",
"count": "",
"galleryURL": "",
"groupURL": "",
"photoSet": "",
"transient": 1200,
"type": "publicphotos",
"userURL": ""
},
"gallery": [],
"instagram": {
"count": "",
"hashTag": "",
"transient": 1200,
"type": "user",
"userId": ""
},
"post": {
"category": "",
"excerptLimit": 55,
"fetchType": "cat_tag",
"list": "",
"maxPosts": 30,
"sortBy": "ID",
"sortDirection": "DESC",
"subType": "post",
"types": "post"
},
"twitter": {
"accessSecret": "",
"accessToken": "",
"consumerKey": "",
"consumerSecret": "",
"count": "",
"excludeReplies": false,
"imageOnly": false,
"includeRetweets": false,
"transient": 1200,
"userId": ""
},
"vimeo": {
"albumId": "",
"channelName": "",
"count": "",
"groupName": "",
"transient": 1200,
"typeSource": "user",
"userName": ""
},
"woo": {
"category": "",
"excerptLimit": 55,
"featuredOnly": false,
"inStockOnly": false,
"maxProducts": 30,
"regPriceFrom": "",
"regPriceTo": "",
"salePriceFrom": "",
"salePriceTo": "",
"sortBy": "ID",
"sortDirection": "DESC",
"types": "product"
},
"youtube": {
"api": "",
"channelId": "",
"count": "",
"playList": "",
"transient": 1200,
"typeSource": "channel"
}
},
"sourcetype": "gallery",
"troubleshooting": {
"alternateImageType": "off",
"alternateURL": "",
"ignoreHeightChanges": false,
"ignoreHeightChangesUnderLimit": 0,
"jsInBody": false,
"jsNoConflict": false,
"outPutFilter": "none",
"simplify_ie8_ios4": false
},
"type": "standard",
"version": "6.2.2",
"visibility": {
"hideAllLayersUnderLimit": 0,
"hideSelectedLayersUnderLimit": 0,
"hideSliderUnderLimit": 0
},
"wrapperclass": ""
}
I can see that is is revolution slider. This is the source I saw for the video
<source src="//askdrdougnow.com/wp-content/uploads/2020/05/videoplayback.webm" type="video/mp4" data-stylerecorder="true" style="text-align: left; line-height: 20px; letter-spacing: 0px; font-weight: 400; border-color: rgb(0, 0, 0); border-style: none; margin: 0px; border-radius: 0px; padding: 0px;">
I know Revolution Slider has a place for editing all sliders and you can set the background of a slider as a video so that is were you would need to find and remove it.

Highchart Pie Chart not working properly with series

Sample Code
JsFiddle Example for below code.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [
{
"name": "Display",
"y": 0.1,
"value": 5
},
{
"name": "Paid Social",
"y": 0,
"value": 0,
sliced: true,
selected: true
},
{
"name": "Direct",
"y": 14.5,
"value": 559
},
{
"name": "Referral",
"y": 2,
"value": 77
},
{
"name": "Email",
"y": 4,
"value": 152
},
{
"name": "Other",
"y": 0,
"value": 1
},
{
"name": "Organic Search",
"y": 23.4,
"value": 901
},
{
"name": "Meta Search",
"y": 0.2,
"value": 5
},
{
"name": "Organic Social",
"y": 2.4,
"value": 93
},
{
"name": "Directory",
"y": 0.2,
"value": 9
},
{
"name": "Other Advertising",
"y": 0.1,
"value": 3
},
{
"name": "OTA Referral Traffic",
"y": 0.7,
"value": 26
},
{
"name": "Paid Search",
"y": 27.8,
"value": 1068
},
{
"name": "Local",
"y": 24.5,
"value": 941
}]
}]
});
Scenario
I want to display dataLabels for all even y value is zero.
In Above code We have "name": "Display" y=0.1 but still it is not displaying in Pie Chart don't know why. If any one have idea about this problem please let me know.
The dataLabels are hidden due to lack of space and overlapping. As a solution you can set: padding: 0
plotOptions: {
pie: {
...,
dataLabels: {
padding: 0,
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/g5s27tyb/
API Reference: https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.padding

Resources