Jump to content

I am currently trying to implement what was shown in the video, but with property controls to toggle on and of multiple y-axis columns. Is this possible?

Roberto Jacquez

Recommended Posts

Hola Roberto,


How ​Is your multiple drop-down populated? Dynamically (for example by column names) or hard coded values?

Do you want to create a set of checkboxes of​ whatever you have in your drop-down displayed differently (for example, horizontally)

One idea is to keep it as is and change the​ styling of it to make it look like checkboxes

​It's a great question though. Please confirm with additional info or screenshots

Link to comment
Share on other sites

Please see the image attached.

I created a List box where a user can select their desired Y-axis columns to be displayed on the line chart.

In the screenshot attached, OilProduction and WaterProduction are displaying on the line chart because they are selected, but to pick more, a user either needs to keep highlighting by sliding their mouse down, or they need to type CTRL + click on desired Y-column.

Check boxes would be preffered.

I created this list box using the add property control feature inside a text area.

I tried mimicking the script in your


from Spotfire.Dxp.Application.Visuals import Visualization

myVis = myVis.As[Visualization] ()

myVis.YAxis.Columns["OilProduction"] = Document.Properties["cb"]

but get an error that says:

AttributeError: "ScaleAxis" object has no attribute "Columns"

Thanks for your help!

Link to comment
Share on other sites

  • 4 weeks later...

Hello Roberto,

Create a JavaScript that creates the necessary checkboxes so when they are clicked, it updates an input field property control that will trigger an iron python to update a multi select property control.


On a text area, create a multiple select list box property control and call it "myStringList" and another string input field property control and call it "transfer". The transfer document property should trigger the following script when it changes:

#update multiSelectDocument.Properties["myStringList"] = Document.Properties["transfer"].split(",")

Edit the text area html and wrap the controls with a tag element with id "myCheckboxList"

<div id="myChecboxList"> <SpotfireControl id="'myStringList' muiltiple selection list box" /> <SpotfireControl id="'transfer' input control " /></div>

Add the following JavaScript

id = "myChecboxList"  //get items from multiSelectph = document.getElementById(id);items = ph.innerText.split("n").filter(x=>x!="..."&&x.trim()); //get checked values from csvtarget = ph.querySelector("input"); checked = target.value.split(",").filter(x=>x!="")  //create checkboxes items.forEach((x,i)=>{ val = items; cb = document.createElement("input"); cb.type ="checkbox"; cb.value = val; tn = document.createTextNode(" "+val); br = document.createElement("br"); [br,cb,tn].forEach(e => {ph.appendChild(e)});  //check if checked cb.checked = checked.includes(val) console.log(val,checked,val in checked)   //onclick (method #2) cb.onclick = () => { target.value = [...document.querySelectorAll("#myChecboxList input[type=checkbox]")].map(x=>x.checked?x.value:null) target.focus() target.blur(); } //hide input target.style.position="fixed" target.style.zIndex=-1"  //hide multiselect ph.firstElementChild.style.display="none"   })


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...