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 --

setBorderColor(getSeries(0),new Color(0,0,0));
setSeriesFillColor(getSeries(0),new Color(0,0,0));

setExceptionalRiser(0,0);
setFillType(getExceptionalRiser(0,0),3);
setFillColor(getExceptionalRiser(0,0),new Color(255,0,0));
setBorderColor(getExceptionalRiser(0,0),new Color(255,0,0));

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,

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.

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.

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

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.

Are you creating these to use as in-line sparkline graphs? If so, have you ever considered using the jQuery-sparklines javascript library?

https://omnipotent.net/jquery.sparkline

Here is an exapmle of it in action:

  
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

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!

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 --

<span class="inlinesparkline" values="Food,64429"></span></td>

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.

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:

 
<span class="inlinesparkline" values="51475,57959,63931,52157,51669,60389,54519,60744,58523,60832,55499,55344,61666,54870,61608,57050,59229,58466,60771,54633,57829,57012,51110,58981"></span>
 

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
  

quote:

Originally posted by John_Edwards:
By the way you're now my favorite poster in the Forums. Sorry Mariani, you've been bumped!

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:

 
<span class="inlinesparkline" values="51475,57959,63931,52157,51669,60389,54519,60744,58523,60832,55499,55344,61666,54870,61608,57050,59229,58466,60771,54633,57829,57012,51110,58981"></span>
 

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!

http://forums.informationbuild...497096026#2497096026

I think I'll always be Francis' Padawan.

:-)

quote:

Originally posted by David Briars:
http://forums.informationbuild...497096026#2497096026

I think I'll always be Francis' Padawan.

:-)

That link has some great information on it. Thanks for sharing.

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.

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.

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,

Thanks Guys... This is a Great Example of using jQuery Sparklines.
This will come in Very Handy... Someday.

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.

You can read more here if interested:https://developer.mozilla.org/.../Use_data_attributes