ChartDirector Support - View Thread 1416741248

Re: Filling a line chart

Posted by rev on Nov-23-2014 21:11

I have fixed Filling the line chart.
$returnXYChart->addAreaLayer($data, 0x01DFA5);

But still checking others.

rev wrote:

I'm working on a demo version of this excellent software. I have 3 questions here.

1. What is the default date format of finance charts?
2. I want to fill the yellow colored line VOL chart at the end. I want this like an area chart.
How can this be done.
3. Also I have added a +ve/-ve barchart(addBarIndicator) as an additional generaic
component. I want different colors for +ve/-ve bars . How can this be achieved.

Thanks
Rev

Re: Filling a line chart

Posted by Peter Kwan on Nov-24-2014 13:27

Hi rev,

For the "default date format" of the finance chart, do you refer to the "default date
format" for the dates that you passed to ChartDirector, or the "default date format" that
ChartDirector displays the date on the chart?

For passing date/time to ChartDirector, ChartDirector expects the date/time to be in the
"standard date/time format" of your programming language. For example, if the
programming language is Java, the dates should be java.util.Date objects. If the
programming language is .NET (VB.NET or C#), the dates should be System.DateTime. If
the programming language is VBScript, the date should be the Date data type of
VBScript.

If your programming language does not support any data type for date/time (such as
PHP, Python, Perl, C++), then ChartDirector expects the date to be expressed as a
number representing the clock seconds elapsed since Jan 1, 0001 00:00:00. The clock
seconds assume one day has 24 hours, one hour has 60 minutes, and one minute has 60
seconds, as is in a clock.

You can determine the seconds elapsed using the ChartDirector function chartTime. Many
prorgamming systems can also use sometime called a "UNIX timestamp", which is a
number representing the seconds elapsed since Jan 1, 1970 00:00:00 GMT. You can
convert from this value to the ChartDirector representation by using the chartTime2
function.

If your date/time comes from a database, you can ask the database to return the UNIX
tmestamp of the date/time (eg. in the MySQL database there is a UNIX_timestamp
function), and then use chartTime2 to convert to the ChartDirector representation.

Note that ChartDirector cannot understand date/time in human languages or in text
strings.

If you need more information, please let me know what is your programming language and
where the date/time come from and in what format (from a database, from a text file, or
generating using some algorithm in your code ...).

If you are referring to the default date/time format that ChartDirector displays on the
chart for the x-axis, it depends on your time range. For example, if you are plotting an
intraday chart, the format may include hh:nn:ss. If you are plotting a chart spanning 30
years, the format may just include the year yyyy. The formats for the various cases can
be configured using FinanceChart.setDateLabelFormat. (You may look it up from the
ChartDirector documentation index.).

For creating a bar chart using different colors for positive and negative bars, you may
refer to the "Positive Negative Bars" sample code for a reference. (You may look it up
from the ChartDirector documentation index.).

Hope this can help.

Regards
Peter Kwan

Re: Filling a line chart

Posted by rev on Nov-24-2014 14:59

Thanks Peter.
I converted date into time elapsed since 1-1-0001 in mysql query and it is working.
I have checked +ve/-ve bar chart. But we need to separate +ve/-ve values and achieve it.
Is there any other alternative.

Secondly, I was using a crosshair over the finance chart with lot of generic indicators.
But the problem is the crosshair shows only the stock quote even when I hover RSI/MACD, etc. I feel the problem is I'm just getting chart and it always returns the main candle chart. So when I move to RSI indicator it shows lower values of stock. Please find my code below. How do I get the respective indicator values when I hover them.

JsChartViewer.addEventListener(window, 'load', function() {
    var viewer = JsChartViewer.get('<?php echo $viewer->getId()?>');

    // Draw track cursor when mouse is moving over plotarea
    viewer.attachHandler("MouseMovePlotArea", function(e) {
        traceFinance(viewer, viewer.getPlotAreaMouseX());
        crossHairAxisLabel(viewer, viewer.getPlotAreaMouseX(), viewer.getPlotAreaMouseY());

    });

    // Initialize the track line with legend to show the latest data point
    if (viewer.getChart())
        traceFinance(viewer, viewer.getChart().getPlotArea().getRightX());
        crossHairAxisLabel(viewer, viewer.getPlotAreaMouseX(), viewer.getPlotAreaMouseY());
});

function crossHairAxisLabel(viewer, x, y)
{
    // Show cross hair
    viewer.showCrossHair(x, y);

    // The chart, its plot area and axes

    var c = viewer.getChart();
    var plotArea = c.getPlotArea();

    var xAxis = c.xAxis();
    var yAxis = c.yAxis();

    // The axis label style
    var labelStyle = "padding:2px 4px; font: bold 8pt arial; color:white; background-color:#0174DF";

    // Draw y-axis label
    var xPos = yAxis.getX() + ((yAxis.getAlignment() == JsChartViewer.Left) ? -2 : 3);
    var alignment = (yAxis.getAlignment() == JsChartViewer.Left) ? JsChartViewer.Right : JsChartViewer.Left;
    viewer.showTextBox("yAxisLabel", xPos, y, alignment, c.getYValue(y, yAxis).toFixed(2), labelStyle);

     var xValue = c.getNearestXValue(viewer.getPlotAreaMouseX());
    var xCoor = c.getXCoor(xValue);
//    console.log(xValue);

viewer.showTextBox("xAxisLabel", xCoor, plotArea.getBottomY() + 3, JsChartViewer.Top,
        c.xAxis().getFormattedLabel(xValue, "mmm dd, yyyy"),
        "font:bold 11px Arial;color:#FFFFFF;background-color:#0174DF;padding:2px 3px");

}

crosshair_finance.php

<?php
require_once("../lib/FinanceChart.php");

# Create a finance chart demo containing 100 days of data
$noOfDays = 100;

# To compute moving averages starting from the first day, we need to get extra data points before
# the first day
$extraDays = 30;

# In this exammple, we use a random number generator utility to simulate the data. We set up the
# random table to create 6 cols x (noOfDays + extraDays) rows, using 9 as the seed.
$rantable = new RanTable(9, 6, $noOfDays + $extraDays);

# Set the 1st col to be the timeStamp, starting from Sep 4, 2011, with each row representing one
# day, and counting week days only (jump over Sat and Sun)
$rantable->setDateCol(0, chartTime(2011, 9, 4), 86400, true);

# Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The open value starts
# from 100, and the daily change is random from -5 to 5.
$rantable->setHLOCCols(1, 100, -5, 5);

# Set the 6th column as the vol data from 5 to 25 million
$rantable->setCol(5, 50000000, 250000000);

# Now we read the data from the table into arrays
$timeStamps = $rantable->getCol(0);
$highData = $rantable->getCol(1);
$lowData = $rantable->getCol(2);
$openData = $rantable->getCol(3);
$closeData = $rantable->getCol(4);
$volData = $rantable->getCol(5);

# Create a FinanceChart object of width 720 pixels
$c = new FinanceChart(720);

# Add a title to the chart
$c->addTitle("Finance Chart Demonstration");

# Set the data into the finance chart object
$c->setData($timeStamps, $highData, $lowData, $openData, $closeData, $volData, $extraDays);

# Add the main chart with 240 pixels in height
$c->addMainChart(240);

# Add a 10 period simple moving average to the main chart, using brown color
$c->addSimpleMovingAvg(10, 0x663300);

# Add a 20 period simple moving average to the main chart, using purple color
$c->addSimpleMovingAvg(20, 0x9900ff);

# Add candlestick symbols to the main chart, using green/red for up/down days
$c->addCandleStick(0x00ff00, 0xff0000);

# Add 20 days bollinger band to the main chart, using light blue (9999ff) as the border and
# semi-transparent blue (c06666ff) as the fill color
$c->addBollingerBand(20, 2, 0x9999ff, 0xc06666ff);

# Add a 75 pixels volume bars sub-chart to the bottom of the main chart, using green/red/grey for
# up/down/flat days
$c->addVolBars(75, 0x99ff99, 0xff9999, 0x808080);

# Append a 14-days RSI indicator chart (75 pixels high) after the main chart. The main RSI line is
# purple (800080). Set threshold region to +/- 20 (that is, RSI = 50 +/- 25). The upper/lower
# threshold regions will be filled with red (ff0000)/blue (0000ff).
$c->addRSI(75, 14, 0x800080, 20, 0xff0000, 0x0000ff);

# Append a MACD(26, 12) indicator chart (75 pixels high) after the main chart, using 9 days for
# computing divergence.
$c->addMACD(75, 26, 12, 9, 0x0000ff, 0xff00ff, 0x008000);

# Create the WebChartViewer object
$viewer = new WebChartViewer("chart1");

# Output the chart
$chartQuery = $c->makeSession($viewer->getId());

# Set the chart URL to the viewer
$viewer->setImageUrl("getchart.php?".$chartQuery);

# Output Javascript chart model to the browser to support tracking cursor
$viewer->setChartModel($c->getJsChartModel());
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Finance Chart Track Line</title>
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
<script type="text/javascript">

//
// Use the window load event to set up the MouseMovePlotArea event handler
//
JsChartViewer.addEventListener(window, 'load', function() {
    var viewer = JsChartViewer.get('<?php echo $viewer->getId()?>');

    // Draw track cursor when mouse is moving over plotarea
    viewer.attachHandler("MouseMovePlotArea", function(e) {
        crossHairAxisLabel(viewer, viewer.getPlotAreaMouseX(), viewer.getPlotAreaMouseY());
        viewer.setAutoHide("all", "MouseOutPlotArea");
    });
});

//
// Draw finance chart track line with legend
//
function crossHairAxisLabel(viewer, x, y)
{
    // Remove all previously drawn tracking object
    viewer.hideObj("all");

    // It is possible for a FinanceChart to be empty, so we need to check for it.
    if (!viewer.getChart())
        return;

    // Get the data x-value that is nearest to the mouse
    var xValue = viewer.getChart().getNearestXValue(x);

    // Iterate the XY charts to find the chart that contains the mouse cursor
    for (var i = 0; i < viewer.getChartCount(); ++i)
    {
        var c = viewer.getChart(i);

        // Get the plot area position relative to the entire FinanceChart
        var plotArea = c.getPlotArea();
        var plotAreaLeftX = plotArea.getLeftX() + c.getAbsOffsetX();
        var plotAreaTopY = plotArea.getTopY() + c.getAbsOffsetY();

		// Check if the chart contains the mouse cursor
		if ((y < plotAreaTopY) || (y > plotAreaTopY + plotArea.getHeight()))
			continue;

	    // Show cross hair
    	viewer.showCrossHair(x, y);

   		// The chart, its plot area and axes
   		var bottomChart = viewer.getChart(viewer.getChartCount() - 1);
    	var xAxis = bottomChart.xAxis();
    	var yAxis = c.yAxis();

	    // The axis label style
    	var labelStyle = "padding:2px 4px; font: bold 8pt arial; border:1px solid black; background-color:#DDDDFF";

	    // Draw x-axis label
    	var yPos = xAxis.getY() + ((xAxis.getAlignment() == JsChartViewer.Top) ? -2 : 3) + bottomChart.getAbsOffsetY();
	    var alignment = (xAxis.getAlignment() == JsChartViewer.Top) ? JsChartViewer.Bottom : JsChartViewer.Top;
    	viewer.showTextBox("xAxisLabel", x, yPos, alignment, c.xAxis().getFormattedLabel(xValue, "mmm dd, yyyy"), labelStyle);

	    // Draw y-axis label
    	var xPos = yAxis.getX() + ((yAxis.getAlignment() == JsChartViewer.Left) ? -2 : 3);
	    var alignment = (yAxis.getAlignment() == JsChartViewer.Left) ? JsChartViewer.Right : JsChartViewer.Left;
    	viewer.showTextBox("yAxisLabel", xPos, y, alignment, c.getYValue(y - c.getAbsOffsetY(), yAxis).toPrecision(4), labelStyle);
    	
    	break;
    }
}

</script>
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Finance Chart Track Line
</div>
<hr style="border:solid 1px #000080" />
<div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em">
    <a href="viewsource.php?file=<?php echo $_SERVER["SCRIPT_NAME"]?>">View Source Code</a>
</div>
<!-- ****** Here is the chart image ****** -->
<?php echo $viewer->renderHTML()?>
</body>
</html>