I've been scratching my head and reading the documentation a lot, trying to understand when using anychart stock how i can get control over the tick ( major/minor) display ? i.e i'd like to change the tick stroke color, the interval and make it rotate so text is vertical.
this is example data i'm playing with.
https://playground.anychart.com/sTrncP0D
Nothing special, i just want the major tick per minute and minor every 10 seconds if possible. I tried many variations but fail to get working combination and i think it's because the Stock axis differences.
Can you someone help how this is done ? Or if this is even possible.
thanks.
You can set ticks and minor ticks interval with the following lines:
var scale = chart.xScale();
scale.ticks([{major: {unit: 'minute', count: 1}, minor : {unit:'second', count: 10}}]);
You can rotate axis labels like this:
var labels = chart.plot().xAxis().labels();
minorLabels = chart.scroller().xAxis().minorLabels();
labels.rotation(90);
minorLabels.rotation(90);
You can adjust ticks appearance with the following lines:
var ticks = chart.plot().xAxis().ticks();
var minorTicks = chart.plot().xAxis().minorTicks();
ticks.stroke("red", 0.9);
minorTicks.stroke("blue", 0.9);
Related
I have a function on a js to create an anychart.stock
dataTable = anychart.data.table();
dataTable.addData(json);
price = dataTable.mapAs({'value': 1});
height = dataTable.mapAs({'value': 2});
weight = dataTable.mapAs({'value': 3});
var pricesChart= chart.plot(0);
pricesChart.grid().enabled(true);
pricesChart.grid(1).enabled(true).layout('vertical');
PricePlot = pricesChart.stepLine(price).stroke('#004400');
var heightChart= chart.plot(0);
heightChart.grid().enabled(true);
heightChart.grid(1).enabled(true).layout('vertical');
heightPlot = heightChart.stepLine(height).stroke('#334400');
var weightChart= chart.plot(0);
weightChart.grid().enabled(true);
weightChart.grid(1).enabled(true).layout('vertical');
weightPlot = weightChart.stepLine(weight).stroke('#334400');
When the plot is displayed all the scales can be seen OK. See this image:
The problem appears when I move the scroll to the right. It modifies the scale of my last chart causing this chart to be unreadable. See next image:
I just learned what happened to the visualization.
The problem is that given a period of time, for example, this year from 01-01-2019 to 31-12-2019 I am using three different lines to display information.
The first line contains info from 01-01-2019 to today
The second line contains info from today to 7 days ahead
The third period contains info from 7 days ahead to 31-12-2019.
The fact that the lines are not continuous is what is breaking the zoom.
I created an app to calculate the sizes of a multi-image, in order to use them in the Codename One designer.
As you can see in the screenshot below, my app has a slider and I get the width (in millimeters) of it. The problem is that the value of the selected width is incorrect. I tested the app on two Android devices and the measured lengths are different from the ones reported by the app.
You can see the full source code, however the relevant code is the following:
Label value = new Label("Move the cursor on the slider...");
Style thumbStyle = new Style();
thumbStyle.setFont(Font.createSystemFont(Font.FACE_MONOSPACE, Font.STYLE_BOLD, Font.SIZE_LARGE), true);
Slider slider = new Slider();
slider.setMaxValue(1000);
slider.setMinValue(0);
slider.setProgress(20); // Set the starting value
slider.setThumbImage(FontImage.create("|", thumbStyle));
slider.setEditable(true); // to it works as a slider instead of a progress bar
slider.addActionListener(e -> {
Integer valueSelected = slider.getProgress();
Integer sliderWidth = slider.getWidth();
Double inch = sliderWidth.doubleValue() / (slider.getMaxValue() - slider.getMinValue()) * valueSelected / 100.0;
Integer millimeters = Double.valueOf(inch * 25.4).intValue();
value.setText("Value selected: " + millimeters.toString() + " mm");
});
Thank you very much for any help
Millimeter measures aren't accurate. A device can return different values or ratios for the convert method than the value it returns for the density flag.
Unfortunately, Googles test suite to certify a device as "good" doesn't actually cover these things. There isn't much we can do about that.
i'm trying to build a telemetry software using Winform and Devexpress library. Specifically i'm working on a Line Chart Control and what i would like to do is to configure the chart so that it is able to display a data changing in real time.
The graph is generated reading some external sensors that send informations at a rate of 10 values per second.
This is my code for initialize the chart:
series1 = new Series("test test", ViewType.Line);
chartControl1.Series.Add(series1);
series1.ArgumentScaleType = ScaleType.Numerical;
((LineSeriesView)series1.View).LineMarkerOptions.Kind = MarkerKind.Triangle;
((LineSeriesView)series1.View).LineStyle.DashStyle = DashStyle.Dash;
((XYDiagram)chartControl1.Diagram).EnableAxisXZooming = true;
chartControl1.Legend.Visibility = DefaultBoolean.False;
chartControl1.Titles.Add(new ChartTitle());
chartControl1.Titles[0].Text = "A Line Chart";
chartControl1.Dock = DockStyle.Fill;
And this is the one that add a new point and remove the first point available so that the amount of points in my chart is always the same (after a minimum amount of points is reached) and it keeps updating itself displaying the last X seconds of values and discarding the old values.
series1.Points.RemoveRange(0, 1);
series1.Points.Add(new SeriesPoint(time, value));
...
AxisXRange.SetMinMaxValues(newFirstTime, time);
AxisRange is the following
Range AxisXRange
{
get
{
SwiftPlotDiagram diagram = chartControl1.Diagram as SwiftPlotDiagram;
if (diagram != null)
return diagram.AxisX.VisualRange;
return null;
}
}
**The problem ** is that this code works temporarily. After some seconds, the chart stop working and a big red cross is displayed over it.
Is there something that i'm missing with its configuration?
Do you know any better way to realize my task?
Any help would be appreciated.
Thank you
I think you doing it nearly right. Devexpress has an Article about RealTime-Charts. They doing it the same way but using a timer for updating the data. Maybe this would fix your painting problems.
I use code like the example below to do basic plotting of a list of values from F# Interactive. When plotting more points, the time taken to display increases dramatically. In the examples below, 10^4 points display in 4 seconds whereas 4.10^4 points take a patience-testing 53 seconds to display. Overall it's roughly as if the time to plot N points is in N^2.
The result is that I'll probably add an interpolation layer in front of this code, but
1) I wonder if someone who knows the workings of FSharpChart and Windows.Forms could explain what is causing this behaviour? (The data is bounded so one thing that seems to rule out is the display needing to adjust scale.)
2)Is there a simple remedy other than interpolating the data myself?
let plotl (f:float list) =
let chart = FSharpChart.Line(f, Name = "")
|> FSharpChart.WithSeries.Style(Color = System.Drawing.Color.Red, BorderWidth = 2)
let form = new Form(Visible = true, TopMost = true, Width = 700, Height = 500)
let ctl = new ChartControl(chart, Dock = DockStyle.Fill)
form.Controls.Add(ctl)
let z1 = [for i in 1 .. 10000 do yield sin(float(i * i))]
let z2 = [for i in 1 .. 20000 do yield sin(float(i * i))]
plotl z1
plotl z2
First of all, FSharpChart is a name used in an older version of the library. The latest version is called F# Charting, comes with a new documentation and uses just Chart.
To answer your question, Chart.Line and Chart.Points are quite slow for large number of points. The library also has Chart.FastLine and Chart.FastPoints (which do not support as many features, but are faster). So, try getting the latest version of F# Charting and using the "Fast" version of the method.
I have a TimeSeries Chart with a XYdataset which has the milliseconds of each dates.
Now I want to have a chart that only displays each date one time on the axis, no matter what the range of dates is. I already got it so far, that only the date is printed, not the time (via setNumberFormatOverride() method).
What I have now, is this:
alt text http://dl.getdropbox.com/u/1144075/Bildschirmfoto%202010-08-05%20um%2016.51.39.JPG
What I want, is this:
alt text http://dl.getdropbox.com/u/1144075/Bildschirmfoto%202010-08-05%20um%2016.54.54.JPG
This is a snippet of my code. also, the setLabelAngle() method don't work?!
JFreeChart chart = ChartFactory.createTimeSeriesChart(...);
XYPlot xyplot = (XYPlot)chart.getPlot();
DateAxis dateaxis = (DateAxis) xyplot.getDomainAxis();
dateaxis.setLabelAngle(Math.PI / 6.0);`
numberaxis.setNumberFormatOverride((DecimalFormat)DecimalFormat.getInstance(Locale.GERMAN));
You can set the TickUnit to any convenient DateTickUnitType. I use DAY in this example and MMM to verify the Locale:
axis.setTickUnit(new DateTickUnit(DateTickUnitType.DAY, 1,
new SimpleDateFormat("dd.MMM.yy", Locale.GERMAN)));
As you are a returning customer, I'll address the second question, too: setLabelAngle() works perfectly well, but it changes the axis label in the chart legend. Using setVerticalTickLabels() is an alternative for the tick labels themselves:
axis.setVerticalTickLabels(true);