I'm trying to add "Advanced Real Time chart" widget from tradinview. I'm able to add indicator Exponential moving average and Simple moving average. But it takes default 9 days length. I want to change that.
I tried as below but it does not work. Could somebody please help. Thanks a lot in advance.
widget = new TradingView.widget(
{
"width": 1200,
"height": 700,
"symbol": "NSE:DRREDDY",
"interval": "D",
"timezone": "Asia/Kolkata",
"theme": "Dark",
"style": "1",
"locale": "in",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"details": true,
"studies_overrides": {
"moving average exponential.length": 20
},
"studies": [
"MAExp#tv-basicstudies"
],
"container_id": "tradingview_f6d89"
}
Here's the way to do it :
"studies": [
{
"id": "MAExp#tv-basicstudies",
"version": 60,
"inputs": {
"length": 20
}
},
...
The code above takes EMA 20 ticks back on the current time frame (TF), so if you want days, you need to set TF to days and change this value to 9 (or equivalently, set TF to hours and set EMA to 24*9).
Related
I am using vega-lite to create a pie chart (on Airtable). I have a single data point, which is a target set by me, and the percentage complete for that target. For example, as below:
{
"Target": "Get 10 customers",
"Percentage complete": "60"
}
I would like to make a pie chart that is 60% complete, and the rest empty. Similar to the interactive single arc pie chart displayed https://vega.github.io/vega-lite/docs/arc.html.
My code currently looks like this
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Customer Acquired",
"width": "container",
"height": "container",
"data": {
"values": [
{
"Target": "Get 10 customers",
"Percentage complete": "60"
}
]},
"mark": {
"type": "arc",
"tooltip": true
},
"encoding": {
"theta": {
"field": "Percentage complete",
"type": "quantitative"
}
}
}
And my pie chart currently just looks like this:
I realise I could force the pie chart to appear the way I want it by manually setting the theta2 property like so
"mark": {
"type": "arc",
"tooltip": true,
"theta2": 3.5
}
However I don't know what the "Percentage complete" field will be and this value may change often, so I would rather not have to do it manually. Is this at all possible with vega-lite?
The domain for the theta encoding will automatically be set to the minimum and maximum of your input data. To show the correct portion of the chart, you need to set the domain to [0, 100]:
"encoding": {
"theta": {
"field": "Percentage complete",
"type": "quantitative",
"scale": {"domain": [0, 100]}
}
}
You can view the resulting chart in the vega editor:
Is there a way to get a adjustable selection in vega-lite?
I found this example but I think this is made with plain vega.
Vega-Lite does not provide any way to create an interval selection with a size that is adjustable by clicking and dragging on the edges.
Available configuration properties are listed in the interval selection docs. The only configurable interactions are translate, which enables moving the selection by clicking and dragging, and zoom, which enables changing the selection's size by zooming on its interior; both of these are True by default.
Here is a simple specification that lets you see the effect of these configurations (open in editor):
{
"data": {"url": "data/sp500.csv"},
"mark": "area",
"selection": {
"brush": {
"type": "interval",
"encodings": ["x"],
"zoom": true,
"translate": true
}
},
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"width": 400
}
i have made some charts for spreader beams in Amcharts (Worpress) and want to change the toolstips,
reverse the order of the 2 values.
append "tonnes" and "metres" after the respective values.
I can swap the order they appear in the code to change the order they appear, but how to append in plain text after the digit values so it shows "8 tonnes: 2 metres"?
Code for these is below in the tooltipText:
"series": [{
"type": "LineSeries",
"name": "30° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value1",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
}, {
"type": "LineSeries",
"name": "45° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"dataFields": {
"valueY": "value2",
"categoryX": "category"
},
"simplifiedProcessing": true,
"calculatePercent": true,
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
url is https://applifting.ga/modular-spreader-beams/sectionlift-6/
Thanks
Just swapped the order of the tool tip values and appended in plain text the denominator.
I have an AmCharts working, this is the code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"precision":"3",
"decimalSeparator": ",",
"thousandsSeparator": ".",
"legend": {
"horizontalGap": 10,
"maxColumns": 3,
"position": "top",
"useGraphSettings": false,
"markerSize": 10,
"marginTop": 20,
"autoMargins":true,
"forceWidth":true,
"valueAlign":"right",
"labelWidth":85,
"valueWidth":85
},
"dataProvider": response,
"synchronizeGrid":true,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Activos"
}],
/*"startDuration": 0.5,*/
"graphs": graphs,
"chartScrollbar": {},
"chartCursor": {
"cursorPosition": "mouse"
},
"categoryField": "diahora",
"categoryAxis": {
/*"parseDates": true,*/
"gridPosition": "start",
"axisColor": "#DADADA",
/*"minorGridEnabled": true*/
},
"export": {
"enabled": true,
"position": "top-right",
"class": "export-main",
"menu": [ {
"title": "Exportar el gráfico a archivo de imagen",
"label": "Descargar",
"menu": [ "PNG", "JPG", "PDF" ]
}]
}
});
I'm calling it with ajax with:
$.get(url, function(response){
So, I need to get the 2 values of the range of X of the graph that is being rendered on the browser after a zoom, any idea?
For example, when the graph starts, the range of the axis x are 0 and 100. If I zoom into some range, for example 40 and 60, I need to retrieve those values (40 and 60) because I will use them for another things in the page.
So, how could I save those ranges after every ajax call?
AmCharts provides the zoomed event, which gives you the start and end indices/values. You can use that and store the values for whatever you need, e.g.
AmCharts.makeChart("chartdiv", {
// ...
listeners: [{
event: "zoomed",
method: function(e) {
//e.startIndex and e.endIndex gives you the indicies in the dataProvider
//e.startValue and e.endValue gives you the start and end values
//e.startDate and e.endDate gives you the start and end dates if you're using parseDates
}
}]
});
Note that zoomed is also called on the initial load. If you don't want to capture the initial start/end values, you might need to keep track of the first load before storing those values on subsequent zoom events.
I'm trying to build a Gantt chart based on amcharts. I will probably have only one item per line though, so I tried with the sample _JSON_ganttDateBased but when I leave only one item per row (John, Smith and Ben only have one task each), the X axis reverts to time instead of date.
I looked into floating bar as a possible way around but I'm not sure I can put dates on the axis.
Thanks
This happens because the total time span is small and there's plenty of space to put grid lines / labels on X axis. So the chart reverts to lines.
This can be easily resolved by enforcing the granularity for your value axis to daily:
"valueAxis": {
"type": "date",
"minPeriod": "DD"
}
That should revert your axis increments back to days.
Here's a working example:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "gantt",
"period": "DD",
"valueAxis": {
"type": "date",
"minPeriod": "DD"
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "[[open]] - [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"dataDateFormat": "YYYY-MM-DD",
"startDateField": "start",
"endDateField": "end",
"dataProvider": [ {
"category": "John",
"segments": [ {
"start": "2015-01-02",
"end": "2015-01-03"
} ]
}, {
"category": "Smith",
"segments": [ {
"start": "2015-01-01",
"end": "2015-01-02"
} ]
}, {
"category": "Ben",
"segments": [ {
"start": "2015-01-06",
"end": "2015-01-09"
} ]
} ],
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true
},
"chartScrollbar": {
}
} );
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>