[SOLVED]Line Graph -- Fill Color of markers appears tied to color of connecting lines
I have a requirement to have the first and last markers on a graph in red, and the line and markers between them in black. I have figured out how to make the first marker red, but when I make it red the line between first and second marker turns red along with it.
Is there a way to color the two separately? This is the code I'm using to make the first marker red --
The first patch makes everything black. The second patch makes marker one red. It makes the line following it red as well, bound to the setBorderColor function apparently.
At the moment I'm attempting to set the border width to zero, but that's not taking. Has anyone done this before?This message has been edited. Last edited by: FP Mod Chuck,
July 01, 2019, 03:10 PM
Hallway
Can you duplicate the graph with the CAR file and post that complete code. This helps us so we can reproduce what is happening on our end and get a better understanding of what you are seeing.
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 01, 2019, 04:42 PM
John_Edwards
Code where I'm working is marked as "Code of Interest" down below --
GRAPH FILE GGSALES
SUM UNITS
BY DATE
WHERE CATEGORY EQ 'Coffee'
WHERE RECORDLIMIT EQ 7
-*-SET &IMG= 'C:\ibi\WebFOCUS81\ibi_html\images\sparklines\6_WK_BRANCH_SPARK_' | &UNIT_NO_SPACE || '_ALL_SVCS_WAIT_TIME.png';
-*-TYPE &IMG ;
-*-SET &ECHO=ALL;
-*ON GRAPH SAVE AS &IMG FORMAT PNG
ON GRAPH PCHOLD FORMAT PNG
-*-SET &ECHO=OFF;
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET EMPTYREPORT ON
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET HAXIS 75
ON GRAPH SET VAXIS 50
ON GRAPH SET VAUTO ON
ON GRAPH SET VMIN 0
ON GRAPH SET VMAX 80
ON GRAPH SET UNITS PIXELS
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET GRAPHSTYLE *
setTemplateFile("");
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDepthRadius(0);
setUseSeriesShapes(true);
setMarkerSizeDefault(100);
setTransparentBorderColor(getChartBackground(),true);
setPlace(true);
setMarkerDisplay(true);
setSmoothLines(false);
setLineWidthAllSeries(1);
setSeriesLineWidthDefault(1);
setTextString(getTitle(),"");
setTextString(getO1Title(),"");
setDisplay(getO1Label(),false);
setTextString(getY1Title(),"");
setDisplay(getY1Label(),false);
setFillColor(getChartBackground(),new Color(255,255,255));
setFillColor(getFrame(),new Color(255,255,255));
setDisplay(getO1MajorGrid(),false);
setDisplay(getY1MajorGrid(),false);
setBorderColor(getO1MajorGrid(),new Color(128,255,255));
setBorderColor(getO1MinorGrid(),new Color(128,255,255));
setShadowColor(getFrame(),new Color(192,192,192));
setBorderColor(getFrame(),new Color(255,255,255));
setBorderColor(getY1MajorGrid(),new Color(255,255,255));
setBorderColor(getY1MajorTick(),new Color(255,255,255));
setBorderColor(getY1MinorGrid(),new Color(255,255,255));
setBorderColor(getY1MinorTick(),new Color(255,255,255));
setBorderColor(getO1MajorTick(),new Color(255,255,255));
setBorderWidth(getSeries(0),0);
setBorderColor(getSeries(0),new Color(0,0,0));
setSeriesFillColor(getSeries(0),new Color(0,0,0));
-*********************
-* Code of Interest:
setExceptionalRiser(0,0);
setFillType(getExceptionalRiser(0,0),1);
setFillColor(getExceptionalRiser(0,0),new Color(255,0,0));
setBorderColor(getExceptionalRiser(0,0),new Color(255,0,0));
setExceptionalRiser(0,5);
setFillType(getExceptionalRiser(0,5),1);
setFillColor(getExceptionalRiser(0,5),new Color(255,0,0));
setBorderColor(getExceptionalRiser(0,5),new Color(255,0,0));
-*********************
setTransparentFillColor(getFrame(),true);
setTransparentBorderColor(getFrame(),true);
setBorderColor(getO1AxisLine(),new Color(0,0,0));
setBorderColor(getY1ZeroLine(),new Color(0,0,0));
setDisplay(getY1AxisLine(),false);
setFillColor(getSeries(0),new Color(0,0,0));
setFillColor(getSeries(1),new Color(0,0,204));
setFillColor(getSeries(2),new Color(0,0,204));
setFillColor(getSeries(3),new Color(0,0,204));
setFillColor(getSeries(4),new Color(0,0,204));
setFillColor(getSeries(5),new Color(0,0,204));
setFillColor(getSeries(6),new Color(128,0,128));
ENDSTYLE
END
-RUN
If I set the border of the first point to black (0,0,0), the line goes black with it. If I set it to red, which it needs to be to see it correctly, the line goes red with it. I can't figure out how to set the border to zero pixels.
July 01, 2019, 09:06 PM
Hallway
Well, It's not a VLINE, and it's not a PNG format. However this gives you the marker formatting that you want:
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=OFF
SET ARGRAPHENGINE=JSCHART
SET EMPTYREPORT=ON
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
GRAPH FILE ibisamp/ggsales
SUM UNITS/D12
BY DATE/MDYY
WHERE RECORDLIMIT EQ 7;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 150
ON GRAPH SET VAXIS 100
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENInformationBuilders_Light1.sty,$
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
*GRAPH_SCRIPT
setTransparentFillColor(getChartBackground(),true);
setTransparentFillColor(getFrame(),true);
setTransparentFillColor(getFrame(),true);
setTransparentBorderColor(getFrame(),true);
setTransparentBorderColor(getSeries(*), true);
setDisplay(getTitle(),false);
setDisplay(getLegendArea(),false);
setDisplay(getO1MajorGrid(),false);
setDisplay(getO1Label(),false);
setDisplay(getY1MajorGrid(),false);
setDisplay(getY1Label(),false);
setDisplay(getY1AxisLine(),false);
setMarkerShape(getAllSeries(),1);
setFillColor(getSeries(0),new Color(0,0,0));
-*********************
-* Code of Interest:
setExceptionalRiser(0,0);
setFillType(getExceptionalRiser(0,0),1);
setFillColor(getExceptionalRiser(0,0),new Color(255,0,0));
setBorderColor(getExceptionalRiser(0,0),new Color(255,0,0));
setExceptionalRiser(0,5);
setFillType(getExceptionalRiser(0,5),1);
setFillColor(getExceptionalRiser(0,5),new Color(255,0,0));
setBorderColor(getExceptionalRiser(0,5),new Color(255,0,0));
-*********************
*GRAPH_JS_FINAL
"xaxis": {
"title": {
"visible": false,
}
},
"yaxis": {
"title": {
"visible": false,
}
},
"blaProperties": {
"seriesLayout": "absolute"
},
"riserBevel": "none",
"agnosticSettings": {
"chartTypeFullName": "Line_Absolute"
},
"introAnimation": {
"enabled": true,
"duration": 250
},
*END
ENDSTYLE
END
-RUN
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 03, 2019, 11:10 AM
John_Edwards
So I need to create these in bulk and save them to drive for future linking into a big report. Can I do that with a JS Chart? I was under the impression that I needed to save as a png or jpg.
July 03, 2019, 06:12 PM
Hallway
Are you creating these to use as in-line sparkline graphs? If so, have you ever considered using the jQuery-sparklines javascript library?
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET SQUEEZE=ON
SET HTMLENCODE=OFF
SET HTMLCSS=ON
SET EMPTYREPORT=ON
*-HOLD_SOURCE
TABLE FILE ggsales
SUM GGSALES.SALES01.UNITS
COMPUTE SALESSTR/A250V=TRIM_(LEADING, ',', PARTITION_REF(SALESSTR, GGSALES.SALES01.CATEGORY ,-1) || ',' || TRIM_(BOTH, ' ', FTOA( GGSALES.SALES01.UNITS ,'(D12c)','A15V') ) );
BY GGSALES.SALES01.CATEGORY
BY GGSALES.SALES01.DATE
ON TABLE HOLD AS CSV FORMAT BINARY
ON TABLE SET ASNAMES SUBST
ON TABLE SET HOLDATTRS ON
ON TABLE SET HOLDLIST PRINTONLY
END
-RUN
-* jQuery.sparkline.js implementation:
-HTMLFORM BEGIN
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function () {
/* This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
$('.inlinesparkline').sparkline('html', {
type: 'line',
spotColor: '',
minSpotColor: '#ff0000',
maxSpotColor: '#00ff00',
highlightSpotColor: undefined,
spotRadius: 2,
tooltipPrefix: '$',
fillColor: '',
width: 150,
height: 19,
lineWidth: 1.2,
highlightSpotColor: '#ff7f00',
highlightLineColor: '#ff7f00',
});
});
</script>
</head>
-HTMLFORM END
-* Report request:
TABLE FILE CSV
SUM
COMPUTE Sparkline/A800V='<span class="inlinesparkline" values="'|| MAX.SALESSTR ||'"></span>';
UNITS/D12.2
BY CATEGORY
ON TABLE PCHOLD FORMAT HTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/flat.sty,$
ENDSTYLE
END
-RUN
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 05, 2019, 09:26 AM
John_Edwards
I have not used this before, but I'm open to it. I'll be honest, the png files I was getting weren't exactly razor-sharp in appearance, so if these look better they're preferred. I'll get to work on it in the coming week.
Thanks for the reference, looks like good hunting. I need to generate a couple dozen at a time, here's hoping I can figure out how to do that!
By the way you're now my favorite poster in the Forums. Sorry Mariani, you've been bumped!
July 05, 2019, 01:05 PM
John_Edwards
Alright, so my 8.1 compiler has no clue what PARTITION_REF is. I attempted to replace it with an equivalent LAST command (which appears to be the same thing) and I got nada for a result. Just a blank box where presumably the sparkline would be. The field entry for the graph looked like this --
This looks like a dead end, perhaps because I'm not on 8.2 yet? Appears to be a label and a single point, perhaps to create a bar graph with a title on it.
This relatively simple report is burning funding at a great rate. I think I need to cut my losses at this point and give them what I have with black points and the fuzzy lines. Thanks for throwing in on it.
July 05, 2019, 02:38 PM
Hallway
My apologies. I didn't see a version number that you are using in your signature, so I just used some of the cool new functions that 8.2+ provide. What you need as a csv sting of the UNITS values within each category so you can buils a span tag like this:
There might be a better way to do this, but this seemed to work, and I think it is 8.1 friendly:
SET PAGE-NUM=OFF
SET HTMLENCODE=OFF
SET BYDISPLAY=ON
SET HOLDLIST=PRINTONLY
TABLE FILE ibisamp/ggsales
SUM UNITS
BY CATEGORY
RANKED BY LOWEST DATE
ON TABLE HOLD AS File1
END
-RUN
TABLE FILE File1
SUM UNITS
COMPUTE SALESSTR/A500V=IF RANK EQ 1 THEN LTRIM(FTOA( UNITS ,'(D12c)','A15V')) ELSE LST.SALESSTR || ',' || LTRIM(FTOA( UNITS ,'(D12c)','A15V'));
BY CATEGORY
BY DATE
BY RANK
ON TABLE HOLD AS CSV
END
-RUN
-* jQuery.sparkline.js implementation:
-HTMLFORM BEGIN
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function() {
/* This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
$('.inlinesparkline').sparkline('html', {
type: 'line',
spotColor: '',
minSpotColor: '#ff0000',
maxSpotColor: '#00ff00',
highlightSpotColor: undefined,
spotRadius: 2,
tooltipPrefix: '$',
fillColor: '',
width: 150,
height: 19,
lineWidth: 1.2,
highlightSpotColor: '#ff7f00',
highlightLineColor: '#ff7f00',
});
});
</script>
</head>
-HTMLFORM END
-* Report request:
TABLE FILE CSV
SUM
COMPUTE Sparkline/A800V='<span class="inlinesparkline" values="'||MAX.SALESSTR ||'"></span>';
UNITS/D12M AS 'Sales_Units'
BY CATEGORY
ON TABLE PCHOLD FORMAT HTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/flat.sty,$
ENDSTYLE
END
-RUN
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 05, 2019, 02:40 PM
Hallway
quote:
Originally posted by John_Edwards: By the way you're now my favorite poster in the Forums. Sorry Mariani, you've been bumped!
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 05, 2019, 02:54 PM
John_Edwards
quote:
Originally posted by Hallway: My apologies. I didn't see a version number that you are using in your signature, so I just used some of the cool new functions that 8.2+ provide. What you need as a csv sting of the UNITS values within each category so you can buils a span tag like this:
There might be a better way to do this, but this seemed to work, and I think it is 8.1 friendly:
SET PAGE-NUM=OFF
SET HTMLENCODE=OFF
SET BYDISPLAY=ON
SET HOLDLIST=PRINTONLY
TABLE FILE ibisamp/ggsales
SUM UNITS
BY CATEGORY
RANKED BY LOWEST DATE
ON TABLE HOLD AS File1
END
-RUN
TABLE FILE File1
SUM UNITS
COMPUTE SALESSTR/A500V=IF RANK EQ 1 THEN LTRIM(FTOA( UNITS ,'(D12c)','A15V')) ELSE LST.SALESSTR || ',' || LTRIM(FTOA( UNITS ,'(D12c)','A15V'));
BY CATEGORY
BY DATE
BY RANK
ON TABLE HOLD AS CSV
END
-RUN
-* jQuery.sparkline.js implementation:
-HTMLFORM BEGIN
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function() {
/* This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
$('.inlinesparkline').sparkline('html', {
type: 'line',
spotColor: '',
minSpotColor: '#ff0000',
maxSpotColor: '#00ff00',
highlightSpotColor: undefined,
spotRadius: 2,
tooltipPrefix: '$',
fillColor: '',
width: 150,
height: 19,
lineWidth: 1.2,
highlightSpotColor: '#ff7f00',
highlightLineColor: '#ff7f00',
});
});
</script>
</head>
-HTMLFORM END
-* Report request:
TABLE FILE CSV
SUM
COMPUTE Sparkline/A800V='<span class="inlinesparkline" values="'||MAX.SALESSTR ||'"></span>';
UNITS/D12M AS 'Sales_Units'
BY CATEGORY
ON TABLE PCHOLD FORMAT HTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/flat.sty,$
ENDSTYLE
END
-RUN
This one worked in 8.1, and I really like the look of the sparkline. I just snapped the lid on this one but I might crack it back open since you already have done 98% of the legwork on it. Thank you much!
That link has some great information on it. Thanks for sharing.
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 05, 2019, 03:34 PM
John_Edwards
I should throw in a link for the graphs I did using Google Graphs years back. They're still working, still kick *** in my demos. Easy peasy once you know how to drop WebFOCUS data inline into the source code.
July 08, 2019, 04:16 PM
Hallway
quote:
Originally posted by John_Edwards: I should throw in a link for the graphs I did using Google Graphs years back. They're still working, still kick *** in my demos. Easy peasy once you know how to drop WebFOCUS data inline into the source code.
Do it. I've used Google Charts as well, but I would love to see how you did it and maybe I can improve on my code.
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 08, 2019, 04:18 PM
Hallway
This is interesting. I was able to add the date to the tooltip in the sparkline:
SET PAGE-NUM=OFF
SET HTMLENCODE=OFF
SET BYDISPLAY=ON
SET HOLDLIST=PRINTONLY
DEFINE FILE ggsales
DATE_MDYY/MDYY = DATECVT( DATE ,'I8YYMD', 'YYMD');
END
TABLE FILE ggsales
SUM DOLLARS
COMPUTE IDX/I3=IF LAST PRODUCT NE PRODUCT THEN 0 ELSE IDX + 1 ; NOPRINT
COMPUTE IDX_A/A25V= '''' || LTRIM(FTOA(IDX, '(D12)', 'A15V')) || ''':''' || EDIT( DATECVT ( DATE , 'I8YYMD' , 'A8MDYY' ), '99/99/9999') || '''';
COMPUTE T_TIPSTR/A4096V = IF LAST PRODUCT NE PRODUCT THEN IDX_A ELSE LAST T_TIPSTR || ', ' | IDX_A;
COMPUTE SALESSTR/A4096V = IF LAST PRODUCT NE PRODUCT THEN LTRIM( FTOA( DOLLARS ,'(D12c)','A15V') ) ELSE LAST SALESSTR || ',' || LTRIM( FTOA( DOLLARS ,'(D12c)','A15V') );
BY PRODUCT
BY DATE_MDYY
ON TABLE HOLD AS CSV
END
-RUN
-* jQuery.sparkline.js implementation:
-HTMLFORM BEGIN
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function() { // <-- short version of: $(document).ready(function () {});
//This code runs when everything has been loaded on the page
//Inline sparklines take their values from the contents of the tag's data-values="" attribute
$('.inlinesparkline').each(function(){
//var values = $(this).attr('data-values').split(',').map(Number);
//var levels = $(this).attr('data-levels') ;
//levels = levels.replace(/'/g, '"');
//levels = JSON.parse(levels);
var values = this.dataset.values.split(',').map(Number);
var levels = JSON.parse(this.dataset.levels.replace(/'/g, '"'));
$(this).sparkline(values, {
type: 'line',
lineColor: '#00f',
spotColor: '',
minSpotColor: '#f00',
maxSpotColor: '#0f0',
spotRadius: 2,
tooltipPrefix: '$',
fillColor: '',
width: 150,
height: 19,
lineWidth: 1.2,
highlightSpotColor: '#ff7f00',
highlightLineColor: '#ff7f00',
tooltipFormat: '{{offset:levels}}<br>{{prefix}}{{y}}',
tooltipValueLookups: {
levels: levels
},
});
})
});
</script>
</head>
-HTMLFORM END
-* Report request:
TABLE FILE CSV
SUM
DOLLARS/D12M AS 'Sales_DOLLARS'
COMPUTE Sparkline/A800V='<span class="inlinesparkline" data-levels="{'|| MAX.T_TIPSTR || '}" data-values="'|| MAX.SALESSTR ||'"></span>'; AS ''
BY PRODUCT
ON TABLE PCHOLD FORMAT HTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/flat.sty,$
ENDSTYLE
END
-RUN
This message has been edited. Last edited by: Hallway,
Hallway
Prod: 8202M1
Test: 8202M4
Repository:
OS:
Outputs:
July 09, 2019, 06:37 PM
Doug
Thanks Guys... This is a Great Example of using jQuery Sparklines. This will come in Very Handy... Someday.
July 09, 2019, 08:14 PM
Hallway
I was just reading a bit about the new HTML5 data-* attributes. They are even better than I thought. I have updated the code above to utilize those a bit cleaner.