Hi all, Here is a sample BSV of a implementation of Sparklines in Aware IM (v7) standard queries. There is a total of 7 Sparklines available and works with some small quirks (explained below). Screenshot: [upl-image-preview uuid=dc5d9bce-cd8d-42bd-b4dc-f3cf1d16b346 url=https://www.awareim.com/forum/assets/files/phpbb_migrated/802_204dd82a2170f15b792607686d5e5dbf alt=Sparklines.png] Instructions (Windows example): 1. Unzip "Sparklines.zip" (attached) 2. Create a folder called "sparklines" in the main Aware IM folder (same folder that contains the "startup.html" file) and move file "jquery.sparkline.min.js" into that folder 3. Create a folder called "Temp" on C: and move files "sparkline1.txt" to "sparkline7.txt" into that folder. 4. Add the following to "startup.html" (to just before the JS seperator): [code] [/code] 5. Add the following CSS class to your theme or Custom CSS file: [code] .jqstooltip{ box-sizing: content-box; } [/code] 6. Import the sample BSV and log on to initialize and see an example. 7. Dissect/understand and use in your own app. A couple of notes: - This implementation uses the URL_CONTENTS function to populate plain text attributes with the HTML needed in the query and the advanced render script of the query then targets and draws the Sparklines based off the values in the attributes. That means you have to build a feature in you app where you populate txt files with the correct HTML you want to use in a Sparkline and this is then used in the Sparkline when drawn and all of this can be done via business rules and tags in a txt document template (see/dissect sample for more details). Not the best solution but works and the reason I had to go this way is because it isn´t possible to populate "valid" HTML with quotation marks etc. into attributes using business rules. - Using paging bars doesn´t work (the Sparklines aren´t "re-drawn" when using the default paging bar) so you have to implement your own paging bar like the example I did (I only added a process to the query ("Next" button) to show how it would work but the process doesn´t do anything, you have to add the logic to filter entries to simulate a paging bar function). - There is a small delay when displaying the query where the values are shown and then when the advanced render script is executed (500ms delay, see advanced scripts for the query and you can play around with the delay etc. and see if you can do something else maybe or decrease delay) the Sparklines are drawn. - You have to use a process to refresh the query (otherwise the Sparklines aren´t drawn again). [upl-file uuid=129a38fb-c7d8-4cce-81cd-7ba4a2b15d77 size=49.88kB]Sparklines.zip[/upl-file] [upl-file uuid=129a38fb-c7d8-4cce-81cd-7ba4a2b15d77 size=49.88kB]Sparklines.zip[/upl-file]

Sample BSV: Sparklines in Aware V7

hpl123

Hi all,
Here is a sample BSV of a implementation of Sparklines in Aware IM (v7) standard queries. There is a total of 7 Sparklines available and works with some small quirks (explained below).

Screenshot:

Instructions (Windows example):

Unzip "Sparklines.zip" (attached)
Create a folder called "sparklines" in the main Aware IM folder (same folder that contains the "startup.html" file) and move file "jquery.sparkline.min.js" into that folder
Create a folder called "Temp" on C: and move files "sparkline1.txt" to "sparkline7.txt" into that folder.

Add the following to "startup.html" (to just before the JS seperator):

<script type="text/javascript" src="sparklines/jquery.sparkline.min.js"></script>

Add the following CSS class to your theme or Custom CSS file:

.jqstooltip{
    box-sizing: content-box;
}

Import the sample BSV and log on to initialize and see an example.
Dissect/understand and use in your own app.

A couple of notes:

This implementation uses the URL_CONTENTS function to populate plain text attributes with the HTML needed in the query and the advanced render script of the query then targets and draws the Sparklines based off the values in the attributes. That means you have to build a feature in you app where you populate txt files with the correct HTML you want to use in a Sparkline and this is then used in the Sparkline when drawn and all of this can be done via business rules and tags in a txt document template (see/dissect sample for more details). Not the best solution but works and the reason I had to go this way is because it isn´t possible to populate "valid" HTML with quotation marks etc. into attributes using business rules.
Using paging bars doesn´t work (the Sparklines aren´t "re-drawn" when using the default paging bar) so you have to implement your own paging bar like the example I did (I only added a process to the query ("Next" button) to show how it would work but the process doesn´t do anything, you have to add the logic to filter entries to simulate a paging bar function).
There is a small delay when displaying the query where the values are shown and then when the advanced render script is executed (500ms delay, see advanced scripts for the query and you can play around with the delay etc. and see if you can do something else maybe or decrease delay) the Sparklines are drawn.
You have to use a process to refresh the query (otherwise the Sparklines aren´t drawn again).

Sparklines.zip
49.88kB

Sparklines.zip
49.88kB

hpl123

Update:
Here is a solution for the delay problem. Add a style to the html span to make the font transparent (which means the numbers are shown but invisible which is better than the delay that is in the sample above). Example:

<span class="inlinesparkline" style="color:transparent !important;">1,4,4,7,5,9,10</span>

tford

Very nice Henrik!

I had to go this way is because it isn´t possible to populate "valid" HTML with quotation marks etc. into attributes using business rules.

Have you tried to put quotation marks into a SystemSettings attribute and incorporate that attribute in the rule to build valid HTML. I used to do that many years ago when I built a BSV that exported HTML to display Fusion Charts within AwareIM.

customaware

Awesome Henrik.

What was the trick stuffing the html into the atribute. I kept getting my " doubled up

hpl123

tford wrote
Very nice Henrik!

I had to go this way is because it isn´t possible to populate "valid" HTML with quotation marks etc. into attributes using business rules.

Have you tried to put quotation marks into a SystemSettings attribute and incorporate that attribute in the rule to build valid HTML. I used to do that many years ago when I built a BSV that exported HTML to display Fusion Charts within AwareIM.

Good point Tom and yeah that would work and is a better solution. Do you have an old rule or example laying around? I am not entirely sure how one would go about to for example get the following html into a plain text using SystemSettings for the quotation marks:

<span class="inlinesparkline" style="color:transparent !important;">1,4,4,7,5,9,10</span>

Thanks

hpl123

eagles9999 wrote
Awesome Henrik.

What was the trick stuffing the html into the atribute. I kept getting my " doubled up

Yeah, this was the issue I mistakenly stumbled across 🙂. I solved it using the URL_CONTENTS function but Tom suggested something that would be better and I asked him for an example and I will use that instead.

customaware

Ah... yes... I hve used that a number of times in the past and it usually works well.

Will test here.

customaware

Just another note...

You do not need to mess around loading the js in the startup.html file anymore.

Just drop it in AwareIM/Custom/JS folder and it will automatically load

tford

Do you have an old rule or example laying around? I am not entirely sure how one would go about to for example get the following html into a plain text using SystemSettings for the quotation marks:

I think you might be able to find it in here or in one of the forum posts linked:
https://www.awareim.com/forum/d/3501>

customaware

Henrik,

What does the setTimeOut actually do.

I have restructured to show a Pie on a normal query. However, I see it flash on and then disappears.

hpl123

eagles9999 wrote
Henrik,

What does the setTimeOut actually do.

I have restructured to show a Pie on a normal query. However, I see it flash on and then disappears.

Take a look at your autorefresh for the query, might be what messes the Sparklines up (there are some issues with refresh but using a process to refresh should solve it or at least did for the scenarios I tested).

The setTimeOut is small delay before the script to draw the Sparklines is executed and is needed because the render script is otherwise executed before the actual spans/values has been loaded in the query.

hpl123

hpl123 wrote
tford wrote
Very nice Henrik!

I had to go this way is because it isn´t possible to populate "valid" HTML with quotation marks etc. into attributes using business rules.

Have you tried to put quotation marks into a SystemSettings attribute and incorporate that attribute in the rule to build valid HTML. I used to do that many years ago when I built a BSV that exported HTML to display Fusion Charts within AwareIM.

Good point Tom and yeah that would work and is a better solution. Do you have an old rule or example laying around? I am not entirely sure how one would go about to for example get the following html into a plain text using SystemSettings for the quotation marks:
<span class="inlinesparkline" style="color:transparent !important;">1,4,4,7,5,9,10</span>
Thanks

Here is an example of using SystemSettings for quotation etc..:

HtmlString.String='<span'+SystemSettings.Space+'class='+SystemSettings.Quotation+'inlinesparkline'+SystemSettings.Quotation+'>1,4,4,7,5,9,10</span>'