Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED]Line Graph -- Fill Color of markers appears tied to color of connecting lines

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED]Line Graph -- Fill Color of markers appears tied to color of connecting lines
 Login/Join
 
Virtuoso
posted
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,



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Virtuoso
posted Hide Post
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.



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Virtuoso
posted Hide Post
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.



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Master
posted Hide Post
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


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Virtuoso
posted Hide Post
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!



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Virtuoso
posted Hide Post
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.



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Master
posted Hide Post
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
  


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Master
posted Hide Post
quote:
Originally posted by John_Edwards:
By the way you're now my favorite poster in the Forums. Sorry Mariani, you've been bumped!


Big Grin


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Virtuoso
posted Hide Post
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!



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Master
posted Hide Post
http://forums.informationbuild...497096026#2497096026

I think I'll always be Francis' Padawan.

:-)




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
 
Posts: 822 | Registered: April 23, 2003Report This Post
Master
posted Hide Post
quote:
Originally posted by David Briars:
http://forums.informationbuild...497096026#2497096026

I think I'll always be Francis' Padawan.

:-)


Good One

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


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Virtuoso
posted Hide Post
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.



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Expert
posted Hide Post
Thanks Guys... This is a Great Example of using jQuery Sparklines.
This will come in Very Handy... Someday.
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
Master
posted Hide Post
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


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED]Line Graph -- Fill Color of markers appears tied to color of connecting lines

Copyright © 1996-2020 Information Builders