I am using the [lightweight-charts] javascript library to generate some charts. For this example I am using the Realtime emulation chart.
In this example the background color is white. I would like to set the background color to black. I am following the documentation but I can't achieve the goal.
Following is the code I am using but it is not working:
var chart = LightweightCharts.createChart(document.getElementById('chart'), {
width: 1200,
height: 800,
background: '#000000',
textColor: '#ffffff'
});
var candleSeries = chart.addCandlestickSeries();
var data = [...]
What am I missing?
You'll need to wrap both background & textColor within a layout property like
var chart = LightweightCharts.createChart(document.getElementById('chart'), {
width: 1200,
height: 800,
layout: {
background: {
color: '#000000'
},
textColor: '#ffffff'
}
});
as seen in this doc
Related
I have a graph with nodes that contains icons:
$(go.TextBlock, {
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),
},
new go.Binding('text', 'statusIcon')),
I would like to rotate statusIcon infinitly but only if statusIcon matchs a value.
I have looked how to add a css rule like this.
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),animation:'spin 4s linear infinite';
But I get an error
Trying to set undefined property "animation" on object: TextBlock
I suppose that only few css rules are accepted by gojs TextBlock.
How can I add animation to only a node sub element ?
I created a StackBlitz example here.
$(go.TextBlock, {
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),
},
new go.Binding('text', 'statusIcon'),
new go.AnimationTrigger("angle")),
animate() {
this.dia.commit(diag => {
var node = this.dia.nodes.first();
var textblock = node.findObject("TEXTBLOCK_TO_ROTATE");
textblock.angle = textblock.angle + 30;
});
}
Animation is not a property like you used above. If you want to rotate, you should use AnimationTrigger and angle property for that.
I made a simple example to use GoJS animation, you can apply the codes from node template of TextBlock and the method to animate as you wish.
For more information, you can follow the description and the examples here.
I'd like to set an image of a map - or, better yet, a generated map - on the x-z plane of a high-charts graph. Is there a way to do this with background image? I understand you can set the color of the back, bottom, and side frame, is there any way to set images for those frames?
You can use SVG <pattern> element with <image> added inside of it, and set the chart.options3d.frame.bottom.color equal to this pattern, just like that:
First you need to create new pattern basing on current dimensions of mentioned frame. The best place to implement it, should be the chart.events.load function:
chart: {
events: {
load() {
var chart = this
var frameBottomDim = chart.frameShapes.bottom.element.getBBox()
var defs = document.querySelectorAll('defs')[0]
var pattern = chart.renderer.createElement('pattern')
var img = chart.renderer.createElement('image')
pattern.attr({
"patternUnits": "userSpaceOnUse",
"x": frameBottomDim.x,
"y": frameBottomDim.y,
"width": frameBottomDim.width,
"height": frameBottomDim.height,
"id": "frameBg",
})
img.attr({
"href": "https://static.makeuseof.com/wp-content/uploads/2010/03/clouds-1-670x335.jpg",
"width": frameBottomDim.width,
"height": frameBottomDim.height,
preserveAspectRatio: 'none'
})
img.add(pattern)
pattern.add(this.renderer.defs)
}
}
}
Then set the frame color property to url(#[pattern_name]):
options3d: {
enabled: true,
alpha: 10,
beta: 20,
depth: 400,
frame: {
bottom: {
color: 'url(#frameBg)'
}
}
}
Live example: https://jsfiddle.net/h8tv4xpg/
Web API Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
I'm stuck at google visualization api pie chart. Percent labels are mis-aligned a bit
Here is options
coreData = {
options: {
width: '550',
height: '400',
chartArea: {
height: "90%",
width: "90%"
},
}
};
And here is result :
As You can see there is 62 number sliced (62.7 should be)
How do i place them correct?
Also I'm using bootstrap3 and inspected css, everything seems correct and no overrides here
The draw() method should be called after the chart container is already visible(no 'hidden' class etc.)
I have been tasked to individually style each one of highcharts' stacked barchart data labels: the ones I am referring to is the 3,2,5 in the first chart, the 4,2,3 in the second and so on. To style these all together is easy, as seen in the documentation/fiddle. How do I style them individually?
The fiddle has the code for the styling of all of them:
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
Here is the JS Fiddle as per their documentation: http://jsfiddle.net/3ak4ckuq/
Set "useHTML: true" on the datalabels. Then you can access the individual datalabel element of any point and modify the styles or add classes etc:
_.each(chart.series, function(serie) {
_.each(serie.data, function(point) {
var spanElement = point.dataLabel.div.firstChild;
spanElement.style.fontSize = _.sample(randomFontSizes);
spanElement.style.color = _.sample(randomColors);
spanElement.classList.add("custom-class");
});
});
See fiddle: http://jsfiddle.net/3ak4ckuq/6/
Hello I'm new to titanium studio I'm reading the docs 2 days now and trying to make a simple slide animation or even any animation of any kind except opening a modal window. but I can't make it work.Here is what I was trying now but fails:
var slide_it_left = Titanium.UI.createAnimation();
slide_it_left.left = 500;
slide_it_left.duration = 500;
var mainWinOpts = {
backgroundColor:'#fff',
fullscreen:true,
navBarHidden: true
}
var animWinOpts = {
navBarHidden: true,
backgroundColor:'#000',
top:0,
left:0,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
fullscreen:false,
animated:true
}
var mainWin = Ti.UI.createWindow(mainWinOpts);
var animWin = Ti.UI.createWindow(animWinOpts);
var labelOpts = {
text: 'click me!',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: {
fontFamily: 'monospace',
fontSize: 24
},
borderWidth: 1,
color: '#2e2e2e',
borderColor: '#2e2e2e',
backgroundColor: '#dedede',
top: 50,
left: 50,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
opacity: 1.00,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
};
var label = Ti.UI.createLabel(labelOpts);
label.addEventListener('click',function(){
animWin.open(slide_it_left);
})
mainWin.add(label);
mainWin.open();
This among other snippets I tried from their docs - forums isn't working.
Could someone please provide me some working samples or references for android window or view animation. Or point out what I'm doing wrong. Thank you in advance.
Please try changing your code to the following:
label.addEventListener('click',function(){
animWin.open();
animWin.animate(slide_it_left);
});
You cannot use the animation object as a parameter for open().
Have a look at the valid params here.
Moreover, the docs give an example for sliding in a window on Android, which is very likely what you are trying to achieve:
var win2 = Ti.UI.createWindow({fullscreen:false});
win2.open({
activityEnterAnimation: Ti.Android.R.anim.slide_in_left,
activityExitAnimation: Ti.Android.R.anim.slide_out_right
});
You can find the animations for the Android platform here.