gwt visualization api labels disappear when displaying multiple charts - gwt

I just want to display several Charts in the same Panel. It doesn't matter which chart types I use (Column, Line, Pie etc). The result is that only the first chart has labels, no matter how many charts I try to display. See this screen shot:
On the second chart, the x- and y-axis labels are missing as well as the labels for the data sets. I tested in Chrome, Firefox and IE. Always the same.
Here is the code I use:
VerticalPanel panel=new VerticalPanel();
final int height = 400;
final int width = 1200;
Date d = new Date();
//message data
final DataTable msgData = DataTable.create();
msgData.addColumn(ColumnType.DATE, "date");
msgData.addColumn(ColumnType.NUMBER, "data one");
msgData.addColumn(ColumnType.NUMBER, "data two");
msgData.addRows(6);
for (int i = 0; i < 6; i++)
{
d.setTime(d.getTime() + (1000 * 60 * 60 * 24));
msgData.setValue(i, 0, d);
msgData.setValue(i, 1, i + 11);
msgData.setValue(i, 2, i + 12);
}
final Options options = Options.create();
options.setWidth(width);
options.setHeight(height);
options.setIsStacked(true);
options.setTitle("Chart One");
panel.add(new ColumnChart(msgData, options));
d = new Date();
//new data
final DataTable newData = DataTable.create();
newData.addColumn(ColumnType.DATE, "date");
newData.addColumn(ColumnType.NUMBER, "data three");
newData.addColumn(ColumnType.NUMBER, "data four");
newData.addRows(5);
for (int i = 0; i < 5; i++)
{
d.setTime(d.getTime() + (1000 * 60 * 60 * 24));
newData.setValue(i, 0, d);
newData.setValue(i, 1, i + 3);
newData.setValue(i, 2, i + 4);
}
final Options options_new = Options.create();
options_new.setWidth(width);
options_new.setHeight(height);
options_new.setIsStacked(true);
options_new.setTitle("Chart two");
panel.add(new ColumnChart(newData, options_new));
I checked the generated html with firebug. The charts are rendered using SVG and in the second chart there are just no svg-tags for the labels, while they exist in the first chart. So the missing labels are not cut off or hidden, but are not even created.
Thanks for your help

Related

Unity: Dynamically build UI elements on Canvas: ScreenSpace-Camera, previously ScreenSpace-Overlay

My application works fine, 100% expected results with Canvas set on ScreenSpace-Overlay. I have written a function that takes an array of integers and based on its values it dynamically builds vertical bars inside a panel. I have an UI-Image as a prefab and that I instantiated multiple time, set its anchor to bottom left position and increase the x-offset from that point in increments of its width+padding. Everything works fine, check the screenshots.
I have now a fancy idea of animating the vertical bars... to have Unity Particle Effects on the top of each bar and to play it. From what I searched... you cannot get Particle Effects working on Canvas-UI unless the Canvas is set as ScreenSpace-Camera. I managed to obtain success with Particle Effects and ScreenSpace-Camera canvas... everything works... but now the same code that dynamically builds the UI doesnt work anymore... the vertical bars are set on a total new position outside the UI.
My Canvas
Working algorithm
My code:
private void ArrangeImagesOnCanvas(List<int> varArray)
{
Canvas canvas = FindObjectOfType<Canvas>();
//float h = canvas.GetComponent<RectTransform>().rect.height * canvas.GetComponent<RectTransform>().localScale.y;
//float w = canvas.GetComponent<RectTransform>().rect.width * canvas.GetComponent<RectTransform>().localScale.x;
float h = _panelImageForSortingAlgorithm.GetComponent<RectTransform>().rect.height * canvas.GetComponent<RectTransform>().localScale.y;
float w = _panelImageForSortingAlgorithm.GetComponent<RectTransform>().rect.width * canvas.GetComponent<RectTransform>().localScale.x;
float minH = 20.0f;
float maxH = h - 20;
int minList = varArray.Min();
int maxList = varArray.Max();
_imageWidth = (w - (varArray.Count * _PADDING)) / varArray.Count;
List<float> heightsList = new List<float>();
float _tempFloat = 0;
for (int i = 0; i < varArray.Count; i++)
{
_tempFloat = ScaleIntervals(varArray[i], new Vector2(minList, maxList), new Vector2(minH, maxH));
heightsList.Add(_tempFloat);
}
for(int i = 0; i<_instancesOfImages.Count;i++)
{
Destroy(_instancesOfImages[i]);
}
_instancesOfImages.Clear();
for (int i = 0; i < varArray.Count; i++)
{
GameObject instantiatedImage = Instantiate(_imageToInstance, _imageToInstance.transform.position, Quaternion.identity);
instantiatedImage.transform.SetParent(_panelImageForSortingAlgorithm.transform);
Image img = instantiatedImage.GetComponent<Image>();
img.rectTransform.anchorMin = new Vector2(0, 0);
img.rectTransform.anchorMax = new Vector2(0, 0);
img.rectTransform.pivot = new Vector2(0, 0);
img.rectTransform.position = new Vector3(i * (_imageWidth + _PADDING), 0, 0);
img.rectTransform.sizeDelta = new Vector2(_imageWidth, heightsList[i]);
_instancesOfImages.Add(instantiatedImage);
}
}
For the same code the vertical bars can be seen in this image...
Broken bars 1
if I put
float h = _panelImageForSortingAlgorithm.GetComponent<RectTransform>().rect.height;
float w = _panelImageForSortingAlgorithm.GetComponent<RectTransform>().rect.width;
then the vertical bars are like in this image.
Broken bars 2
How can I position correctly the vertical bars as in ScreenSpace-Overlay but this time to be on ScreenSpace-Camera ? Please help or give me some advices or tips...

epplus linechart line coloring issue

The following (Epplus 6.06) code segment successfully creates a line graph (eLineChartType.Line) in a spreadsheet, with three lines of data shown on the graph. The third line obeys the color I have requested (brown). The first two lines show in black (should be blue and green). AN image of the chart is attached.
Am I doing something wrong, or is this a bug in Epplus?
var chart = chartWs.Drawings.AddLineChart(ChartName, eLineChartType.Line);
chart.SetPosition(0, 0, StandardChartCols, 0);
chart.To.Column = 2 * StandardChartCols;
chart.To.Row = StandardChartRows;
chart.StyleManager.SetChartStyle(ePresetChartStyle.LineChartStyle1);
chart.Title.Text = "Drone Altitude and Ground/Surface Elevations (M)";
chart.Title.Font.Size = MediumTitleFontSize;
chart.Title.Font.Bold = true;
chart.YAxis.MinValue = minAltitude;
var serie1 = chart.Series.Add(dataWs.Cells[1, AltCol, lastRow, AltCol], dataWs.Cells[1, SectionCol, lastRow, SectionCol]);
serie1.Header = "Altitude";
serie1.Marker.Fill.Color = Color.LightBlue;
serie1.Border.Fill.Color = Color.LightBlue;
serie1.Border.Width = 2;
var serie2 = chart.Series.Add(dataWs.Cells[1, DsmCol, lastRow, DsmCol], dataWs.Cells[1, SectionCol, lastRow, SectionCol]);
serie2.Header = "DSM";
serie2.Marker.Fill.Color = Color.Green;
serie2.Border.Fill.Color = Color.Green;
serie2.Border.Width = 2;
var serie3 = chart.Series.Add(dataWs.Cells[1, DemCol, lastRow, DemCol], dataWs.Cells[1, SectionCol, lastRow, SectionCol]);
serie3.Header = "DEM";
serie3.Marker.Fill.Color = Color.Brown;
serie3.Border.Fill.Color = Color.Brown;
serie3.Border.Width = 2;
Drone Altitude and Ground/Surface Elevations (M)

How to fill a javafx line graph with array using loop?

I want to fill a line graph in javafx using for loop. At every iteration it should plot the line as per the value in array of integers.
You will already have found the solution. But here you go (I assume you have a List<Integer[]> arrayList):
//Defining X axis
NumberAxis xAxis = new NumberAxis();
//Defining y axis
NumberAxis yAxis = new NumberAxis();
//Make LineChart
LineChart linechart = new LineChart(xAxis, yAxis);
//Make List to save your XYChartSeries
List<XYChart.Series> seriesList = new ArrayList<>();
//Iterate over your Data
for (Integer[] integers : arrayList) {
XYChart.Series series = new XYChart.Series();
for (int i = 0; i < integers.length; i++) {
Integer integer = integers[i];
series.getData().add(new XYChart.Data(i, integer));
}
seriesList.add(series);
linechart.getData().add(seriesList.get(seriesList.size() - 1));
}

min and max value for date axis in amcharts4

I have a line graph with date axis and data being displayed in intervals for 30 or 15 minutes for a day. Since data is dynamic, for some cases data starts around 12 noon or some other time and hence the x-axis does not always starts from the 00:00. Similarly data might end before 12:00 Mid night.
I want to always show the dateAxis to start from 00:00 then some fix step for lets say a label for every one or two hours and end at 12:00 mid night. How can i do this?
I tried DateAxis.min and DateAxis.max. But these are only accepting numeric values. not sure how to set it to appropriate numeric value to represent the start and end of day.
I also tried setting DateAxis.extraMin and DateAxis.extraMax but these are working on percentage and its a but hard to find appropriate values for the dynamic data.
This is how current graph renders
This is how i want to display (notice the empty labels at the start)
The min/max properties in DateAxis objects take millisecond timestamps. You can use the result of getTime() from a JavaScript Date object:
dateAxis.min = (new Date(2019,7,10)).getTime();
dateAxis.max = (new Date(2019,7,10,23)).getTime();
There isn't a way to explicitly set a step, though. You can tweak minGridDistance to influence the step but that's about it. The only workaround you can use is insert guides (Axis Ranges) at each timestamp with the appropriate label and disable the DateAxis' default labels.
range.date = new Date(2019, 7, 10, 0);
range.grid.strokeOpacity = .5;
range.grid.stroke = "#cecece";
range.label.text = "00:00";
Note that axis won't adjust label visibility in this case, so you may need to set a rotation on the range label as well.
Demo below:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = generateData();
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.name = "Sales";
series.strokeWidth = 3;
series.fillOpacity = 0.5;
dateAxis.baseInterval = {
timeUnit: "minute",
count: 15
}
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
dateAxis.min = (new Date(2019, 7, 10, 0)).getTime();
dateAxis.max = (new Date(2019, 7, 10, 23)).getTime();
generateRanges(dateAxis);
function generateRanges(axis) {
var firstDate = new Date(2019, 7, 10, 0);
for (var i = 0; i < 24; ++i) {
var range = axis.axisRanges.create();
var nextDate = new Date(firstDate);
nextDate.setHours(i);
range.date = nextDate;
range.grid.strokeOpacity = .5;
range.grid.stroke = "#cecece";
range.label.text = ("0" + nextDate.getHours()).substr(-2) + ":" + ("0" + nextDate.getMinutes()).substr(-2);
range.label.rotation = 90;
}
}
function generateData() {
var data = [];
var firstDate = new Date(2019, 7, 10, 10);
for (var i = 0; i < 32; ++i) {
var nextDate = new Date(firstDate);
nextDate.setMinutes(i * 15);
data.push({
date: nextDate,
value: Math.floor(Math.random() * 15 + 5)
})
}
return data;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 98vh;"></div>

I have 2 Achartengine XYSeries problems

I’m having 2 problems with a simple XYSeries line graph.
When the absolute value of the difference between the last plotted point and the next plotted point is less than 11 the label on the next plotted point goes missing. I want all the labels to display.
I have some (not all) missing vertical grid lines and don’t see why. I want a vertical grid line for every XY coordinate.
Thanks for the help. Here's the code.
String glucoseLegendText = getString(R.string.glucose_legend_text);
XYSeries series = new XYSeries(glucoseLegendText);
datasource = new HistoryDataSource(this);
datasource.open();
Cursor c = datasource.getQuery();
c.moveToFirst();
int cnt = c.getCount();
int minValue = 0;
int maxValue = 0;
for (int i = 0; i < cnt; i++) {
int glucoseValue = c.getInt(2);
series.add(i, glucoseValue);
if (i == 0 || glucoseValue < minValue)
minValue = glucoseValue;
if (glucoseValue > maxValue)
maxValue = glucoseValue;
c.moveToNext();
}
datasource.close();
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(series);
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.BLUE);
renderer.setPointStyle(PointStyle.CIRCLE);
renderer.setFillPoints(true);
renderer.setLineWidth(3);
renderer.setDisplayChartValues(true);
renderer.setChartValuesTextSize(15);
renderer.setChartValuesTextAlign(Align.LEFT);
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.addSeriesRenderer(renderer);
mRenderer.setShowGrid(true);
mRenderer.setGridColor(Color.BLACK);
mRenderer.setXLabels(cnt); // to control number of grid lines
mRenderer.setYLabels(cnt); // to control number of grid lines
mRenderer.setXLabelsColor(Color.YELLOW);
mRenderer.setPointSize(5);
mRenderer.setYLabelsAlign(Align.RIGHT);
mRenderer.setLegendTextSize(15);
mRenderer.setZoomButtonsVisible(true);
mRenderer.setYAxisMin(minValue - 2); // buffer bottom
mRenderer.setYAxisMax(maxValue + 3); // buffer top
// Populate the X labels with the dates and times
c.moveToFirst();
for (int d = 0; d < cnt; d++) {
timeStamp = c.getString(1);
date = timeStamp.substring(0, 5);
time = timeStamp.substring(9, 14);
if (date.equals(dateLast)) {
mRenderer.addXTextLabel(d, "\n" + time);
} else
mRenderer.addXTextLabel(d, "\n" + time + "\n" + date);
dateLast = date;
c.moveToNext();
}
c.close();
GraphicalView gview = ChartFactory.getTimeChartView(this, dataset,
mRenderer, "");
LinearLayout layout = (LinearLayout) findViewById(R.id.Chart);
layout.addView(gview);
For the first question, you can control the labels display using
renderer.setXLabels(approximateNumberOfLabels);
For the second question, the grid lines are displayed along the labels.