Performance limits of Dynamic Items in HTML text panel

[Steve Fernandez]

I'm trying to really push what's possible with custom design inside an HTML panel. Why Cross tab won't allow anything like an icon or bullet graph. Graphical table won't allow sub total. Why No clue. If the graphical would allow subtotal this would totally not be an issue. So, I'm trying to build a hybrid using good 'ol HTML and CSS. This also allows me to experiment with some .hover elements and other HTML stylings.However, the design has required me to build ~60 dynamic elements using a table tag. I will probably need to add more if I need to include more KPIs on the same page. Most of the items are tied to a script that updates a trend chart based on what is clicked (passing parameters).

Is there a limit to how many dynamic items you can have in a panel or on a page The performance is a little slow. Just mousing over the dynamic elements takes 30% of a dual core HT laptop. There are also some control buttons to switch between customer types. These are slow to update the page; like 3 seconds. Somewhere there is a bottleneck. I assume it's the number of dynamic elements, but I can't be sure w/o either ripping them all out, or adding a bunch more. Any idea how to find/resolve bottlenecks or enhance performance

Related question: This works pretty well in the desktop editor, but tends to fail when running in the webplayer. This greatly concerns me. Even if I can get it to work fine in the editor, and if I accept the slow performance, the page still tends to crash in the webplayer. I need help to understand why. I can't seem to get any kind of error from the webplayer on what happened. The crash usually happens when I click a dynamic item that should run a script to update that trend chart.

In the image I've attached, the bullet chart is inside a .hover element. I tried this to reduce visual clutter on the page. It would be awesome if the API would let us drop more visualizations into HTML like this. Although, that may be part of my performance hit here. IDK. The (empty) elements are just me trying to shove fake data into my design w/o breaking it to get a pic. So, there is a bit of CSS and dynamic elements going on. Would greatly appreciate any help on how to get this to run smoother.

[Steve Fernandez]

Could it be the script  There are only 94 rows and 10 columns, so the data isn't large. Cutting it down to just 15 dynamic items didn't help the speed. The buttons at the top trigger a different script, but it's only 4 lines of IF Else to set a document property based on the value passed to the script form the buttons. Unless scripts in gener just run slow.

 

from Spotfire.Dxp.Application.Visuals import CombinationChart, CombinationChartSeriesType
from Spotfire.Dxp.Data.Formatters import NumberFormatter, NumberFormatCategory
from Spotfire.Dxp.Data import DataType
from System import Guid
import System.Drawing.Color


#removed a lot of custom stuff dealing with document properties with a bunch of IF statements
#the logic controls the expression used in the trend chart, sets mt & metric

#Get the visualization from current page
guid = Guid("178214cb-4dab-4927-95d2-de99936b56ef")
myvis = Application.Document.ActivePageReference.Visuals.TryGetVisual(guid)[1].As[CombinationChart]();


if mt == "Currency" :
 NumberFormatter = DataType.Real.CreateLocalizedFormatter()
 NumberFormatter.Category = NumberFormatCategory.Currency # Set number category to 'Currency'
 NumberFormatter.ShortFormattingEnabled = True
 NumberFormatter.DecimalDigits = 0; # Set decimal places to 0
 #set format
 if metric == "Revenue" :
  myvis.YAxis.IndividualScaling = False
  #myvis.YAxis.Scale.IndexedDock["Revenue"] = ScaleDock.Near
  #myvis.YAxis.Scale.IndexedDock["LRBP"] = ScaleDock.Near
  myvis.IndexedSeriesType.Item["Revenue"] = CombinationChartSeriesType.Bar
  myvis.IndexedSeriesType.Item["LRBP"] = CombinationChartSeriesType.Bar
  myvis.ColorAxis.Categorical.ColorMap["Revenue"] = System.Drawing.ColorTranslator.FromHtml("#239e58")
  myvis.ColorAxis.Categorical.ColorMap["LRBP"] = System.Drawing.ColorTranslator.FromHtml("#cfdbff")
  #myvis.ColorAxis.Coloring.SetColorForCategory(keys[0], Color.FromName("Yellow"))
  #myvis.YAxis.Scale.Formatting.IndexedCurrencyFormatter["Revenue"] = NumberFormatter
  #myvis.YAxis.Scale.Formatting.IndexedCurrencyFormatter["LRBP"] = NumberFormatter
  myvis.YAxis.Scale.Formatting.CurrencyFormatter = NumberFormatter
 elif metric == "Margin" :
  myvis.YAxis.IndividualScaling = False
  #myvis.YAxis.Scale.IndexedDock["Margin"] = ScaleDock.Near
  #myvis.YAxis.Scale.IndexedDock["LRBP"] = ScaleDock.Near
  myvis.IndexedSeriesType.Item["Margin"] = CombinationChartSeriesType.Bar
  myvis.IndexedSeriesType.Item["LRBP"] = CombinationChartSeriesType.Bar
  myvis.ColorAxis.Categorical.ColorMap["Margin"] = System.Drawing.ColorTranslator.FromHtml("#239e58")
  myvis.ColorAxis.Categorical.ColorMap["LRBP"] = System.Drawing.ColorTranslator.FromHtml("#cfdbff")
  #myvis.YAxis.Scale.Formatting.IndexedCurrencyFormatter["Margin"] = NumberFormatter
  #myvis.YAxis.Scale.Formatting.IndexedCurrencyFormatter["LRBP GM"] = NumberFormatter
  myvis.YAxis.Scale.Formatting.CurrencyFormatter = NumberFormatter

elif mt == "Percentage" :
 myvis.YAxis.IndividualScaling = False
 #myvis.YAxis.Scale.IndexedDock["Revenue"] = ScaleDock.Near
 #myvis.YAxis.Scale.IndexedDock["LRBP"] = ScaleDock.Near
 NumberFormatter = DataType.Currency.CreateLocalizedFormatter()
 NumberFormatter.Category = NumberFormatCategory.Percentage # Set number category to 'Currency'
 #NumberFormatter.ShortFormattingEnabled = False
 NumberFormatter.DecimalDigits = 0; # Set decimal places to 0
 myvis.IndexedSeriesType.Item["GM%"] = CombinationChartSeriesType.Line
 myvis.IndexedSeriesType.Item["LRBP"] = CombinationChartSeriesType.Line
 myvis.ColorAxis.Categorical.ColorMap["GM%"] = System.Drawing.ColorTranslator.FromHtml("#239e58")
 myvis.ColorAxis.Categorical.ColorMap["LRBP"] = System.Drawing.ColorTranslator.FromHtml("#db7b37")
 #myvis.YAxis.Scale.Formatting.IndexedCurrencyFormatter["GM%"] = NumberFormatter
 #myvis.YAxis.Scale.Formatting.IndexedCurrencyFormatter["LRBP"] = NumberFormatter
 myvis.YAxis.IncludeZeroInAutoZoom = False
 myvis.YAxis.Scale.Formatting.CurrencyFormatter = NumberFormatter