Steema Central

Steema Software - Customer Support Forums
http://teechart.com/support/

HighLow chart with TimeSeries

http://teechart.com/support/viewtopic.php?f=10&t=13768

Page 1 of 1

HighLow chart with TimeSeries

Posted: Thu Jan 03, 2013 11:38 pm
by 16959570
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
PHL_Class.png (4.43 KiB) Viewed 16494 times
But I get a result like this:
HiLo_Issue.png
HiLo_Issue.png (6.81 KiB) Viewed 16549 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

Re: HighLow chart with TimeSeries

Posted: Fri Jan 04, 2013 9:28 am
by 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.
DaveSav wrote:Is it possible to create a HighLow chart with a timeseries as the x axis?
DaveSav wrote:Can HighLow have a TimeSeries
DaveSav wrote: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);
DaveSav wrote: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.
DaveSav wrote: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();
		}

Re: HighLow chart with TimeSeries

Posted: Fri Jan 04, 2013 9:55 pm
by 16959570
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
HiLo_Issue_2.png (7.53 KiB) Viewed 16497 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

Re: HighLow chart with TimeSeries

Posted: Mon Jan 07, 2013 12:23 pm
by yeray
Hi,
DaveSav wrote: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?
DaveSav wrote: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);
DaveSav wrote: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.
DaveSav wrote: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());
DaveSav wrote: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

Re: HighLow chart with TimeSeries

Posted: Tue Jan 08, 2013 11:42 pm
by 16959570
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
hl_legend_issue.png (36.71 KiB) Viewed 16466 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

Re: HighLow chart with TimeSeries

Posted: Wed Jan 09, 2013 3:00 pm
by 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");

Re: HighLow chart with TimeSeries

Posted: Wed Jan 09, 2013 10:12 pm
by 16959570
Brilliant!

Thanks, Yeray.

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

Regards

Dave

Re: HighLow chart with TimeSeries

Posted: Thu Jan 10, 2013 9:21 am
by yeray
Hi Dave,

I'm glad to hear that! :D
All times are UTC
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/