Jose Leviaguirre

Hello Padmini

You will  need to create an Action Control on a Text Area and associate an IronPython script to it. The script will be something like:
 
from Spotfire.Dxp.Application.Visuals import AxisRange, ScatterPlot # vis is a script parameter scatter = vis.As[ScatterPlot]() # update X zoom range axisRangeX = AxisRange(2000,3000) scatter.XAxis.ZoomRange = axisRangeX # update Y zoom range axisRangeY = AxisRange(400,500) scatter.YAxis.ZoomRange = axisRangeY  
Another option that requires no coding is to use bookmarks


Check out these articles on how you can use IronPython to programatically set the zoom sliders to a specific position.
https://community.spotfire.com/articles/spotfire/configuring-spotfire-zoom-sliders-scroll-bars-etc-using-ironpython/ https://community.spotfire.com/articles/spotfire/sync-scrollbars-between-visualizations/

Hello, 

You can change the color with IronPython by using the Coloring. SetColorForCategory Method
from Spotfire.Dxp.Application.Visuals import CombinationChart, CategoryKey from System.Drawing import Color #cast visual to combo chart combinationChart = vis.As[CombinationChart]() #get script parameters from doc props category = CategoryKey(Document.Properties["category"]) #string representing a category from the series color = Color.FromName(Document.Properties["color"]) #named color such as blue, green, magenta, beige... # change the color for the corresponding category combinationChart.ColorAxis.Coloring.SetColorForCategory(category,color) #color = Color.FromArgb(255,0,0) #if you know the rgb values #hex_color = "#FF0000" #color = Color.FromArgb(int(hex_color[1:3], 16), int(hex_color[3:5], 16), int(hex_color[5:7], 16)) #if you know the hex color


Here is an article on how to do so

Hello Juan Carlos,
To sync the zoom visuals, you need to use an IronPython script that can be triggered by Action Controls. You can add this control on a text area just like you did on your left side panel. This script only syncs two visuals, but I am sure you can change the code to your needs and apply the zoom slider range to other visuals
# You will need these two classes from the Application.Visual library: AxisRange and ScatterPlot from Spotfire.Dxp.Application.Visuals import AxisRange, ScatterPlot # We need to cast the visual parameters visA and visB to ScatterPlot object or whatever visual you are using in your analysis scatterA = visA.As[ScatterPlot]() scatterB = visB.As[ScatterPlot]() # We create a reference to the Y axis ZoomRange from the first visual (A) zoomAy = scatterA.YAxis.ZoomRange # We need to create an AxisRange object based on visual A range settings for Y axis axisRangeY = AxisRange(zoomAy.Low, zoomAy.High) # And apply this axisRangeY object to the second visual B scatterB.YAxis.ZoomRange = axisRangeY  

I see...
Seems that the Spotfire filter control inside your panel is triggering the hover or mouse out event.
Try adding a trigger other than the one in the panel where the Spotfire controls sit to avoid conflict. Take a look at this example to understand the concept of a trigger border, which is basically a layer under the .side-menu but a big bigger in which you tell it to collapse the menu instead of the .side-menu panel
 
Here a modified example based on your code in which I added a #closeTrigger layer under the .side-menu:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="styelDiv"></div> <div id="fontAwesome"></div> <div id="closeTrigger"></div> <ul class="side-menu" style="overflow:hidden; bottom:28px;"> <li class="spotli"> <div id="accordion" class="spotli ws-menu-button" style="background: beige"> <h4 style="background: white; color: #625D52"> <a href="#"> <span class="fa fa-calendar-days fa-2xl" style="background: green; color: #625D52"></span> <span style="color: #625D52">Production Date</span> <span style="color: #625D52; float: right;">▼&nbsp;&nbsp;&nbsp;&nbsp;</span> </a> </h4> <div align="center" style="background: white; color: #625D52"> <span style="color: #625D52; background: white" class="slider-sidepanel"><SpotfireControl id="a05a922bbe6849989454e80b7d843cc0" />&nbsp;&nbsp;&nbsp;&nbsp;</span> </div> </div> </li> </ul>  

When using 100% stacked bars you will only have and need one scale that goes from 0 to 100%. A work around is to create a calculated column and compute the percentage for each bar / segment so you can have multiple scales.
It is a good use case, so I added this idea on the ideas portal.

You can achieve the same thing without using any JavaScript with calculated values. The calculated value toggles a document property when clicked so when the document property changes, you can trigger your script that hides or shows the lines and curves. The calculated value can display a way to indicate the status of the Boolean document property
"lines and curves are: " & if(${cb},"[on]","[off]")The JavaScript route is a similar approach. Just wrap the calculated value with an identified tag
 
<a id='myCheckbox'> <SpotfireControl id="091b854f588b407ea376e0f8e3d1a7f8" /></a>and add this script
/*usage:just wrap a calculated value with: <a id="myCheckbox"><spotfire calculated value goes here></div> requirements for the calc val spotfire control: The calc val drives a boolean doc prop "sw1" that toggles its state when clicked To change the bool doc prop sw1 when clicked, assign the ironpython script: Document.Properties["sw1"] = now Document.Properties["sw1"] The calc val custom expression can be just the bool doc prop: ${sw1} or something more descriptive: "lines and curves are: " & if(${sw1},"[on]","[off]") Make sure the calcValOutput script param here matches the sw1 output*/  //script parametersid = "myCheckbox";calcValOutput = "lines and curves are: [on]";  //get doc prop value that comes from calc value expressioncv = document.getElementById(id); //add a placeholder for the custom expression html to render as a sibling of the idcb = document.createElement('div');  //set default value according to doc prop. Wait a bit for the actionControl to rendersetTimeout(()=>{ isChecked = cv.innerText==calcValOutput;  html = ` <label class="switch"><input type="checkbox" ${isChecked?"checked":""}><span class="slider"></span></label>`   cb.innerHTML = html; cv.insertAdjacentElement("afterend",cb);  //set the slider to click the calculated column cb.querySelector(".slider").onclick = ()=>{cv.querySelector(".actionCell").click()}; //hide the calc val cv.hidden = true; },1500); //adjust milliseconds accordingly  //add style for look and feel. This can be placed on a different scriptcss=`<style>/* The switch - the box around the slider */.switch { position: relative; display: inline-block; width: 60px; height: 34px;} /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0;} /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;} .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;} input:checked + .slider { background-color: #2196F3;} input:focus + .slider { box-shadow: 0 0 1px #2196F3;} input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);} </style>`; cv.insertAdjacentHTML("afterend",css);

Hello Min,
Here is an example of a reset button on one text area that resets the other on the second text area
 
1st text area has buttons that are kept highlighted when pressed
<style>.on { background-color: #ABFF00; box-shadow: rgb(0 0 0) 0 0px 0px 0px, inset rgb(49 54 56) 1px 1px 1px 1px, rgb(223 223 223) 0 0px 7px;}</style>  <span id='myButtons'> <SpotfireControl id="button goes here" /> <SpotfireControl id="replace with button" /> <SpotfireControl id="must be a spotfire button control" /></span>   <script>function lightsOff(cssSel){$(cssSel).removeClass("on")}  //make day selection buttons highlight when clicked$("#myButtons input").click(function(){ $("#myButtons input").removeClass("on"); $(this).addClass("on"); window.localStorage.setItem("daysBtns",this.id);}) //highlight saved itemsdocument.getElementById(window.localStorage.getItem("daysBtns"))?.classList.add("on")</script>2nd text area with a reset button
<div id='resetButton'> <SpotfireControl id="183c1cb350f346bca91a0e94d837f026" /></div> <script>$("#resetButton input").click(function(){ $("#myButtons input").removeClass("on");})</script>In case you want to have the reset button, you can combine them both:
<style>.on { background-color: #ABFF00; box-shadow: rgb(0 0 0) 0 0px 0px 0px, inset rgb(49 54 56) 1px 1px 1px 1px, rgb(223 223 223) 0 0px 7px;}</style>  <span id='myButtons'> <SpotfireControl id="spotifre button control" /> <SpotfireControl id="spotifre button control" /> <SpotfireControl id="spotifre button control" /></span><hr><div id='resetButton'> <SpotfireControl id="7f49c19796e943868e8d4b8c31458c87" /></div>   <script>function lightsOff(cssSel){$(cssSel).removeClass("on")}  //make day selection buttons highlight when clicked$("#myButtons input").click(function(){ $("#myButtons input").removeClass("on"); $(this).addClass("on"); window.localStorage.setItem("daysBtns",this.id);}) $("#resetButton input").click(function(){ $("#myButtons input").removeClass("on");}) //highlight saved itemsdocument.getElementById(window.localStorage.getItem("daysBtns"))?.classList.add("on")</script>

Hello Min Su Sun
One way to achieve this is to use one of the sidebars or a drawer component and place an accordion inside them.
for the sidebar, place the accordion code inside the sidebar-nav element
<DIV id="sidebar" style="FONT-SIZE: 20px; BACKGROUND: #004050; COLOR: white"></DIV><span id="sidebar-logo">C. Corp</span><DIV id="sidebar-nav" > your accordion html code here</div>  
Attached find example code

Hello Francisco. If it is not meant to be a calculated column, I assume is a calculated or aggregated value, so use something like this in your custom expression, function or whatever you are planning to use it on
Sum(If([CAT]~="A|C",[VALUE]))The secret is the first argument of the if function. The ~= operator is used to test if the value in the "CAT" column matches the regular expression "A|C". In this regular expression, the vertical bar (|) means "or", so the regular expression matches either the character "A" or the character "C"

Hello Henry
Thanks again for your feedback. I fixed the code. I added this JavaScript library that handles the dragging properly.

The backslash acts as a escaping character in your column, so it renders as a single backslash.
Add this transformation before your case statement 
Substitute([FILE],"\","\\")Or replace all your \ with a single in your document properties

Here is an implementation of your requirement:
 
On a Text Area, Create a List box (multiple select) Property Control with Unique values in column pointing to a new String List Document Property called "values" Create a Label Property Control on a Text Area using the "values" document property to output the selecting order of the columns and add a "Apply" Action Control Button Create an IronPython script for the Apply button : tblName = "Blood Work"colName = "type"values = Document.Properties["values"]dt = Document.Data.Tables[tblName]# The values in values must be of the same type as the values in the column. # Column values not present in values will be sorted last. dt.Columns[colName].Properties.SetCustomSortOrder(values)