Spotfire-JS-Jquery

1. Most of the following screenshots have some animations in them which you will find once you will replicate them in TIBCO SPOTFIRE TEXTAREA ONLY.
2. Feel free to play with it to create to something more productive.

Some Important JS Libararies from Visualisations perspective

1. https://d3js.org/
2. https://plotly.com/javascript/
3. https://www.zingchart.com/
4. https://developers.google.com/chart/interactive/docs/gallery
5. https://www.amcharts.com/javascript-charts/

Dashboard Links

1. Airline Circle
2. Box Toggle
3. Accordion
4. Left Panel
5. Hierarchy Diagram
6. Mac Doc
7. Pencils
8. Other Basic Things
9. Accordion_Left_Panel

Airline Circle

Box Toggle

Accordion

Left Panel

Code for all the 3 left Panels mentioned below are available separately in this repository.

Left Panel	Left Panel (2)	Left Panel + Accordion

Hierarchy Diagram

The following diagram is from the Spotfire textarea only, it doesn't have any resemblance with hierarchiral visualisation as far the code is concern, although it appears to be static at first glance but it includes a beautiful animation in it. I hope you will like it. You will find the code to replicate this, above.

Mac Doc

Pencils

Left-Panel-New

Other Basic Things

Hover Function to change background color

$( "#hover" ).hover(
function() {$( this ).css("background-color","orange");}, 
function() {$( this ).css("background-color","#FCD5CE");});

Click function to get an alert

$("#click").click(
function(){ alert("You clicked this button !")	})

Animating height of a div on click

$("#animate").click(function(){
$("#animate_this").animate({height:"toggle"});});

Animating width of a div on click

$("#animate_hori").click(function(){
$("#animate_horizontally").animate({width:"toggle"});});