|
 How can I make the legend match the line/bar type |
| Posted by David Thielen on Feb-23-2021 03:46 |
|
Hi;
The attached file is a combination of line and bar graphs. However, the legend renders each color as a line.
Is there a way to have it render the bar components (red & blue in this case) as bars in the legend?
thanks - dave
|
| Re: How can I make the legend match the line/bar type |
| Posted by Peter Kwan on Feb-23-2021 11:36 |
|
Hi David,
Yes, ChartDirector can uses line icons for line layers, and box icons for bar layers. The following is an example. It is a line + area chart, but the line + bar chart will have the same icons.
https://www.advsofteng.com/doc/cdnet.htm#arealine.htm
Regards
Peter Kwan |
| Re: How can I make the legend match the line/bar type |
| Posted by David Thielen on Feb-28-2021 01:25 |
|
Hi Peter;
No luck. Reading the code I added setLineStyleKey(true); but that actually made the bar chart legend thinner than the line chart legend items, not fatter.
My code is:
XYChart chart;
LegendBob lb = chart.addLegend(1597, 526, true);
lb.setKeySize(33, -1, -1);
lb.setKeySpacing(12, 28);
lb.setFontStyle("C:WindowsFontscalibri.ttf");
lb.setFontSize(31);
lb.setKeyBorder(Chart.Transparent);
lb.setBackground(Chart.Transparent, Chart.Transparent);
lb.setMargin(20, 41, 41, 41);
lb.setFontColor(0xFFFF0002);
lb.setMaxWidth(631);
lb.setLineStyleKey(true); // also tried false
Below is what I am getting.
??? - thanks - dave
|
| Re: How can I make the legend match the line/bar type |
| Posted by Peter Kwan on Feb-28-2021 22:53 |
|
Hi David,
Would you mind to clarify if the legend entry for "Target MTD" is from the bar layer, and not from some a line layer or some custom legend entry?
In your case, the bar layer is behind the line layer. The default legend ordering will put the legend entry for the bar layer as the last entry. but in your chart, the "Target MTD" is the first entry.
Your code may have use Layer.setLegendOrder to reorder the legend entry, or Layer.moveBack to move the layer ordering. Another possibility is that the BarLayer has no legend entry, and the "Target MTD" is configure using an alternative method, such as from an empty line layer, or with LegendBox.addKey, and the key is added in a style such that the icon is displayed as a line. Please verify which method you are using to add the "Target MTD" legend entry.
From your code, it seems it is in Java. (The code looks like Java/C# syntax, but the 0xFFFF0002 is invalid in modern C#, so I guess it is Java.) I have modified the original "Multi Line Chart" sample code in ChartDirector to change one of the line to a bar layer, and with the legend box configured using code similar to your code. I have attached the resulting image for your reference.
Would you mind to test the code I attached to see if it is getting similar result? Or is it possible to provide an example (such as by modifying the sample code) to create a thin line legend entry for a bar chart so I can try to reproduce the problem?
Regards
Peter Kwan
|
| Re: How can I make the legend match the line/bar type |
| Posted by David Thielen on Mar-03-2021 06:16 |
|
Hi Peter;
Ok, it first renders the bars
DataSet cdDataSet = layerOn.addDataSet(colorSet.getValues());
SeriesColorFormatting format = colorSet.formatting;
RenderedBarSeries renderedBar = new RenderedBarSeries(cdDataSet, format, layerOn);
renderedBar.values = ArrayUtils.toObject(colorSet.getValues());
renderedBars.add(renderedBar);
// this is the series title
cdDataSet.setDataName(ser.getSeriesTitle());
legendKeys.add(new LegendKeyData(format.legendColor, ser.getSeriesTitle()));
// and then later, after all bar chart data (1 series) has been added:
for (LegendKeyData keyOn : legendKeys)
chart.getLegend().addKey(keyOn.title, keyOn.color);
// Word z order for bars is first series at bottom, but we add datasets first->last
// and with CD adding bars the last series is at bottom z order, opposite of Word so
// here were moving our bar layers to the front to reverse the z order to fix that.
for (BarLayer layerOn : barLayers)
layerOn.moveFront();
// *** now the lines ***
double[] yVals;
lineLayer = c.addLineLayer2();
baseDriver.addLayer(lineLayer);
lineLayer.setDataCombineMethod(0);
DataSet cdDataSet = lineLayer.addDataSet(yVals);
// this is the series title
cdDataSet.setDataName((String) dstDataSet.getSeriesTitles().get(serInd));
// now the second line
lineLayer = c.addLineLayer2();
baseDriver.addLayer(lineLayer);
lineLayer.setDataCombineMethod(0);
DataSet cdDataSet = lineLayer.addDataSet(yVals);
// this is the series title
cdDataSet.setDataName((String) dstDataSet.getSeriesTitles().get(serInd));
// And I have stepped through this code - and can't find where the X values are set.
// What call should I look for to get that?
thanks - dave |
| Re: How can I make the legend match the line/bar type |
| Posted by Peter Kwan on Mar-03-2021 20:52 |
|
Hi David,
For the xVals, I have responded in your other post that it is not mandatory. It is possible that the code you are working on does not use xVals.
For the legend icon, there is no way ChartDirector can know the icon added by "chart.getLegend().addKey(keyOn.title, keyOn.color);" is for the bar layer. Still, I thing the icon should not be a thin line.
There are also several unusual feature in your attached chart. For example, the first chart in your post is definitely not rendered by ChartDirector. The second chart is also a bit strange in that the bars are not of the same width, and the font size and coordinates in your code does not match the attached chart. (In the same bar layer, ChartDirector always draws bars width the same width. In your second chart, some bars are 1 pixel wider than the others.) If the chart goes through further processing by another software (such as to shrink the chart size), it is possible that software can change things.
In ChartDirector, if a dataset has a color and a name, there should be an automatic legend entry. If the cdDataSet in your code is actual bar layer, then your chart should have an automatic entry for the bar layer in addition to the "addKey" entry. It is not quite clear in your code what is "RenderedBarSeries" and whether the cdDataSet is actually rendered.
The ordering of the code is auto important. The ordering as mentioned in your message will not put the BarLayer behind the LineLayer. You have to apply moveBack after you have added the LineLayer, not before it.
To diagnose the problem, please change:
DataSet cdDataSet = layerOn.addDataSet(colorSet.getValues());
SeriesColorFormatting format = colorSet.formatting;
....
cdDataSet.setDataName(ser.getSeriesTitle());
to:
double[] dummyData = { 100, 500, 200, 900, 300, 400 };
DataSet cdDataSet = layerOn.addDataSet(dummyData, 0x00ffff);
....
cdDataSet.setDataName("QPRS");
and also change:
for (LegendKeyData keyOn : legendKeys)
chart.getLegend().addKey(keyOn.title, keyOn.color);
to:
for (LegendKeyData keyOn : legendKeys)
chart.getLegend().addKey("XYZW", 0xff0000);
and after the chart is completely, please add the line:
chart.makeChart("c:/some_directory/aaa.png");
chart.makeChart("c:/some_directory/aaa.svg");
Please check if the above changes (the hard coded legend entries and colors) are reflected in your real chart. You should get "aaa.png" and "aaa.svg" as the actual charts rendered by ChartDirector. (The "aaa.svg" contains additional information that can help to analyze the structure of the chart.) Please let me know what are the results.
Regards
Peter Kwan |
| Re: How can I make the legend match the line/bar type |
| Posted by David Thielen on Mar-03-2021 23:52 |
|
Hi Peter;
Changing the data is a lot of work. So I'm sending the SVG for my data in the hope that that is sufficient.
There is no other processing of the chart. That first chart is created with ChartDirector (the attached is just the first chart). We have no other code to create or post-process charts.
One thing of note, we are building this at 300 DPI and so that might be rendering using a lot more pixels than you normally see.
thanks - dave
| report.html |
|---|
<!-- windwardreports ver: 21.0.0.83 (java), jvm: 1.8. os: Windows 10, osver: 10.0, user: Windward Studios, Inc.-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<style type="text/css">
p {
font-family:Calibri;
font-size:11.0pt;
color:#000000;
margin-top:0.0pt;
margin-bottom:8.0pt;
line-height:1.08;
margin-right:0.0pt;
border:0 none;
text-align:left;
text-indent:0.0pt;
}
p.s1 {
font-family:Calibri;
font-size:11.0pt;
color:#000000;
margin-top:0.0pt;
margin-bottom:8.0pt;
line-height:1.08;
margin-right:0.0pt;
border:0 none;
text-align:left;
text-indent:0.0pt;
}
p.s6 {
font-family:Calibri;
font-size:11.0pt;
color:#000000;
margin-top:0.0pt;
margin-bottom:0.0pt;
line-height:1.0;
margin-right:0.0pt;
border:0 none;
text-align:left;
text-indent:0.0pt;
}
p.s8 {
font-family:Calibri;
font-size:11.0pt;
color:#000000;
margin-top:0.0pt;
margin-bottom:0.0pt;
line-height:1.0;
margin-right:0.0pt;
border:0 none;
text-align:left;
text-indent:0.0pt;
}
p.s10 {
font-family:Calibri;
font-size:11.0pt;
color:#000000;
margin-top:0.0pt;
margin-bottom:8.0pt;
line-height:1.08;
margin-right:0.0pt;
border:0 none;
text-align:left;
text-indent:0.0pt;
}
IMG.centered{
display: block;
margin-left: auto;
margin-right: auto
}IMG.right{
float:right;
}IMG.left{
float:left;
}
#container {
width:1085px;
margin:0px auto;
}
</style>
</head>
<body><div id="container">
<p><span style="font-size:14.0pt;"><br/><b style="font-size:14.0pt; "></b></span></p>
<p><span style="font-size:14.0pt;"><b style="font-size:14.0pt; ">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1803 1053" xml:space="preserve">
<defs>
<clipPath id="b5">
<rect x="141" y="43" width="1120" height="752"/>
</clipPath>
<clipPath id="b15">
<rect x="141" y="43" width="1120" height="752"/>
</clipPath>
</defs>
<g font-family="Arial" font-size="11px" fill="none" fill-rule="evenodd" stroke-linecap="square">
<rect id="b3" x="0" y="0" width="1803" height="1053"/>
<use xlink:href="#b3" fill="#FFFFFF"/>
<rect id="b2" x="0" y="0" width="1803" height="1053"/>
<use xlink:href="#b2" fill="#FFFFFF"/>
<rect id="b4" x="142" y="44" width="1118" height="750"/>
<use xlink:href="#b4" fill="#FFFFFF"/>
<g clip-path="url(#b5)"/>
<line id="b6" x1="141.5" y1="794.5" x2="1260.5" y2="794.5" stroke-width="3"/>
<use xlink:href="#b6" stroke="#868686"/>
<line id="b7" x1="141.5" y1="700.5" x2="1260.5" y2="700.5" stroke-width="3"/>
<use xlink:href="#b7" stroke="#868686"/>
<line id="b8" x1="141.5" y1="606.5" x2="1260.5" y2="606.5" stroke-width="3"/>
<use xlink:href="#b8" stroke="#868686"/>
<line id="b9" x1="141.5" y1="512.5" x2="1260.5" y2="512.5" stroke-width="3"/>
<use xlink:href="#b9" stroke="#868686"/>
<line id="b10" x1="141.5" y1="418.5" x2="1260.5" y2="418.5" stroke-width="3"/>
<use xlink:href="#b10" stroke="#868686"/>
<line id="b11" x1="141.5" y1="325.5" x2="1260.5" y2="325.5" stroke-width="3"/>
<use xlink:href="#b11" stroke="#868686"/>
<line id="b12" x1="141.5" y1="231.5" x2="1260.5" y2="231.5" stroke-width="3"/>
<use xlink:href="#b12" stroke="#868686"/>
<line id="b13" x1="141.5" y1="137.5" x2="1260.5" y2="137.5" stroke-width="3"/>
<use xlink:href="#b13" stroke="#868686"/>
<line id="b14" x1="141.5" y1="43.5" x2="1260.5" y2="43.5" stroke-width="3"/>
<use xlink:href="#b14" stroke="#868686"/>
<g clip-path="url(#b15)">
<rect id="b16" x="152" y="756" width="14" height="39"/>
<use xlink:href="#b16" fill="#A5A5A5"/>
<rect id="b17" x="188" y="715" width="14" height="80"/>
<use xlink:href="#b17" fill="#A5A5A5"/>
<rect id="b18" x="224" y="682" width="14" height="113"/>
<use xlink:href="#b18" fill="#A5A5A5"/>
<rect id="b19" x="260" y="644" width="14" height="151"/>
<use xlink:href="#b19" fill="#A5A5A5"/>
<rect id="b20" x="296" y="620" width="14" height="175"/>
<use xlink:href="#b20" fill="#A5A5A5"/>
<rect id="b21" x="333" y="586" width="14" height="209"/>
<use xlink:href="#b21" fill="#A5A5A5"/>
<rect id="b22" x="369" y="565" width="14" height="230"/>
<use xlink:href="#b22" fill="#A5A5A5"/>
<rect id="b23" x="405" y="545" width="14" height="250"/>
<use xlink:href="#b23" fill="#A5A5A5"/>
<rect id="b24" x="441" y="526" width="14" height="269"/>
<use xlink:href="#b24" fill="#A5A5A5"/>
<rect id="b25" x="477" y="506" width="14" height="289"/>
<use xlink:href="#b25" fill="#A5A5A5"/>
<rect id="b26" x="513" y="487" width="14" height="308"/>
<use xlink:href="#b26" fill="#A5A5A5"/>
<rect id="b27" x="549" y="474" width="14" height="321"/>
<use xlink:href="#b27" fill="#A5A5A5"/>
<rect id="b28" x="585" y="454" width="14" height="341"/>
<use xlink:href="#b28" fill="#A5A5A5"/>
<rect id="b29" x="621" y="434" width="14" height="361"/>
<use xlink:href="#b29" fill="#A5A5A5"/>
<rect id="b30" x="657" y="413" width="14" height="382"/>
<use xlink:href="#b30" fill="#A5A5A5"/>
<rect id="b31" x="693" y="393" width="14" height="402"/>
<use xlink:href="#b31" fill="#A5A5A5"/>
<rect id="b32" x="730" y="369" width="14" height="426"/>
<use xlink:href="#b32" fill="#A5A5A5"/>
<rect id="b33" x="766" y="351" width="14" height="444"/>
<use xlink:href="#b33" fill="#A5A5A5"/>
<rect id="b34" x="802" y="337" width="14" height="458"/>
<use xlink:href="#b34" fill="#A5A5A5"/>
<rect id="b35" x="838" y="317" width="14" height="478"/>
<use xlink:href="#b35" fill="#A5A5A5"/>
<rect id="b36" x="874" y="293" width="14" height="502"/>
<use xlink:href="#b36" fill="#A5A5A5"/>
<rect id="b37" x="910" y="272" width="14" height="523"/>
<use xlink:href="#b37" fill="#A5A5A5"/>
<rect id="b38" x="946" y="245" width="14" height="550"/>
<use xlink:href="#b38" fill="#A5A5A5"/>
<rect id="b39" x="982" y="224" width="14" height="571"/>
<use xlink:href="#b39" fill="#A5A5A5"/>
<rect id="b40" x="1018" y="204" width="14" height="591"/>
<use xlink:href="#b40" fill="#A5A5A5"/>
<rect id="b41" x="1054" y="190" width="14" height="605"/>
<use xlink:href="#b41" fill="#A5A5A5"/>
<rect id="b42" x="1091" y="166" width="14" height="629"/>
<use xlink:href="#b42" fill="#A5A5A5"/>
<rect id="b43" x="1127" y="142" width="14" height="653"/>
<use xlink:href="#b43" fill="#A5A5A5"/>
<rect id="b44" x="1163" y="122" width="14" height="673"/>
<use xlink:href="#b44" fill="#A5A5A5"/>
<rect id="b45" x="1199" y="101" width="14" height="694"/>
<use xlink:href="#b45" fill="#A5A5A5"/>
<rect id="b46" x="1235" y="80" width="14" height="715"/>
<use xlink:href="#b46" fill="#A5A5A5"/>
<polyline id="b47" stroke-width="9" points="159.548 794.5 195.645 775.256 231.742 767.558 267.839 780.606 303.935 771.407 340.032 779.104 376.129 765.211 412.226 779.104 448.323 767.558 484.419 771.407 520.516 769.06 556.613 779.104 592.71 786.802 628.806 765.211 664.903 771.407 701 767.558 737.097 769.06 773.194 778.26 809.29 768.59 845.387 771.407 881.484 769.06 917.581 775.256 953.677 772.909 989.774 764.742 1025.871 765.211 1061.968 771.407 1098.065 779.104 1134.161 766.713 1170.258 772.909 1206.355 775.256 1242.452 767.558"/>
<use xlink:href="#b47" stroke="#ED7D31"/>
<polyline id="b48" stroke-width="9" points="159.548 794.5 195.645 775.256 231.742 748.314 267.839 734.42 303.935 711.327 340.032 695.931 376.129 666.642 412.226 651.247 448.323 624.305 484.419 601.211 520.516 575.771 556.613 560.376 592.71 552.678 628.806 523.389 664.903 500.296 701 473.354 737.097 447.914 773.194 431.673 809.29 405.764 845.387 382.67 881.484 357.23 917.581 337.986 953.677 316.395 989.774 286.636 1025.871 257.347 1061.968 234.254 1098.065 218.858 1134.161 191.072 1170.258 169.48 1206.355 150.236 1242.452 123.294"/>
<use xlink:href="#b48" stroke="#4472C4"/>
</g>
<line id="b49" x1="1260.5" y1="794.5" x2="1260.5" y2="43.5" stroke-width="3"/>
<use xlink:href="#b49" stroke="#868686"/>
<line id="b50" x1="1261.5" y1="794.5" x2="1272.5" y2="794.5" stroke-width="3"/>
<use xlink:href="#b50" stroke="#868686"/>
<line id="b51" x1="1261.5" y1="711.5" x2="1272.5" y2="711.5" stroke-width="3"/>
<use xlink:href="#b51" stroke="#868686"/>
<line id="b52" x1="1261.5" y1="627.5" x2="1272.5" y2="627.5" stroke-width="3"/>
<use xlink:href="#b52" stroke="#868686"/>
<line id="b53" x1="1261.5" y1="544.5" x2="1272.5" y2="544.5" stroke-width="3"/>
<use xlink:href="#b53" stroke="#868686"/>
<line id="b54" x1="1261.5" y1="460.5" x2="1272.5" y2="460.5" stroke-width="3"/>
<use xlink:href="#b54" stroke="#868686"/>
<line id="b55" x1="1261.5" y1="377.5" x2="1272.5" y2="377.5" stroke-width="3"/>
<use xlink:href="#b55" stroke="#868686"/>
<line id="b56" x1="1261.5" y1="293.5" x2="1272.5" y2="293.5" stroke-width="3"/>
<use xlink:href="#b56" stroke="#868686"/>
<line id="b57" x1="1261.5" y1="210.5" x2="1272.5" y2="210.5" stroke-width="3"/>
<use xlink:href="#b57" stroke="#868686"/>
<line id="b58" x1="1261.5" y1="126.5" x2="1272.5" y2="126.5" stroke-width="3"/>
<use xlink:href="#b58" stroke="#868686"/>
<line id="b59" x1="1261.5" y1="43.5" x2="1272.5" y2="43.5" stroke-width="3"/>
<use xlink:href="#b59" stroke="#868686"/>
<text id="b60" style="font-family:'Calibri';font-size:42px;" x="1306" y="810">0</text>
<use xlink:href="#b60" fill="#000000"/>
<text id="b61" style="font-family:'Calibri';font-size:42px;" x="1306" y="727">100</text>
<use xlink:href="#b61" fill="#000000"/>
<text id="b62" style="font-family:'Calibri';font-size:42px;" x="1306" y="643">200</text>
<use xlink:href="#b62" fill="#000000"/>
<text id="b63" style="font-family:'Calibri';font-size:42px;" x="1306" y="560">300</text>
<use xlink:href="#b63" fill="#000000"/>
<text id="b64" style="font-family:'Calibri';font-size:42px;" x="1306" y="476">400</text>
<use xlink:href="#b64" fill="#000000"/>
<text id="b65" style="font-family:'Calibri';font-size:42px;" x="1306" y="393">500</text>
<use xlink:href="#b65" fill="#000000"/>
<text id="b66" style="font-family:'Calibri';font-size:42px;" x="1306" y="309">600</text>
<use xlink:href="#b66" fill="#000000"/>
<text id="b67" style="font-family:'Calibri';font-size:42px;" x="1306" y="226">700</text>
<use xlink:href="#b67" fill="#000000"/>
<text id="b68" style="font-family:'Calibri';font-size:42px;" x="1306" y="142">800</text>
<use xlink:href="#b68" fill="#000000"/>
<text id="b69" style="font-family:'Calibri';font-size:42px;" x="1306" y="59">900</text>
<use xlink:href="#b69" fill="#000000"/>
<line id="b70" x1="141.5" y1="794.5" x2="141.5" y2="43.5" stroke-width="3"/>
<use xlink:href="#b70" stroke="#868686"/>
<line id="b71" x1="129.5" y1="794.5" x2="140.5" y2="794.5" stroke-width="3"/>
<use xlink:href="#b71" stroke="#868686"/>
<line id="b72" x1="129.5" y1="700.5" x2="140.5" y2="700.5" stroke-width="3"/>
<use xlink:href="#b72" stroke="#868686"/>
<line id="b73" x1="129.5" y1="606.5" x2="140.5" y2="606.5" stroke-width="3"/>
<use xlink:href="#b73" stroke="#868686"/>
<line id="b74" x1="129.5" y1="512.5" x2="140.5" y2="512.5" stroke-width="3"/>
<use xlink:href="#b74" stroke="#868686"/>
<line id="b75" x1="129.5" y1="418.5" x2="140.5" y2="418.5" stroke-width="3"/>
<use xlink:href="#b75" stroke="#868686"/>
<line id="b76" x1="129.5" y1="325.5" x2="140.5" y2="325.5" stroke-width="3"/>
<use xlink:href="#b76" stroke="#868686"/>
<line id="b77" x1="129.5" y1="231.5" x2="140.5" y2="231.5" stroke-width="3"/>
<use xlink:href="#b77" stroke="#868686"/>
<line id="b78" x1="129.5" y1="137.5" x2="140.5" y2="137.5" stroke-width="3"/>
<use xlink:href="#b78" stroke="#868686"/>
<line id="b79" x1="129.5" y1="43.5" x2="140.5" y2="43.5" stroke-width="3"/>
<use xlink:href="#b79" stroke="#868686"/>
<text id="b80" style="font-family:'Calibri';font-size:42px;" x="76" y="810">0</text>
<use xlink:href="#b80" fill="#000000"/>
<text id="b81" style="font-family:'Calibri';font-size:42px;" x="34" y="716">100</text>
<use xlink:href="#b81" fill="#000000"/>
<text id="b82" style="font-family:'Calibri';font-size:42px;" x="34" y="622">200</text>
<use xlink:href="#b82" fill="#000000"/>
<text id="b83" style="font-family:'Calibri';font-size:42px;" x="34" y="528">300</text>
<use xlink:href="#b83" fill="#000000"/>
<text id="b84" style="font-family:'Calibri';font-size:42px;" x="34" y="434">400</text>
<use xlink:href="#b84" fill="#000000"/>
<text id="b85" style="font-family:'Calibri';font-size:42px;" x="34" y="341">500</text>
<use xlink:href="#b85" fill="#000000"/>
<text id="b86" style="font-family:'Calibri';font-size:42px;" x="34" y="247">600</text>
<use xlink:href="#b86" fill="#000000"/>
<text id="b87" style="font-family:'Calibri';font-size:42px;" x="34" y="153">700</text>
<use xlink:href="#b87" fill="#000000"/>
<text id="b88" style="font-family:'Calibri';font-size:42px;" x="34" y="59">800</text>
<use xlink:href="#b88" fill="#000000"/>
<line id="b89" x1="141.5" y1="794.5" x2="1260.5" y2="794.5" stroke-width="3"/>
<use xlink:href="#b89" stroke="#868686"/>
<line id="b90" x1="141.5" y1="806.5" x2="141.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b90" stroke="#868686"/>
<line id="b91" x1="177.5" y1="806.5" x2="177.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b91" stroke="#868686"/>
<line id="b92" x1="213.5" y1="806.5" x2="213.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b92" stroke="#868686"/>
<line id="b93" x1="249.5" y1="806.5" x2="249.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b93" stroke="#868686"/>
<line id="b94" x1="285.5" y1="806.5" x2="285.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b94" stroke="#868686"/>
<line id="b95" x1="321.5" y1="806.5" x2="321.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b95" stroke="#868686"/>
<line id="b96" x1="358.5" y1="806.5" x2="358.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b96" stroke="#868686"/>
<line id="b97" x1="394.5" y1="806.5" x2="394.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b97" stroke="#868686"/>
<line id="b98" x1="430.5" y1="806.5" x2="430.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b98" stroke="#868686"/>
<line id="b99" x1="466.5" y1="806.5" x2="466.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b99" stroke="#868686"/>
<line id="b100" x1="502.5" y1="806.5" x2="502.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b100" stroke="#868686"/>
<line id="b101" x1="538.5" y1="806.5" x2="538.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b101" stroke="#868686"/>
<line id="b102" x1="574.5" y1="806.5" x2="574.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b102" stroke="#868686"/>
<line id="b103" x1="610.5" y1="806.5" x2="610.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b103" stroke="#868686"/>
<line id="b104" x1="646.5" y1="806.5" x2="646.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b104" stroke="#868686"/>
<line id="b105" x1="682.5" y1="806.5" x2="682.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b105" stroke="#868686"/>
<line id="b106" x1="719.5" y1="806.5" x2="719.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b106" stroke="#868686"/>
<line id="b107" x1="755.5" y1="806.5" x2="755.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b107" stroke="#868686"/>
<line id="b108" x1="791.5" y1="806.5" x2="791.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b108" stroke="#868686"/>
<line id="b109" x1="827.5" y1="806.5" x2="827.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b109" stroke="#868686"/>
<line id="b110" x1="863.5" y1="806.5" x2="863.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b110" stroke="#868686"/>
<line id="b111" x1="899.5" y1="806.5" x2="899.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b111" stroke="#868686"/>
<line id="b112" x1="935.5" y1="806.5" x2="935.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b112" stroke="#868686"/>
<line id="b113" x1="971.5" y1="806.5" x2="971.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b113" stroke="#868686"/>
<line id="b114" x1="1007.5" y1="806.5" x2="1007.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b114" stroke="#868686"/>
<line id="b115" x1="1043.5" y1="806.5" x2="1043.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b115" stroke="#868686"/>
<line id="b116" x1="1080.5" y1="806.5" x2="1080.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b116" stroke="#868686"/>
<line id="b117" x1="1116.5" y1="806.5" x2="1116.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b117" stroke="#868686"/>
<line id="b118" x1="1152.5" y1="806.5" x2="1152.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b118" stroke="#868686"/>
<line id="b119" x1="1188.5" y1="806.5" x2="1188.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b119" stroke="#868686"/>
<line id="b120" x1="1224.5" y1="806.5" x2="1224.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b120" stroke="#868686"/>
<line id="b121" x1="1260.5" y1="806.5" x2="1260.5" y2="795.5" stroke-width="3"/>
<use xlink:href="#b121" stroke="#868686"/>
<text id="b122" style="font-family:'Calibri';font-size:42px;" x="150" y="858">0</text>
<use xlink:href="#b122" fill="#000000"/>
<text id="b123" style="font-family:'Calibri';font-size:42px;" x="143" y="911">1-</text>
<use xlink:href="#b123" fill="#000000"/>
<text id="b124" style="font-family:'Calibri';font-size:42px;" x="150" y="964">1</text>
<use xlink:href="#b124" fill="#000000"/>
<text id="b125" style="font-family:'Calibri';font-size:42px;" x="150" y="1017">0</text>
<use xlink:href="#b125" fill="#000000"/>
<text id="b126" style="font-family:'Calibri';font-size:42px;" x="186" y="858">0</text>
<use xlink:href="#b126" fill="#000000"/>
<text id="b127" style="font-family:'Calibri';font-size:42px;" x="179" y="911">2-</text>
<use xlink:href="#b127" fill="#000000"/>
<text id="b128" style="font-family:'Calibri';font-size:42px;" x="186" y="964">1</text>
<use xlink:href="#b128" fill="#000000"/>
<text id="b129" style="font-family:'Calibri';font-size:42px;" x="186" y="1017">0</text>
<use xlink:href="#b129" fill="#000000"/>
<text id="b130" style="font-family:'Calibri';font-size:42px;" x="222" y="858">0</text>
<use xlink:href="#b130" fill="#000000"/>
<text id="b131" style="font-family:'Calibri';font-size:42px;" x="215" y="911">3-</text>
<use xlink:href="#b131" fill="#000000"/>
<text id="b132" style="font-family:'Calibri';font-size:42px;" x="222" y="964">1</text>
<use xlink:href="#b132" fill="#000000"/>
<text id="b133" style="font-family:'Calibri';font-size:42px;" x="222" y="1017">0</text>
<use xlink:href="#b133" fill="#000000"/>
<text id="b134" style="font-family:'Calibri';font-size:42px;" x="258" y="858">0</text>
<use xlink:href="#b134" fill="#000000"/>
<text id="b135" style="font-family:'Calibri';font-size:42px;" x="251" y="911">4-</text>
<use xlink:href="#b135" fill="#000000"/>
<text id="b136" style="font-family:'Calibri';font-size:42px;" x="258" y="964">1</text>
<use xlink:href="#b136" fill="#000000"/>
<text id="b137" style="font-family:'Calibri';font-size:42px;" x="258" y="1017">0</text>
<use xlink:href="#b137" fill="#000000"/>
<text id="b138" style="font-family:'Calibri';font-size:42px;" x="294" y="858">0</text>
<use xlink:href="#b138" fill="#000000"/>
<text id="b139" style="font-family:'Calibri';font-size:42px;" x="287" y="911">5-</text>
<use xlink:href="#b139" fill="#000000"/>
<text id="b140" style="font-family:'Calibri';font-size:42px;" x="294" y="964">1</text>
<use xlink:href="#b140" fill="#000000"/>
<text id="b141" style="font-family:'Calibri';font-size:42px;" x="294" y="1017">0</text>
<use xlink:href="#b141" fill="#000000"/>
<text id="b142" style="font-family:'Calibri';font-size:42px;" x="331" y="858">0</text>
<use xlink:href="#b142" fill="#000000"/>
<text id="b143" style="font-family:'Calibri';font-size:42px;" x="324" y="911">6-</text>
<use xlink:href="#b143" fill="#000000"/>
<text id="b144" style="font-family:'Calibri';font-size:42px;" x="331" y="964">1</text>
<use xlink:href="#b144" fill="#000000"/>
<text id="b145" style="font-family:'Calibri';font-size:42px;" x="331" y="1017">0</text>
<use xlink:href="#b145" fill="#000000"/>
<text id="b146" style="font-family:'Calibri';font-size:42px;" x="367" y="858">0</text>
<use xlink:href="#b146" fill="#000000"/>
<text id="b147" style="font-family:'Calibri';font-size:42px;" x="360" y="911">7-</text>
<use xlink:href="#b147" fill="#000000"/>
<text id="b148" style="font-family:'Calibri';font-size:42px;" x="367" y="964">1</text>
<use xlink:href="#b148" fill="#000000"/>
<text id="b149" style="font-family:'Calibri';font-size:42px;" x="367" y="1017">0</text>
<use xlink:href="#b149" fill="#000000"/>
<text id="b150" style="font-family:'Calibri';font-size:42px;" x="403" y="858">0</text>
<use xlink:href="#b150" fill="#000000"/>
<text id="b151" style="font-family:'Calibri';font-size:42px;" x="396" y="911">8-</text>
<use xlink:href="#b151" fill="#000000"/>
<text id="b152" style="font-family:'Calibri';font-size:42px;" x="403" y="964">1</text>
<use xlink:href="#b152" fill="#000000"/>
<text id="b153" style="font-family:'Calibri';font-size:42px;" x="403" y="1017">0</text>
<use xlink:href="#b153" fill="#000000"/>
<text id="b154" style="font-family:'Calibri';font-size:42px;" x="439" y="858">0</text>
<use xlink:href="#b154" fill="#000000"/>
<text id="b155" style="font-family:'Calibri';font-size:42px;" x="432" y="911">9-</text>
<use xlink:href="#b155" fill="#000000"/>
<text id="b156" style="font-family:'Calibri';font-size:42px;" x="439" y="964">1</text>
<use xlink:href="#b156" fill="#000000"/>
<text id="b157" style="font-family:'Calibri';font-size:42px;" x="439" y="1017">0</text>
<use xlink:href="#b157" fill="#000000"/>
<text id="b158" style="font-family:'Calibri';font-size:42px;" x="475" y="858">1</text>
<use xlink:href="#b158" fill="#000000"/>
<text id="b159" style="font-family:'Calibri';font-size:42px;" x="468" y="911">0-</text>
<use xlink:href="#b159" fill="#000000"/>
<text id="b160" style="font-family:'Calibri';font-size:42px;" x="475" y="964">1</text>
<use xlink:href="#b160" fill="#000000"/>
<text id="b161" style="font-family:'Calibri';font-size:42px;" x="475" y="1017">0</text>
<use xlink:href="#b161" fill="#000000"/>
<text id="b162" style="font-family:'Calibri';font-size:42px;" x="511" y="858">1</text>
<use xlink:href="#b162" fill="#000000"/>
<text id="b163" style="font-family:'Calibri';font-size:42px;" x="504" y="911">1-</text>
<use xlink:href="#b163" fill="#000000"/>
<text id="b164" style="font-family:'Calibri';font-size:42px;" x="511" y="964">1</text>
<use xlink:href="#b164" fill="#000000"/>
<text id="b165" style="font-family:'Calibri';font-size:42px;" x="511" y="1017">0</text>
<use xlink:href="#b165" fill="#000000"/>
<text id="b166" style="font-family:'Calibri';font-size:42px;" x="547" y="858">1</text>
<use xlink:href="#b166" fill="#000000"/>
<text id="b167" style="font-family:'Calibri';font-size:42px;" x="540" y="911">2-</text>
<use xlink:href="#b167" fill="#000000"/>
<text id="b168" style="font-family:'Calibri';font-size:42px;" x="547" y="964">1</text>
<use xlink:href="#b168" fill="#000000"/>
<text id="b169" style="font-family:'Calibri';font-size:42px;" x="547" y="1017">0</text>
<use xlink:href="#b169" fill="#000000"/>
<text id="b170" style="font-family:'Calibri';font-size:42px;" x="583" y="858">1</text>
<use xlink:href="#b170" fill="#000000"/>
<text id="b171" style="font-family:'Calibri';font-size:42px;" x="576" y="911">3-</text>
<use xlink:href="#b171" fill="#000000"/>
<text id="b172" style="font-family:'Calibri';font-size:42px;" x="583" y="964">1</text>
<use xlink:href="#b172" fill="#000000"/>
<text id="b173" style="font-family:'Calibri';font-size:42px;" x="583" y="1017">0</text>
<use xlink:href="#b173" fill="#000000"/>
<text id="b174" style="font-family:'Calibri';font-size:42px;" x="619" y="858">1</text>
<use xlink:href="#b174" fill="#000000"/>
<text id="b175" style="font-family:'Calibri';font-size:42px;" x="612" y="911">4-</text>
<use xlink:href="#b175" fill="#000000"/>
<text id="b176" style="font-family:'Calibri';font-size:42px;" x="619" y="964">1</text>
<use xlink:href="#b176" fill="#000000"/>
<text id="b177" style="font-family:'Calibri';font-size:42px;" x="619" y="1017">0</text>
<use xlink:href="#b177" fill="#000000"/>
<text id="b178" style="font-family:'Calibri';font-size:42px;" x="655" y="858">1</text>
<use xlink:href="#b178" fill="#000000"/>
<text id="b179" style="font-family:'Calibri';font-size:42px;" x="648" y="911">5-</text>
<use xlink:href="#b179" fill="#000000"/>
<text id="b180" style="font-family:'Calibri';font-size:42px;" x="655" y="964">1</text>
<use xlink:href="#b180" fill="#000000"/>
<text id="b181" style="font-family:'Calibri';font-size:42px;" x="655" y="1017">0</text>
<use xlink:href="#b181" fill="#000000"/>
<text id="b182" style="font-family:'Calibri';font-size:42px;" x="692" y="858">1</text>
<use xlink:href="#b182" fill="#000000"/>
<text id="b183" style="font-family:'Calibri';font-size:42px;" x="685" y="911">6-</text>
<use xlink:href="#b183" fill="#000000"/>
<text id="b184" style="font-family:'Calibri';font-size:42px;" x="692" y="964">1</text>
<use xlink:href="#b184" fill="#000000"/>
<text id="b185" style="font-family:'Calibri';font-size:42px;" x="692" y="1017">0</text>
<use xlink:href="#b185" fill="#000000"/>
<text id="b186" style="font-family:'Calibri';font-size:42px;" x="728" y="858">1</text>
<use xlink:href="#b186" fill="#000000"/>
<text id="b187" style="font-family:'Calibri';font-size:42px;" x="721" y="911">7-</text>
<use xlink:href="#b187" fill="#000000"/>
<text id="b188" style="font-family:'Calibri';font-size:42px;" x="728" y="964">1</text>
<use xlink:href="#b188" fill="#000000"/>
<text id="b189" style="font-family:'Calibri';font-size:42px;" x="728" y="1017">0</text>
<use xlink:href="#b189" fill="#000000"/>
<text id="b190" style="font-family:'Calibri';font-size:42px;" x="764" y="858">1</text>
<use xlink:href="#b190" fill="#000000"/>
<text id="b191" style="font-family:'Calibri';font-size:42px;" x="757" y="911">8-</text>
<use xlink:href="#b191" fill="#000000"/>
<text id="b192" style="font-family:'Calibri';font-size:42px;" x="764" y="964">1</text>
<use xlink:href="#b192" fill="#000000"/>
<text id="b193" style="font-family:'Calibri';font-size:42px;" x="764" y="1017">0</text>
<use xlink:href="#b193" fill="#000000"/>
<text id="b194" style="font-family:'Calibri';font-size:42px;" x="800" y="858">1</text>
<use xlink:href="#b194" fill="#000000"/>
<text id="b195" style="font-family:'Calibri';font-size:42px;" x="793" y="911">9-</text>
<use xlink:href="#b195" fill="#000000"/>
<text id="b196" style="font-family:'Calibri';font-size:42px;" x="800" y="964">1</text>
<use xlink:href="#b196" fill="#000000"/>
<text id="b197" style="font-family:'Calibri';font-size:42px;" x="800" y="1017">0</text>
<use xlink:href="#b197" fill="#000000"/>
<text id="b198" style="font-family:'Calibri';font-size:42px;" x="836" y="858">2</text>
<use xlink:href="#b198" fill="#000000"/>
<text id="b199" style="font-family:'Calibri';font-size:42px;" x="829" y="911">0-</text>
<use xlink:href="#b199" fill="#000000"/>
<text id="b200" style="font-family:'Calibri';font-size:42px;" x="836" y="964">1</text>
<use xlink:href="#b200" fill="#000000"/>
<text id="b201" style="font-family:'Calibri';font-size:42px;" x="836" y="1017">0</text>
<use xlink:href="#b201" fill="#000000"/>
<text id="b202" style="font-family:'Calibri';font-size:42px;" x="872" y="858">2</text>
<use xlink:href="#b202" fill="#000000"/>
<text id="b203" style="font-family:'Calibri';font-size:42px;" x="865" y="911">1-</text>
<use xlink:href="#b203" fill="#000000"/>
<text id="b204" style="font-family:'Calibri';font-size:42px;" x="872" y="964">1</text>
<use xlink:href="#b204" fill="#000000"/>
<text id="b205" style="font-family:'Calibri';font-size:42px;" x="872" y="1017">0</text>
<use xlink:href="#b205" fill="#000000"/>
<text id="b206" style="font-family:'Calibri';font-size:42px;" x="908" y="858">2</text>
<use xlink:href="#b206" fill="#000000"/>
<text id="b207" style="font-family:'Calibri';font-size:42px;" x="901" y="911">2-</text>
<use xlink:href="#b207" fill="#000000"/>
<text id="b208" style="font-family:'Calibri';font-size:42px;" x="908" y="964">1</text>
<use xlink:href="#b208" fill="#000000"/>
<text id="b209" style="font-family:'Calibri';font-size:42px;" x="908" y="1017">0</text>
<use xlink:href="#b209" fill="#000000"/>
<text id="b210" style="font-family:'Calibri';font-size:42px;" x="944" y="858">2</text>
<use xlink:href="#b210" fill="#000000"/>
<text id="b211" style="font-family:'Calibri';font-size:42px;" x="937" y="911">3-</text>
<use xlink:href="#b211" fill="#000000"/>
<text id="b212" style="font-family:'Calibri';font-size:42px;" x="944" y="964">1</text>
<use xlink:href="#b212" fill="#000000"/>
<text id="b213" style="font-family:'Calibri';font-size:42px;" x="944" y="1017">0</text>
<use xlink:href="#b213" fill="#000000"/>
<text id="b214" style="font-family:'Calibri';font-size:42px;" x="980" y="858">2</text>
<use xlink:href="#b214" fill="#000000"/>
<text id="b215" style="font-family:'Calibri';font-size:42px;" x="973" y="911">4-</text>
<use xlink:href="#b215" fill="#000000"/>
<text id="b216" style="font-family:'Calibri';font-size:42px;" x="980" y="964">1</text>
<use xlink:href="#b216" fill="#000000"/>
<text id="b217" style="font-family:'Calibri';font-size:42px;" x="980" y="1017">0</text>
<use xlink:href="#b217" fill="#000000"/>
<text id="b218" style="font-family:'Calibri';font-size:42px;" x="1016" y="858">2</text>
<use xlink:href="#b218" fill="#000000"/>
<text id="b219" style="font-family:'Calibri';font-size:42px;" x="1009" y="911">5-</text>
<use xlink:href="#b219" fill="#000000"/>
<text id="b220" style="font-family:'Calibri';font-size:42px;" x="1016" y="964">1</text>
<use xlink:href="#b220" fill="#000000"/>
<text id="b221" style="font-family:'Calibri';font-size:42px;" x="1016" y="1017">0</text>
<use xlink:href="#b221" fill="#000000"/>
<text id="b222" style="font-family:'Calibri';font-size:42px;" x="1052" y="858">2</text>
<use xlink:href="#b222" fill="#000000"/>
<text id="b223" style="font-family:'Calibri';font-size:42px;" x="1045" y="911">6-</text>
<use xlink:href="#b223" fill="#000000"/>
<text id="b224" style="font-family:'Calibri';font-size:42px;" x="1052" y="964">1</text>
<use xlink:href="#b224" fill="#000000"/>
<text id="b225" style="font-family:'Calibri';font-size:42px;" x="1052" y="1017">0</text>
<use xlink:href="#b225" fill="#000000"/>
<text id="b226" style="font-family:'Calibri';font-size:42px;" x="1089" y="858">2</text>
<use xlink:href="#b226" fill="#000000"/>
<text id="b227" style="font-family:'Calibri';font-size:42px;" x="1082" y="911">7-</text>
<use xlink:href="#b227" fill="#000000"/>
<text id="b228" style="font-family:'Calibri';font-size:42px;" x="1089" y="964">1</text>
<use xlink:href="#b228" fill="#000000"/>
<text id="b229" style="font-family:'Calibri';font-size:42px;" x="1089" y="1017">0</text>
<use xlink:href="#b229" fill="#000000"/>
<text id="b230" style="font-family:'Calibri';font-size:42px;" x="1125" y="858">2</text>
<use xlink:href="#b230" fill="#000000"/>
<text id="b231" style="font-family:'Calibri';font-size:42px;" x="1118" y="911">8-</text>
<use xlink:href="#b231" fill="#000000"/>
<text id="b232" style="font-family:'Calibri';font-size:42px;" x="1125" y="964">1</text>
<use xlink:href="#b232" fill="#000000"/>
<text id="b233" style="font-family:'Calibri';font-size:42px;" x="1125" y="1017">0</text>
<use xlink:href="#b233" fill="#000000"/>
<text id="b234" style="font-family:'Calibri';font-size:42px;" x="1161" y="858">2</text>
<use xlink:href="#b234" fill="#000000"/>
<text id="b235" style="font-family:'Calibri';font-size:42px;" x="1154" y="911">9-</text>
<use xlink:href="#b235" fill="#000000"/>
<text id="b236" style="font-family:'Calibri';font-size:42px;" x="1161" y="964">1</text>
<use xlink:href="#b236" fill="#000000"/>
<text id="b237" style="font-family:'Calibri';font-size:42px;" x="1161" y="1017">0</text>
<use xlink:href="#b237" fill="#000000"/>
<text id="b238" style="font-family:'Calibri';font-size:42px;" x="1197" y="858">3</text>
<use xlink:href="#b238" fill="#000000"/>
<text id="b239" style="font-family:'Calibri';font-size:42px;" x="1190" y="911">0-</text>
<use xlink:href="#b239" fill="#000000"/>
<text id="b240" style="font-family:'Calibri';font-size:42px;" x="1197" y="964">1</text>
<use xlink:href="#b240" fill="#000000"/>
<text id="b241" style="font-family:'Calibri';font-size:42px;" x="1197" y="1017">0</text>
<use xlink:href="#b241" fill="#000000"/>
<text id="b242" style="font-family:'Calibri';font-size:42px;" x="1233" y="858">3</text>
<use xlink:href="#b242" fill="#000000"/>
<text id="b243" style="font-family:'Calibri';font-size:42px;" x="1226" y="911">1-</text>
<use xlink:href="#b243" fill="#000000"/>
<text id="b244" style="font-family:'Calibri';font-size:42px;" x="1233" y="964">1</text>
<use xlink:href="#b244" fill="#000000"/>
<text id="b245" style="font-family:'Calibri';font-size:42px;" x="1233" y="1017">0</text>
<use xlink:href="#b245" fill="#000000"/>
<rect id="b246" x="1419" y="441" width="91" height="4"/>
<use xlink:href="#b246" fill="#A5A5A5"/>
<text id="b247" style="font-family:'Calibri';font-size:41px;" x="1526" y="458">Target MTD</text>
<use xlink:href="#b247" fill="#000000"/>
<rect id="b248" x="1419" y="520" width="91" height="4"/>
<use xlink:href="#b248" fill="#4472C4"/>
<text id="b249" style="font-family:'Calibri';font-size:41px;" x="1526" y="537">Actuals MTD</text>
<use xlink:href="#b249" fill="#000000"/>
<rect id="b250" x="1419" y="599" width="91" height="4"/>
<use xlink:href="#b250" fill="#ED7D31"/>
<text id="b251" style="font-family:'Calibri';font-size:41px;" x="1526" y="616">Actuals Day</text>
<use xlink:href="#b251" fill="#000000"/>
<text id="b252" style="font-family:'Calibri';font-size:42px;" x="-9990" y="-9960">0</text>
<use xlink:href="#b252" fill="#000000"/>
<text id="b253" style="font-family:'Calibri';font-size:42px;" x="-9990" y="-9907">1-</text>
<use xlink:href="#b253" fill="#000000"/>
<text id="b254" style="font-family:'Calibri';font-size:42px;" x="-9990" y="-9854">1</text>
<use xlink:href="#b254" fill="#000000"/>
<text id="b255" style="font-family:'Calibri';font-size:42px;" x="-9990" y="-9801">0</text>
<use xlink:href="#b255" fill="#000000"/>
<path id="b256" stroke-linecap="butt" d="M0.5,1052.5 L0.5,0.5 L1802.5,0.5 L1802.5,1052.5 L0.5,1052.5 M2.5,1050.5 L2.5,2.5 L1800.5,2.5 L1800.5,1050.5 L2.5,1050.5 Z"/>
<use xlink:href="#b256" fill="#868686"/>
</g>
</svg>
</b></span></p>
</div></body>
</html>
|
| |
| Re: How can I make the legend match the line/bar type |
| Posted by Peter Kwan on Mar-04-2021 02:13 |
|
Hi David,
I can now see the cause of the strange features of the chart. In your system, are the charts generated as SVG and embedded in a web page and then viewed with a browser?
The file you have attached is not itself the SVG generated by ChartDirector, It is an HTML file which contains the SVG. HTML is also a programming language and it can modify the output. In particular, it resizes the SVG with the code:
#container {
width:1085px;
margin:0px auto;
}
The natural size of the SVG generated by ChartDirector is 1803 x 1053, but the browser resize it to 1085, so everything gets smaller. If you include a custom scatter symbol to the chart, it will also be smaller due to browser resizing.
HTML and SVG are high level human readable language. The browser renders the HTML and SVG to into a web page. I tried to view the output using Chrome, and the bars are all of the same width. I tried again with Edge and IE, and the bars are of different widths. This is not surprise because every browser can render the same HTML/SVG differently and can create distortions.
I have attached the image rendered by the Chrome browser. I found that the legend icons are in fact the same size. In one of your earlier image it shows the icons are of different size. I suspect it is due to the distortion caused by the browser resizing. When the image is resized, some coordinates become fractional numbers. Some browsers may snap them to integral coordinates, and this causes distortions.
From the SVG code, I see that the icons are box icons 91 x 4 pixels in size. (The box are wide but thin, so it looks like a line.) If the icons are generated by the LineLayer, it should be line icons with a line width of 9 pixels. (The SVG shows that the natural width of the line is 9 pixels.)
I suspect all of the legend entries are not generated by the visible bar and line layers. Some other code can be generating the legend icons. Two common ways to generate legend icons are to use LegendBox.addKey, or to add a dummy layer (such as a dummy line or bar or other layer) with no data. The no data layer is not visible but it can still populate the legend box.
I see that you have some code configure the LegendBox. Note that the sequence of the code is important. If some code attempts to obtain the legend box size (eg. it wants to determine where to best position the legend box), the legend box would be frozen and may not be modify afterwards. It is because the legend box must know the font and icon size to determine its own size. So getting the legend box size implies you would not do anything that can change the legend box. Any code that changes the legend box must occur before the legend is frozen.
If you can write code to modify the LegendBox (such as to call setKeySize), you should be able to add some more code like:
double[] dummyData = { 100, 500, 200, 900, 300, 400 };
chart.addLineLayer(dummyData, 0x00ffff, "QPRS");
chart.getLegend().addKey("XYZW", 0xff0000);
chart.getLegend().setBackground(0xcccccc, 0xff8800);
chart.setBackground(0xffff99);
The objective is to apply some visible change, so you can see what is working and what is not.
Regards
Peter Kwan
|
| Re: How can I make the legend match the line/bar type |
| Posted by David Thielen on Mar-07-2021 01:40 |
|
Hi Peter;
The above SVG is created by ChartDirector with no pre-processing. But I have written the png & svg directly as you asked and they are attached.
I think the problem is that the bar chart legend text is set with chart.getLegend().addKey(keyOn.title, keyOn.color); while the line layers are not explicitly set and therefor are pulled from the series title in the line layer.
However, if I comment out the addKey(), then I do not get that key. How is it that it does not pull from the bar chart layer data for the legend text? I don't see any way to remove a legend entry auto populated by a layer.
??? - thanks - dave
|
| Re: How can I make the legend match the line/bar type |
| Posted by David Thielen on Mar-07-2021 01:50 |
|
Hi again;
Ok, I found where it was clearing the legend entry. It had the call firstBarLayer.setLegend(Chart.NoLegend); on the first bar layer. No idea why. But I commented that out and commented out the addKey() and it populates the legend properly.
But still uses a line icon for the bar layer.
??? - dave
|
| Re: How can I make the legend match the line/bar type |
| Posted by Peter Kwan on Mar-09-2021 00:19 |
|
Hi David,
From the SVG, I think the icons are not line icons, but rectangular icons. It is just the rectangle is configured to be 91 x 4 pixels in size, so it is very thin and looks like a line.
My speculation is that somewhere in the charting code, it calls "myLegendBox.setKeySize(91. 4);". It does not call addLineStyleKey at all. As a result, the legend box does not show line style. (You can see that the line thickness in the legend box does not match the actual lines). Instead, the legend box displays rectangular symbols 91 x 4 in size for everything.
In one of your earlier post you mentioned that you have tried to call addLineStyleKey:
https://www.chartdir.com/forum/download_thread.php?site=chartdir&bn=chartdir_support&thread=1614023196#N1614446709
You mentioned after calling the addLineStyleKey, the bar icon is thinner than the line icon. My guess is that after your code, the line icons are really lines, and it is 9 pixel thick, matching the lines in the chart. It is therefore thicker than the bar icon, which is a rectangle 91 x 4 pixels in size.
In the above post, your code calls "lb.setKeySize(33, -1, -1);" but it seems to have no effect. My guess is that after running your code, your charting code continue to run, and later it calls setKeySize(91, 4), overwriting your earlier key size settings.
To test if the above is the reason, I suggest you can immediately output the chart as PNG and SVG images, before letting the code continue to run. My suggested change is:
// Your existing line
lb.setKeySize(33, -1, -1);
// Add a test key to confirm that your code is actually being used and the legend box
// can still be updated
lb.addKey("XYZW", 0xff6600);
// Add another Text to confirm that your code is actually being used
chart.addText(0, 0, "Test Test", "arialbd.ttf", 50, 0x000000);
// Output the chart immediately without running further code
chart.makeChart("c:/path/to/aaaa.png");
chart.makeChart("c:/path/to/aaaa.svg");
The above can confirm if the setKeySize(33, -1, -1) has any effect. If the setKeySize works, but in your final chart, the key size is different, it is quite possible there is another setKeySize in the charting code that change it back to 91 x 4.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(David Thielen)