Histogram bars are shifted when x range is changed

[Jonathan]

Hi,

I found a bug on a histogram plot. Whenever the range on bottom axis is changed manually, the entire histogram bars are shifted and misaligned with marks any longer.

In the following run as-is example, I set min and max value for the bottom axis. Then I see two problems/bugs.
1. Bars are shifted to left. eg. The x value for the 1st bar from left to right should be 10, but it looks like 0 on the chart. (BTW, marks are rendered correctly, though) That is, bars should be rendered correctly, aligned with its corresponding marks.
2. Always, the last bar width is way wider than the other bars.

I would appreciate if you can tell me how to fix them or if there is any workaround to resolve these issues.

Code: Select all

	public static void main(String[] args) {
		JFrame frame = new JFrame();
		JPanel panel = new JPanel();
		panel.setSize(600, 600);
		TChart chart = new TChart();
		
		panel.add(chart);
		Bar b = new Bar(chart.getChart());
		b.add(10.0, 10.0);
		b.add(20.0, 20.0);
		b.add(30.0, 30.0);
		b.add(40.0, 40.0);
		b.add(50.0, 50.0);
		b.setMultiBar(MultiBars.STACKED);
		b.setBarWidthPercent(100);
		b.getMarks().setVisible(true);
		
		chart.getAxes().getBottom().getLabels().setStyle(AxisLabelStyle.VALUE);
		chart.getAxes().getBottom().setAutomatic(false);
		chart.getAxes().getBottom().setMinMax(-10, 150);

		//set 2D
		chart.getAspect().setView3D(false);
		
		frame.add(panel);
		frame.setSize(600, 600);
		frame.setVisible(true);
	}

[Yeray]

Hi Jonathan,

Try playing with the bar width:

Code: Select all

b.setCustomBarWidth(40);

If you comment the line b.setBarWidthPercent(100), you see that problem is that the second bar is drawn over the first, the third overlaps the second,... and so on. In fact all the bars have the same width, but only the last bar isn't overlapped.
This explains the two problems, the bars aren't displaced, but only a portion in their left is visible and they seem to be displaced. And the marks are in the middle of the bars, as you see in the last bar.

[Jonathan]

Hi Yeray,

1. I can't comment the line b.setBarWidthPercent(100) since my plot is HISTOGRAM, not pareto.

2. What you suggested doesn't work. Here is similar codes as above for run as-is. In this code, I changed BottomMax=60, setCustomBarWidth=10, and set BottomIncrement=10(Optional, but it makes sense since histogram bar has same barWidth) to see more problems clearly. If you run the code below, you will see the following problems.

Problem 1. the width of the last bar is always smaller than the other bars width.
Problem 2. all bars except the last one are displaced as you can see the marks are not in the middle of bars.
Problem 3. not this example plot, but I can see a problem with another histogram, where bar width is not integer, but double. The data in histogram plot are distorted by casting double bar width to integer in order to use setCustomBarWidth(int)

Code: Select all

	public static void main(String[] args) {
		JFrame frame = new JFrame();
		JPanel panel = new JPanel();
		panel.setSize(600, 600);
		TChart chart = new TChart();
		final int INCREMENT = 10;
		
		panel.add(chart);
		Bar b = new Bar(chart.getChart());
		b.add(10, 10.0);
		b.add(20, 20.0);
		b.add(30, 30.0);
		b.add(40, 40.0);
		b.add(50, 50.0);
		
		b.setMultiBar(MultiBars.STACKED);
		b.setBarWidthPercent(100);
		b.getMarks().setVisible(true);
		
		chart.getAxes().getBottom().getLabels().setStyle(AxisLabelStyle.VALUE);
		chart.getAxes().getBottom().setAutomatic(false);
		chart.getAxes().getBottom().setMinMax(-10, 60);
		chart.getAxes().getBottom().setIncrement(INCREMENT);
		
		//set the bar width
		b.setCustomBarWidth(INCREMENT);
		
		//set 2D
		chart.getAspect().setView3D(false);
		
		frame.add(panel);
		frame.setSize(600, 600);
		frame.setVisible(true);
	}

[Yeray]

Hi Jonathan,

I see the labels aligned with their correct axis value. The problem is that, having barWidthPercent as 100, the right side of the each bar is changed and it moves to the next bar left side. That's why they look wrong.

test.png (16.54 KiB) Viewed 24392 times

What you could do to correct it would be setting a barWidth of the same size that the distance from axis value 10 and 20:

Code: Select all

        b.setCustomBarWidth(b.calcXPos(1) - b.calcXPos(0));

test2.png (16.26 KiB) Viewed 24401 times

[Jonathan]

Hi Yeray,

Thanks for the help. However, I have an another issue.
Once I added a paint listener, it works only after I make a mouse click on chart. Why is this so? Did I miss something? Is there a way to refresh the chart after the chart is painted? In this way, i don't have to make a mouse click to see the correct bar width/location.

Code: Select all

	public static void main(String[] args) {
		JFrame frame = new JFrame();
		JPanel panel = new JPanel();
		panel.setSize(600, 600);
		final TChart chart = new TChart();
		final int INCREMENT = 10;
		ChartPaintListener chartPaintListener;
		
		panel.add(chart);
		Bar b = new Bar(chart.getChart());
		b.add(10, 10.0);
		b.add(20, 20.0);
		b.add(30, 30.0);
		b.add(40, 40.0);
		b.add(50, 50.0);
		
		b.setMultiBar(MultiBars.STACKED);
		b.setBarWidthPercent(100);
		b.getMarks().setVisible(true);
		
		chart.getAxes().getBottom().getLabels().setStyle(AxisLabelStyle.VALUE);
		chart.getAxes().getBottom().setAutomatic(false);
		chart.getAxes().getBottom().setMinMax(-10, 150);
		chart.getAxes().getBottom().setIncrement(INCREMENT);
		
		//add paint listener
		chartPaintListener = new ChartPaintAdapter() {
			@Override
			public void chartPainted(ChartDrawEvent arg0) {
				System.out.println("chartPainted");
				super.chartPainted(arg0);
				resizeBarWidth();
			}
			
			private void resizeBarWidth(){
				for(int i=0; i<chart.getSeriesCount(); i++){
					Series series = chart.getSeries(i);
					if(series instanceof Bar){
						Bar b = (Bar) series;
						System.out.println("bar count: " + b.getCount());
						if(b.getCount()> 1){
							System.out.println("1st bar loc: " + b.calcXPos(0));
							System.out.println("2nd bar loc: " + b.calcXPos(1));
							b.setCustomBarWidth(b.calcXPos(1)-b.calcXPos(0));
						}
					}
				}
			} 
		};
		chart.addChartPaintListener(chartPaintListener);
		
		//set 2D
		chart.getAspect().setView3D(false);

		frame.add(panel);
		frame.setSize(600, 600);
		frame.setVisible(true);
	}

[Yeray]

Hi Jonathan,

I've tried several methods to force a chart repaint in Java but I'm afraid I couldn't find anyone that allows you to calculate the CustomBarWidth correctly before showing the Chart the first time.
I've added it to the wish list to be investigated for future releases (TJ71015094).

[Marc]

Hello,

The following codeline should force a repaint:

Code: Select all

chart1.getImage();

(where chart is class TChart)

Regards,
Marc Meumann

[Jonathan]

Hi Marc,

Where should i put that code you mentioned for forcing a repaint? If I put it within the listener, there is infinite loop.

[Yeray]

Hi Jonathan,

Have you tried putting it before the end of the main and after adding the paint listener?

On the other hand. Have you tried with Histogram Series?

[Jonathan]

Yeray,

Yes, I tried it both cases you mentioned, and it doesn't work. I haven't tried the Histogram series because teeChart supporter told me long time ago that I could use "setBarWidthPercent(100)" in order to draw a histogram chart.

[Yeray]

Hi Jonathan,

It's strange because the code you posted here works fine for me with NetBeans 6.9.1. What IDE do you use?

[Jonathan]

I am using Elicpse 3.5.1 (Galileo)

[Yeray]

Hi Jonathan,

Excuse us for the delay.
While we investigate the repaint issue, could you please explain us what problem did you have that made us suggest you the Bar series instead of Histogram?

[Jonathan]

Yeray,

It's been a long time ago. Sorry I don't remember why the Bar series was used for histogram. I guess the Bar series was the basic framework that had been done.

[Yeray]

Hi Jonathan,

Excuse us for the delay in this issue.
We've been investigating this and found that adding a line in the TChart.java (swt) and some more changes in TChart.java (Swing) this can be done in the ChartPaintListener event.
Find attached both revised files and here it is the testing application for eclipse (swt):

Code: Select all

import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

import com.steema.teechart.TChart;

public class Test {

	static TChart chart;
	static com.steema.teechart.styles.Bar b;	
    public static void main(String [] args){

        final Display display = new Display();
        Shell shell = new Shell(display);
        shell.setLayout(new FillLayout());
        shell.setSize(600,400);       
    
        chart = new TChart(shell, 0);
                
        b = new com.steema.teechart.styles.Bar(chart.getChart());
        b.add(10, 10.0);
        b.add(20, 20.0);
        b.add(30, 30.0);
        b.add(40, 40.0);
        b.add(50, 50.0);
        
        b.setMultiBar(com.steema.teechart.styles.MultiBars.STACKED);
        b.getMarks().setVisible(true);
        
        chart.getAspect().setView3D(false);
        chart.getAxes().getBottom().getLabels().setStyle(com.steema.teechart.axis.AxisLabelStyle.VALUE);
        chart.getAxes().getBottom().setAutomatic(false);
        chart.getAxes().getBottom().setMinMax(-10, 150);
        chart.getAxes().getBottom().setIncrement(10);
        
        com.steema.teechart.events.ChartPaintListener chartPaintListener = new com.steema.teechart.events.ChartPaintAdapter() {
           @Override
           public void chartPainted(com.steema.teechart.events.ChartDrawEvent arg0) {
        	   b.setCustomBarWidth(b.calcXPos(1)-b.calcXPos(0));
           }
        };
        chart.addChartPaintListener(chartPaintListener);        
    
        shell.open();
        while (!shell.isDisposed()) {
        	if (!display.readAndDispatch()) {
        		display.sleep();
        	}
        }
        display.dispose();
    }
}