HighLow chart with TimeSeries

[DaveSav]

Is it possible to create a HighLow chart with a timeseries as the x axis?

I've tried with this code:

Code: Select all

chart.removeAllSeries();
            chart.getAspect().setView3D(false);

            //X AXIS
            //set the x-axis date display to e.g. '01-JAN'
            chart.getAxes().getBottom().getLabels().setDateTimeFormat("dd-MMM");
            //set the angle of the date display
            chart.getAxes().getBottom().getLabels().setAngle(45);
		    
          //Y AXIS
            //set up the y axis title
            AxisTitle hlTitle;
            hlTitle=chart.getAxes().getLeft().getTitle();
            hlTitle.setCaption("Severity");
            //end title
            //set y to increment by 1
            //override the auto min/max and set to 0/10
            chart.getAxes().getLeft().setAutomaticMaximum(false);
            chart.getAxes().getLeft().setAutomaticMinimum(false);
            chart.getAxes().getLeft().setMinimum(0.0);
            chart.getAxes().getLeft().setMaximum(10.0);
            chart.getAxes().getLeft().setIncrement(1.00);
            
            
		    Series hl = new HighLow(chart.getChart());

		    if(PHL.size()>0){
		        for(int i=0; i<PHL.size(); i++){
		            DateTime dt = new DateTime(
                           DateDiff.getYearFromString(PHL.get(i).getDateRecord()),
                           DateDiff.getMonthFromString(PHL.get(i).getDateRecord()),
                           DateDiff.getDayFromString(PHL.get(i).getDateRecord()));
		            
		            hl.add(dt, (double)PHL.get(i).getSeverity(), PHL.get(i).getName());
		        }
		    }
		    
		    chart.getLegend().setLegendStyle(LegendStyle.SERIES);
            chart.getLegend().setAlignment(LegendAlignment.RIGHT);
            //chart.getLegend().set
            chart.getLegend().setCheckBoxes(true);
            chart.getHeader().setVisible(false);
            chart.getPanel().setTransparent(true);
            
            chart.getWalls().getBack().setVisible(true);

Where PHL contains data such as:

PHL_Class.png (4.43 KiB) Viewed 16263 times

But I get a result like this:

HiLo_Issue.png (6.81 KiB) Viewed 16318 times

So the questions are:

• Can HighLow have a TimeSeries
  Why does the X axis show the string rather than the date (I was hoping the string would appear in place of 'Series 0')
  Can there be more than 1 HighLow series per chart, or does it need to page (this app would have n number of series)

Many thanks

[Yeray]

Hi Dave,

First of all, note we don't have "PHL" defined here so I had to make some modifications to the code you posted to run it here.

Is it possible to create a HighLow chart with a timeseries as the x axis?

Can HighLow have a TimeSeries

Why does the X axis show the string rather than the date

Yes, of course. In your code, you are adding the points with label (PHL.get(i).getName()). Having a point with a label (and while the bottom axis labels style is the default "AUTO") makes the bottom axis to show the labels instead of the values. To change it, you just have to force the bottom axis labels style to "VALUE":

Code: Select all

tChart1.getAxes().getBottom().getLabels().setStyle(AxisLabelStyle.VALUE);

I was hoping the string would appear in place of 'Series 0'

Do you mean you want the point labels (PHL.get(i).getName()) to be shown in the legend?
If I comment the following lines I get the values and labels in the legend, without checkboxes:

Code: Select all

//tChart1.getLegend().setLegendStyle(LegendStyle.SERIES);
//tChart1.getLegend().setCheckBoxes(true);

Then, if I add the following line, I get only the labels, but still without the checkboxes:

Code: Select all

tChart1.getLegend().setTextStyle(LegendTextStyle.PLAIN);

I'm afraid it's not possible to have the list of points in the legend with checkboxes. When the checkboxes are active the legend style changes automatically to show the list of series. If you want to show/hide a point, you have to do it manually with the setnull function.

Can there be more than 1 HighLow series per chart, or does it need to page (this app would have n number of series)

Yes, why not? Ie:

Code: Select all

		tChart1.removeAllSeries();
		tChart1.getAspect().setView3D(false);

		for (int i=0; i<3; i++) {
			HighLow hl = new HighLow(tChart1.getChart());
			hl.fillSampleValues();
		}

[DaveSav]

Thanks Yeray,

I've reduced the data within PHL for this testing as it included what I would consider to be multiple series.

This is the data which is being sent via

Code: Select all

hl.add(dt, (double)PHL.get(i).getSeverity(), PHL.get(i).getName());

Code: Select all

10/11/12	8	Buttock, Right
10/11/12	7	Buttock, Right

11/4/12		8	Buttock, Right

11/25/12	6	Buttock, Right

12/8/12		4	Buttock, Right

12/23/12	6	Buttock, Right

1/1/13		4	Buttock, Right

which appears to be in month/day/year format.

And this is the chart produced:

HiLo_Issue_2.png (7.53 KiB) Viewed 16266 times

You'll notice that only 1 item has a potential Hi/Low value.

As this would be user generated data, it would be quite common for a date to have only 1 value assigned to it, or it could have more than 2 values assigned to it.

With this in mind, here are my follow up questions:

• Why do you think that the values for 10/11/12 aren't displaying in a Hi-Low format
  Should I further prepare the data in PHL before providing it to the chart? I.e. if a date has 5 values against it, should I parse it so that only the highest and lowest values are sent
  If a date only has 1 value against it, how should I present that to the chart - the user would still want to see that data

Many thanks for your help to date.

Regards

[Yeray]

Hi,

You'll notice that only 1 item has a potential Hi/Low value.

As this would be user generated data, it would be quite common for a date to have only 1 value assigned to it, or it could have more than 2 values assigned to it.

The HighLow series is designed to have an XValue and two YValues (High and Low) for each point. If you want to add points with only an YValue, where is the other YValue supposed to be drawn? In the zero?

This is the data which is being sent via

Code: Select all

    hl.add(dt, (double)PHL.get(i).getSeverity(), PHL.get(i).getName());

This add() method isn't a HighLow series function. It exists and it works because of the inheritance, but with it you'll be adding a unique YValue (High) and the second YValue (Low) will be drawn in the zero by default and in the last point Low value if any.
So, if you know what Low values should have the points where you only have their High value, I'd add the points using it.
In example, with the values you provided, if you want Low value to be zero when you only have the High value for a date:

Code: Select all

		tChart1.getAspect().setView3D(false);
		
		HighLow hl = new HighLow(tChart1.getChart());
		hl.getXValues().setDateTime(true);
		
		//months are from 0 to 11, so I subtracted 1 to the number of months in your data
		hl.Add((new DateTime(2012, 9, 11)).toDouble(), 8, 7, "Buttock");
		hl.Add((new DateTime(2012, 10, 4)).toDouble(), 8, 0, "Buttock");
		hl.Add((new DateTime(2012, 10, 25)).toDouble(), 6, 0, "Buttock");
		hl.Add((new DateTime(2012, 11, 8)).toDouble(), 4, 0, "Buttock");
		hl.Add((new DateTime(2012, 11, 23)).toDouble(), 6, 0, "Buttock");
		hl.Add((new DateTime(2013, 0, 1)).toDouble(), 4, 0, "Buttock");
		
		tChart1.getAxes().getBottom().getLabels().setDateTimeFormat("dd-MMM");
		tChart1.getAxes().getBottom().getLabels().setAngle(45);
		tChart1.getAxes().getBottom().getLabels().setStyle(AxisLabelStyle.VALUE);

Why do you think that the values for 10/11/12 aren't displaying in a Hi-Low format

If I understand it correctly, you've added two points at 10/11/12, one with High value 8 and the next with High 7.
You should do it as shown above, adding each point with High and Low values.

Should I further prepare the data in PHL before providing it to the chart? I.e. if a date has 5 values against it, should I parse it so that only the highest and lowest values are sent

I think so. I think the best solution would be to have you data like this:

Code: Select all

10/11/12   8   7   Buttock, Right

11/4/12      8   0   Buttock, Right

11/25/12   6   0   Buttock, Right

12/8/12      4   0   Buttock, Right

12/23/12   6   0   Buttock, Right

1/1/13      4   0   Buttock, Right

In case zero is your default Low value. And add your values as:

Code: Select all

hl.Add(dt, (double)PHL.get(i).getHighSeverity(), (double)PHL.get(i).getLowSeverity(), PHL.get(i).getName());

If a date only has 1 value against it, how should I present that to the chart - the user would still want to see that data

I can't decide it for you. I've assumed you wanted a default Low value at zero, but maybe you want your High values to be equal to your Low values. Ie:

Code: Select all

10/11/12   8   7   Buttock, Right

11/4/12      8   8   Buttock, Right

11/25/12   6   6   Buttock, Right

12/8/12      4   4   Buttock, Right

12/23/12   6   6   Buttock, Right

1/1/13      4   4   Buttock, Right

[DaveSav]

Thanks Yeray,

My intial downfall was choosing the wrong Add method, as you pointed out.

I've changed the db and my PHL class to provide the max and min values for a given date for a given 'thing'; where if there is only 1 entry, max and min are the same.

This is the code now:

Code: Select all

chart.removeAllSeries();
            chart.getAspect().setView3D(false);

            //X AXIS
            //set the x-axis date display to e.g. '01-JAN'
            chart.getAxes().getBottom().getLabels().setDateTimeFormat("dd-MMM");
            //set the angle of the date display
            chart.getAxes().getBottom().getLabels().setAngle(45);
            chart.getAxes().getBottom().getLabels().setStyle(AxisLabelStyle.VALUE);
          //Y AXIS
            //set up the y axis title
            AxisTitle hlTitle;
            hlTitle=chart.getAxes().getLeft().getTitle();
            hlTitle.setCaption("Severity");
            //end title
            //set y to increment by 1
            //override the auto min/max and set to 0/10
            chart.getAxes().getLeft().setAutomaticMaximum(false);
            chart.getAxes().getLeft().setAutomaticMinimum(false);
            chart.getAxes().getLeft().setMinimum(0.0);
            chart.getAxes().getLeft().setMaximum(10.0);
            chart.getAxes().getLeft().setIncrement(1.00);
            
            chart.getLegend().setLegendStyle(LegendStyle.AUTO);
            chart.getLegend().setAlignment(LegendAlignment.TOP);
            chart.getLegend().setTextStyle(LegendTextStyle.PLAIN);
            chart.getLegend().setCheckBoxes(false);
            chart.getLegend().getFont().setSize(20);
            
		    HighLow hl = new HighLow(chart.getChart());
		    hl.getXValues().setDateTime(true);
		    
		    if(PHL.size()>0){
		        for(int i=0; i<PHL.size(); i++){
		           hl.Add((new DateTime(DateDiff.getYearFromString(PHL.get(i).getDateRecord()), DateDiff.getMonthFromString(PHL.get(i).getDateRecord()), DateDiff.getDayFromString(PHL.get(i).getDateRecord()))).toDouble(), (double)PHL.get(i).getSeverityLow(), (double)PHL.get(i).getSeverityHi(), PHL.get(i).getName());
		        }
		    }
            chart.getHeader().setVisible(false);
            chart.getPanel().setTransparent(true);
            chart.getWalls().getBack().setVisible(true);

This is the graph produced:

hl_legend_issue.png (36.71 KiB) Viewed 16235 times

I am happy with the graph, but I can't figure out how to configure the Legend. It should show the series name only once. Is this possible?

Thanks

[Yeray]

Hi Dave,

Since you added the points with label (actually the same "Buttock, Right" label for all the points) the default legend style shows these labels when present.
If you want to show the series name, you can force it with this:

Code: Select all

tChart1.getLegend().setLegendStyle(LegendStyle.SERIES);

Note you also have to set your series title, ie:

Code: Select all

hl.setTitle("Buttock, Right");

[DaveSav]

Brilliant!

Thanks, Yeray.

Thanks very much for your prompt and comprehensive support. Am very impressed.

Regards

Dave

[Yeray]

Hi Dave,

I'm glad to hear that!