I have a steema teechart named tChart1 consisting of candles. I want to show only the candles and the labels of the bottom axis. Everything else should be transparent. I have been able to hide some of the things, but the background is still white and there are vertical lines (I assume the grid) still showing.
tChart1.Title.Visible = false;
tChart1.Walls.Visible = false;
tChart1.Axes.Left.Visible = false;
tChart1.Legend.Visible = false;
You need to hide or make transparent the following elements:
tChart1.Axes.Left.Grid.Visible = false;
tChart1.Axes.Bottom.Grid.Visible = false;
tChart1.Panel.Transparent = true;
tChart1.Panel.Gradient.Visible = false;
tChart1.Walls.Visible = false;
tChart1.Legend.Transparent = true;
Bottom axis labels font color should be changed like this:
tChart1.Axes.Bottom.Labels.Font.Color = Color.Blue;
Custom labels can be set like this:
private void AddCustomLabels()
{
tChart1.Axes.Left.Labels.Items.Clear();
(tChart1.Axes.Left.Labels.Items.Add(123,"Hello")).Font.Size=16;
(tChart1.Axes.Left.Labels.Items.Add(466,"Good\n\rbye")).Transparent=false;
tChart1.Axes.Left.Labels.Items.Add(300);
AxisLabelItem a = tChart1.Axes.Left.Labels.Items.Add(-100);
a.Transparent=false;
a.Color=Color.Blue;
a.Transparency=50;
}
Candle series pen:
candle1.Pen.Color = Color.Lime;
Related
I am trying to get the chart scrolled horizontally from externally triggered event calls like when a button is clicked elsewhere on the page. I am equally able to get the start and indexes of where i want the chart horizontally scrolled to. The chart's DateAxis is defined as below:
this.categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
this.categoryAxis.dataFields.date = "value_date";
this.categoryAxis.cursorTooltipEnabled = false;
this.categoryAxis.start = 0.7;
this.categoryAxis.keepSelection = true;
And the function that is called by an external event is defined as below:
function(res){
let cpre = res.tree.split(',');
cpre.forEach((el, i) => {
cpre[i] = Number(el);
});
let visibleEl = this.data.findIndex((el, i) => {
return isEqual(cpre, el.graphIndex);
});
console.log(visibleEl);
//Trying to display 6 date points at any given time, not working.
let startIndex = visibleEl - 6 < 0 ? 0 : visibleEl - 6;
this.categoryAxis.zoomToIndexes(visibleEl, startIndex);
}
This line this.categoryAxis.zoomToIndexes(visibleEl, startIndex); currently zooms to the target indexes, but also zooms in the map which is not the desired effect. I only want to have it scroll to the desired position without zooming, thanks.
You can try to use valueAxis.strictMinMax (docs).
valueAxis.strictMinMax = true;
If that doesn't work try to use dateAxis.zoomToDates() instead of zoomToIndexes (docs).
Is it possible to indicate events along a series in amCharts v4 similar to the Stock Event in the v3 stock chart?
While I was brought on board specifically for v4 and am not familiar with v3, I'm confident you can simulate some of these features using Bullets.
A bullet is a Container (basically a placeholder parent for whatever visual object or additional Containers that you want), that will appear at every point of data. You can put a label there as well as a line and any other shape, e.g.:
var stockBullet = series.bullets.push(new am4charts.Bullet());
stockBullet.dy = -20;
var circle = stockBullet.createChild(am4core.Circle);
circle.stroke = "#000";
circle.strokeWidth = 1;
circle.radius = 10;
circle.fill = series.fill.brighten(-0.3);
circle.dy = -10;
var line = stockBullet.createChild(am4core.Line);
line.stroke = "#000";
line.strokeWidth = 1;
line.height = 20;
var label = stockBullet.createChild(am4core.Label);
label.fill = am4core.color("#000");
label.strokeWidth = 0;
label.dy = -20;
label.textAlign = "middle";
label.horizontalCenter = "middle"
Since we don't want a bullet to appear at every point of data, only at Stock Events, we can handle that once the bullets are ready on the chart by going through their data, disabling them if need be, otherwise providing text for our label (and maybe tooltipText if need be) (presume there is a property stockEvent in the data):
stockBullet.events.on("inited", function(event) {
if (event.target.dataItem && event.target.dataItem.dataContext && event.target.dataItem.dataContext.stockEvent) {
event.target.children.getIndex(2).text = event.target.dataItem.dataContext.stockEvent.text;
} else {
event.target.disabled = true;
}
});
Getting tooltips of different objects to play well with each other can be tricky depending on your chart, e.g. if it has Chart Cursor enabled there's a cursorTooltipEnabled property to prevent triggering a tooltip over bullets. To simplify things in this case what I did is make an invisible series per unique stock event bullet. For each stock event, use adapters to set its paired series' tooltipText to what's desired, and the base, visible series' tooltipText to "":
series.adapter.add("tooltipText", function(text, target) {
if (target.tooltipDataItem.dataContext.stockEvent) {
return "";
}
return text;
});
// ...
hiddenSeries.adapter.add("tooltipText", function(text, target) {
if (target.tooltipDataItem.dataContext.stockEvent) {
return target.tooltipDataItem.dataContext.stockEvent.description;
}
return "";
});
Here's a demo:
https://codepen.io/team/amcharts/pen/337984f18c6329ce904ef52a0c3eeaaa
Screenshot:
I'm trying to add custom colours to a column chart, so each column has a different colour. I have the following code:
__this._chartColours = ['#2776BD', '#00A1D0','#00C195','#7ED321','#A8C600','#C9B600','#E3A600', '#F7941E', '#FC7149'];
__this._chart = am4core.create(__this._tileChartDiv[0], am4charts.XYChart);
if(result.chartDataMap != null)
{
var colorSet = new am4core.ColorSet();
var counter = 0;
$.each(result.chartDataMap, function(xAxis, yAxis)
{
__this._dataProvider.push({"category": xAxis, "column-1": yAxis});
__this._chart.colors.list.push(am4core.color(__this._chartColours[counter]));
});
__this._chart.data = __this._dataProvider;
__this._chart.padding(40, 40, 40, 40);
var categoryAxis = __this._chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.title.text = result.xAxisTitle;
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 120;
var valueAxis = __this._chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = result.yAxisTitle;
var series = __this._chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";
series.dataFields.valueY = "column-1";
series.tooltipText = "{valueY.value}"
series.columns.template.strokeOpacity = 0;
__this._chart.cursor = new am4charts.XYCursor();
}
It renders the chart fine based on the dataprovider I create but it is not setting the colors. I got the colours code from here: https://www.amcharts.com/docs/v4/concepts/colors/. The XY Chart and derivative charts section
I tried to use a theme, but that didn't work either:
function am4themes_myTheme(target)
{
if (target instanceof am4core.ColorSet)
{
$.each(__this._chartColours, function(index, item)
{
target.list.push(am4core.color(item));
});
}
}
am4core.useTheme(am4themes_myTheme);
It sets all the columns to the first colour. Then I tried adding a color property to the dataProvider for each column but again it sets them all to have the first colour.
I'm pretty much out of ideas.
There are a few issues here.
First, if you want the chart to use only your colors, instead of appending to the default chart's ColorSet, you have to manually override it by assigning an array of Colors to chart.colors.list (instead of pushing values to it).
Next, the column's color (fill) by default is based on its series. So even if you populate the chart's ColorSet, it's only each new series that will get a different color, not each column.
To set an individual column's color it would be something like:
column.fill = am4core.color("#2776BD");
To get each column to have its own color, we can set that upon the column's first instantiation, i.e. on its template's inited event. Further, a column's dataItem will have a property/reference to its index, so we can use that with ColorSet's getIndex method to assign colors in sequence.
So your final code might look something like this:
__this._chart.colors.list = [
am4core.color("#2776BD"),
am4core.color("#00A1D0"),
am4core.color("#00C195"),
am4core.color("#7ED321"),
am4core.color("#A8C600"),
am4core.color("#C9B600"),
am4core.color("#E3A600"),
am4core.color("#F7941E"),
am4core.color("#FC7149")
];
series.columns.template.events.once("inited", function(event){
event.target.fill = chart.colors.getIndex(event.target.dataItem.index);
});
Here's a fork of our Simple Column Chart demo with the above code and your custom colors:
https://codepen.io/team/amcharts/pen/2ef06f392b347412c61bcdcd3439a5c6
I have a quite simple unity GUI that has the following scheme :
Where Brekt and so are buttons.
The GUI works just fine on PC and is on screen space : overlay so it is supposed to be adapted automatically to fit every screen.
But on tablet the whole GUI is smaller and reduced in the center of the screen, with huge margins around the elements (can't join a screenshot now)
What is the way to fix that? Is it something in player settings or in project settings?
Automatically scaling the UI requires using combination of anchor,pivot point of RecTransform and the Canvas Scaler component. It is hard to understand it without images or videos. It is very important that you thoroughly understand how to do this and Unity provided full video tutorial for this.You can watch it here.
Also, when using scrollbar, scrollview and other similar UI controls, the ContentSizeFitter component is also used to make sure they fit in that layout.
There is a problem with MovementRange. We must scale this value too.
I did it so:
public int MovementRange = 100;
public AxisOption axesToUse = AxisOption.Both; // The options for the axes that the still will use
public string horizontalAxisName = "Horizontal"; // The name given to the horizontal axis for the cross platform input
public string verticalAxisName = "Vertical"; // The name given to the vertical axis for the cross platform input
private int _MovementRange = 100;
Vector3 m_StartPos;
bool m_UseX; // Toggle for using the x axis
bool m_UseY; // Toggle for using the Y axis
CrossPlatformInputManager.VirtualAxis m_HorizontalVirtualAxis; // Reference to the joystick in the cross platform input
CrossPlatformInputManager.VirtualAxis m_VerticalVirtualAxis; // Reference to the joystick in the cross platform input
void OnEnable()
{
CreateVirtualAxes();
}
void Start()
{
m_StartPos = transform.position;
Canvas c = GetComponentInParent<Canvas>();
_MovementRange = (int)(MovementRange * c.scaleFactor);
Debug.Log("Range:"+ _MovementRange);
}
void UpdateVirtualAxes(Vector3 value)
{
var delta = m_StartPos - value;
delta.y = -delta.y;
delta /= _MovementRange;
if (m_UseX)
{
m_HorizontalVirtualAxis.Update(-delta.x);
}
if (m_UseY)
{
m_VerticalVirtualAxis.Update(delta.y);
}
}
void CreateVirtualAxes()
{
// set axes to use
m_UseX = (axesToUse == AxisOption.Both || axesToUse == AxisOption.OnlyHorizontal);
m_UseY = (axesToUse == AxisOption.Both || axesToUse == AxisOption.OnlyVertical);
// create new axes based on axes to use
if (m_UseX)
{
m_HorizontalVirtualAxis = new CrossPlatformInputManager.VirtualAxis(horizontalAxisName);
CrossPlatformInputManager.RegisterVirtualAxis(m_HorizontalVirtualAxis);
}
if (m_UseY)
{
m_VerticalVirtualAxis = new CrossPlatformInputManager.VirtualAxis(verticalAxisName);
CrossPlatformInputManager.RegisterVirtualAxis(m_VerticalVirtualAxis);
}
}
public void OnDrag(PointerEventData data)
{
Vector3 newPos = Vector3.zero;
if (m_UseX)
{
int delta = (int)(data.position.x - m_StartPos.x);
delta = Mathf.Clamp(delta, -_MovementRange, _MovementRange);
newPos.x = delta;
}
if (m_UseY)
{
int delta = (int)(data.position.y - m_StartPos.y);
delta = Mathf.Clamp(delta, -_MovementRange, _MovementRange);
newPos.y = delta;
}
transform.position = new Vector3(m_StartPos.x + newPos.x, m_StartPos.y + newPos.y, m_StartPos.z + newPos.z);
UpdateVirtualAxes(transform.position);
}
I am using the ValueAnimator to make one row in my list pulse from dark blue to light blue finitely. However, I need to check for a boolean when the rows load and when it gets set to false I need the view to go back to its original non-pulsing state. What is the best way of doing this?
My code is as follows -
if(isHighlighted(post)) {
String titleText = title.getText().toString();
title.setText(titleText);
title.setTextColor(Color.WHITE);
timeStamp.setTextColor(Color.WHITE);
highLighterStartColor = resources.getColor( R.color.active_blue );
highLighterEndColor = resources.getColor( R.color.teal );
ValueAnimator va = ObjectAnimator.ofInt(view, "backgroundColor", highLighterStartColor, highLighterEndColor);
if(va != null) {
va.setDuration(750);
va.setEvaluator(new ArgbEvaluator());
va.setRepeatCount(ValueAnimator.INFINITE);
va.setRepeatMode(ValueAnimator.REVERSE);
va.start();
}
} else {
title.setTextAppearance(activity.getApplicationContext(), R.style.medium_text);
timeStamp.setTextAppearance(activity.getApplicationContext(), R.style.timestamp_text);
}