I'm trying to override the default configuration on the Advanced Real-Time Chart TradingView Widget.
I added a simple moving average on which I managed to set the period (from default 9 to 200).
I would like to change the color, but I didn't find any documentation on how to achieve that?
Question 1 : Is there any documentation on how to customize the widget?
Question 2 : Is it possible / how to change the indicators colors?
Here is a snippet of what I'm trying to achieve:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_f7f00"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">AAPL Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
// ==================== BEGIN ====================
"studies": [
{
id: "MASimple#tv-basicstudies",
// This sets the period
inputs: {
length: 200,
},
// This doesn't work...
styles: {
color: '#ff0000',
}
},
],
// ==================== END ====================
"container_id": "tradingview_f7f00"
}
);
</script>
</div>
<!-- TradingView Widget END -->
Refer:
Tradingview Simple Moving Average widget configure
Try like this,
You should use the names of the studies in the Insert Study dialog as they are but using lower case letters.
"studies_overrides": {
"moving average.ma.color": "#2A2E39",
"moving average.ma.linewidth": 2,
},
You need to pass an overrider object to the widget constructor just like you are passing other parameters such as width, or height:
new TradingView.widget({
overrides: {
'paneProperties.background': '#2E2E2E',
}
});
This one would change the background, for example.
To know more about overrides just consult the wiki page of the library, on the overrides section :)
Related
I have a highstock chart. Is it possible to render a slider inside the chart area? There's only simple elements eg text, box etc are given in documentation.
You can use annotations to add some scrollable HTML element:
annotations: [{
labelOptions: {
...,
useHTML: true,
shape: 'rect',
formatter: function() {
return '<div class="annotationContainer"><div>Some text</div></div>'
},
y: 15
}
}]
Live demo: http://jsfiddle.net/BlackLabel/sfLum9ep/
API Reference: https://api.highcharts.com/highstock/annotations.labelOptions.useHTML
This is in continuation to the question asked in github, Fit a wider table into PDF #261.
I'm reusing the same method(doc.autoTable) to create PDF out of different HTML inputs.
So, If I define the column style of 0th column as columnWidth: 'wrap', then the same style will be applied for all the HTML tables that invoke this particular method.
I'm not sure If I can follow long text example, as both the column names & table body are coming from HTML page directly. Whereas in the long text example, I'm seeing the column names being declared/defined as shown below
var columnsLong = getColumns().concat([
{title: "Title with\nlinebreak", dataKey: "text2"},
{title: "Long text column", dataKey: "text"},
]);
Now there are 2 questions.
1. I dont want to apply 'WRAP' for all the columns, as the table gets cut.
2. Need to apply 'wrap' for certain columns alone by mentioning the column name that comes from HTML/GSP page.
This is my code
var res = doc.autoTableHtmlToJson($(".printReportsCaveat")[0]);
doc.autoTable(res.columns, res.data, {
columnStyles : {'Plant':{columnWidth: 'wrap'},
'Mine':{columnWidth: 'wrap'},
0:{textColor: [0,105,170]}
},
margin: {top: 55, bottom : 110},
headerStyles: {
overflow: 'linebreak',
// columnWidth: 'auto',
halign: 'center'
},
styles : {
overflow: 'linebreak',
halign: 'center',
fontSize: 8
},
createdCell: function(cell, data) {
var group = $('#groupByValue').val();
addColorToCell(group, level3Flag, level2Flag, data, cell);
},
addPageContent : function(data) {
printHeadNFoot(doc, userDtl, data);
},
drawCell: function(cell, data) {
designCell(data,doc);
},
});
Kindly help!
If I understand your issue correctly you can try referencing a specific column by index instead of by key. I.e. columnWidth: {0: columnWidth: 'wrap'}.
How would I bind styles using computed properties in VueJS while integrating with VueX.
The issue I am having is in regards to my style properties not updating after a change in my VueX Store.
Code Examples:
//VueX Store
const store = new Vuex.Store({
state : {
div: [
{
offset: 0,
width: 1,
text : 'Hello World'
},
{
offset: 0,
width: 1,
text : 'Hello World As Well'
}
]
}
});
//My component
<template>
<div v-bind:style="{ width: width, left: offset}">
<p>{{text}}</p>
</div>
</template>
<script>
export default {
name: 'divBox',
computed : {
text : function() {
return this.$store.state.div[this.Id].text;
},
width : function() {
return this.$store.state.div[this.Id].width;
},
offset : function() {
return this.$store.state.div[this.Id].offset;
}
},
props : ['Id']
}
</script>
Here is a working example of how to use vuex to do what you are wanting. https://jsfiddle.net/n9jmu5v7/770/ I assume your problem is the fact that your store does not contain any mutations https://vuex.vuejs.org/en/mutations.html.
mutations: {
bgChange: state => state.bg='grey',
colorChange: state => state.color='green'
}
Also, remember that just because your using vuex doesn't mean you need to put everything into it, it is fine to keep local data in a component. For example component style information sounds like something that doesn't need to be shared with anything else (Obviously you may have a reason for storing it in vuex that does make sense).
I have integrated the bootstrap-wysihtml5 editor to description section in my rails application. Now I want to add the client side validation so that it would validate the presence of description field. I used bootstrap-wysihtml5-rails gem.
The editor is being initialized with following code:
<script type="text/javascript">
$(document).ready(function(){
$('#description').each(function(i, elem) {
$(elem).wysihtml5({
toolbar: {
"fa": true, // use Font Awesome
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false // Blockquote
}
});
});
})
Thanks in advance.
Found the solution by adding the events as suggested by the documentation
$('#some-textarea').wysihtml5({
"events": {
"load": function() {
console.log("Loaded!");
},
"blur": function() {
console.log("Blured");
}
}
});
i have been trying to change the color of my event with no success.
my git-ripo is https://github.com/mzararagoza/rails-fullcalendar-icecube and there is a sample of the site.
i am loading my event on with json that looks like
http://rails-fullcalendar-icecube.herokuapp.com/event_instances.json
{
"_routes": null,
"title": "ddd",
"color": "#b319ab",
"url": "/events/6",
"start": "2013-06-12T00:00:00-05:00",
"end": "2013-06-12T23:59:59-05:00",
"allDay": true,
"event_id": 6
}
Thanks for all the help
Try assigning a classname to it and define that class inside a CSS block of code, just like this one:
<style>
.myCalendarEvent{
color:#000;
background-color:#FFF;
border-color:#669999;
width: 100%;
}
</style>
To change the color for all events, the recommanded way is to use fullCalendar's API:
$('#calendar').fullCalendar({
eventColor: '#yourcolor'
});
To change a specific event's color knowing it's id:
event = $('#full-calendar').fullCalendar('clientEvents', event_id)
event.color = '#yourcolor'
$('#full-calendar').fullCalendar('updateEvent', event)