ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  perl: Resize chart to fit in containing <div>
Posted by Donavon Lerman on Jan-08-2019 03:47
How would I modify the following example, to have the chart auto resize to fit the size of it's containing <DIV>?

I used "clickbar.pl" as an example,

Thank You,
~Donavon

+---------------------------------------------------------------+


#!/usr/bin/perl

# Include current script directory in the module path (needed on Microsoft IIS).
# This allows this script to work by copying ChartDirector to the same directory
# as the script (as an alternative to installation in Perl module directory)
use File::Basename;
use lib dirname($0) =~ /(.*)/;

use perlchartdir;

# The data for the bar chart
my $data = [450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700];

# The labels for the bar chart
my $labels = ["1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004",
    "2005"];

# Create a XYChart object of size 600 x 360 pixels
my $c = new XYChart(600, 360);

# Add a title to the chart using 18pts Times Bold Italic font
$c->addTitle("Annual Revenue for Star Tech", "timesbi.ttf", 18);

# Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical gradient
# color from light blue (eeeeff) to deep blue (0000cc) as background. Set border and
# grid lines to white (ffffff).
$c->setPlotArea(60, 40, 500, 280, $c->linearGradientColor(60, 40, 60, 280, 0xeeeeff,
    0x0000cc), -1, 0xffffff, 0xffffff);

# Add a multi-color bar chart layer using the supplied data. Use soft lighting effect
# with light direction from top.
$c->addBarLayer3($data)->setBorderColor($perlchartdir::Transparent,
    perlchartdir::softLighting($perlchartdir::Top));

# Set x axis labels using the given labels
$c->xAxis()->setLabels($labels);

# Draw the ticks between label positions (instead of at label positions)
$c->xAxis()->setTickOffset(0.5);

# When auto-scaling, use tick spacing of 40 pixels as a guideline
$c->yAxis()->setTickDensity(40);

# Add a title to the y axis with 12pts Times Bold Italic font
$c->yAxis()->setTitle("USD (millions)", "timesbi.ttf", 12);

# Set axis label style to 8pts Arial Bold
$c->xAxis()->setLabelStyle("arialbd.ttf", 8);
$c->yAxis()->setLabelStyle("arialbd.ttf", 8);

# Set axis line width to 2 pixels
$c->xAxis()->setWidth(2);
$c->yAxis()->setWidth(2);

# Create the image and save it in a temporary location
my $chart1URL = $c->makeTmpFile("/tmp/tmpcharts");

# Create an image map for the chart
my $imageMap = $c->getHTMLImageMap("clickline.pl", "",
    "title='{xLabel}: US$ {value|0}M'");

print "Content-type: text/htmlnn";
print <<EndOfHTML
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Simple Clickable Bar Chart
</div>
<hr style="border:solid 1px #000080" />
<div style="font-size:10pt; font-family:verdana; margin-bottom:20">
    <a href="viewsource.pl?file=$ENV{"SCRIPT_NAME"}">View Source Code</a>
</div>

<div style="border:solid 1px;width:25%;">
<img src="/getchart.pl?img=/tmp/tmpcharts/$chart1URL" border="0" usemap="#map1">
<map name="map1">
$imageMap
</map>
</div>

</body>
</html>
EndOfHTML
;

  Re: perl: Resize chart to fit in containing <div>
Posted by Peter Kwan on Jan-09-2019 02:29
Hi Donavon,

You can use standard HTML to set any image to the same as the containing DIV. For example, you can simple add a CSS style of "width:100%" to the IMG tag.

However, in standard HTML, if you resize an image, the image map will no longer work normally, because the image map cannot be resized in HTML to match the image.

If you would like the image map (the tooltips and clickable bars) to work, you would need to use Javascript to work around HTML. See:

https://www.chartdir.com/forum/download_thread.php?bn=chartdir_general&thread=1253383061#N1474318711

In Perl, the code would be like below. (Note that the code below uses the "cdjcv.js" Javascript library.)

Regards
Peter Kwan


#!/usr/bin/perl

# Include current script directory in the module path (needed on Microsoft IIS).
# This allows this script to work by copying ChartDirector to the same directory
# as the script (as an alternative to installation in Perl module directory)
use File::Basename;
use lib dirname($0) =~ /(.*)/;

use perlchartdir;

# Get HTTP query parameters
use CGI;
my $query = new CGI;

# The data for the bar chart
my $data = [450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700];

# The labels for the bar chart
my $labels = ["1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004",
    "2005"];

# Create a XYChart object of size 600 x 360 pixels
my $c = new XYChart(600, 360);

# Add a title to the chart using 18pts Times Bold Italic font
$c->addTitle("Annual Revenue for Star Tech", "timesbi.ttf", 18);

# Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical gradient
# color from light blue (eeeeff) to deep blue (0000cc) as background. Set border and
# grid lines to white (ffffff).
$c->setPlotArea(60, 40, 500, 280, $c->linearGradientColor(60, 40, 60, 280, 0xeeeeff,
    0x0000cc), -1, 0xffffff, 0xffffff);

# Add a multi-color bar chart layer using the supplied data. Use soft lighting effect
# with light direction from top.
$c->addBarLayer3($data)->setBorderColor($perlchartdir::Transparent,
    perlchartdir::softLighting($perlchartdir::Top));

# Set x axis labels using the given labels
$c->xAxis()->setLabels($labels);

# Draw the ticks between label positions (instead of at label positions)
$c->xAxis()->setTickOffset(0.5);

# When auto-scaling, use tick spacing of 40 pixels as a guideline
$c->yAxis()->setTickDensity(40);

# Add a title to the y axis with 12pts Times Bold Italic font
$c->yAxis()->setTitle("USD (millions)", "timesbi.ttf", 12);

# Set axis label style to 8pts Arial Bold
$c->xAxis()->setLabelStyle("arialbd.ttf", 8);
$c->yAxis()->setLabelStyle("arialbd.ttf", 8);

# Set axis line width to 2 pixels
$c->xAxis()->setWidth(2);
$c->yAxis()->setWidth(2);

# Create the image and save it in a temporary location
my $chart1URL = $c->makeTmpFile("/tmp/tmpcharts", $perlchartdir::SVG);

# Create an image map for the chart
my $imageMap = $c->getHTMLImageMap("clickline.pl", "",
    "title='{xLabel}: US$ {value|0}M'");

# Set the chart URL, image map and chart metrics to the viewer
my $viewer = new WebChartViewer($query, "chart1");
$viewer->setImageUrl("getchart.pl?img=/tmp/tmpcharts/".$chart1URL);
$viewer->setImageMap($imageMap);
$viewer->setCustomAttr(31, $c->getWidth());
$viewer->setCustomAttr(32, $c->getHeight());

print "Content-type: text/html\n\n";
print <<EndOfHTML
<html>
<head>
<script type="text/javascript" src="cdjcv.js"></script>
<style>
#chart1 {width:100%;}
</style>
</head>
<body style="margin:5px 0px 0px 5px">
<script type="text/javascript">

JsChartViewer.addEventListener(window, 'load', function() {
    var viewer = JsChartViewer.get('chart1');
    viewer.initToolTipHandler();
});
</script>
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Simple Clickable Bar Chart
</div>
<hr style="border:solid 1px #000080" />
<div style="font-size:10pt; font-family:verdana; margin-bottom:20">
    <a href="viewsource.pl?file=$ENV{"SCRIPT_NAME"}">View Source Code</a>
</div>

<div id="chart_container" style="border:solid 1px;width:50%;">
<!-- ****** Here is the chart image ****** -->
@{[ $viewer->renderHTML() ]}
</div>

</body>
</html>
EndOfHTML
;

  Re: perl: Resize chart to fit in containing <div>
Posted by Donavon Lerman on Jan-09-2019 03:56
I get the following error:

TypeError: viewer.initToolTipHandler is not a function

  Re: perl: Resize chart to fit in containing <div>
Posted by Peter Kwan on Jan-09-2019 12:07
Hi Donavon,

Are you using the "cdjcv.js" from ChartDirector 6.x? It should be around 74978 or 74929 bytes. The initToolTipHandler function is only available in ChartDirector 6.x.

If you have upgraded from an older version of ChartDirctor to version 6.x, please ensure you have also upgraded the "cdjcv.js" in your script directory.

Regards
Peter Kwan