AXE DES INFLUENCE ET CARTE SUR LE CHATBOT

app.py

@@ -21,6 +21,7 @@ from documentations import display_documentation
 from RAG_PDF_WEB import rag_pdf_web
 from prompt import get_prompts_list,prompt_execution,execute_prompt
 from chat_with_pps import display_chat
+from high_chart import test_chart
 
 def main():
     st.markdown(":point_left: Cliquez pour vous inspirer", unsafe_allow_html=True)
@@ -71,9 +72,8 @@ def main():
                 "Prompt RSE disponibles",
                 "Générations de contenus RSE",
                 "Parties prenantes",
-                "Cartographie",
                 "Matrice de matérialité",
-                "Chatbot Matrice de matérialité"
+                "Chatbot RSE"
             ]
         )
 
@@ -83,13 +83,6 @@ def main():
             # if selected_company:
             #     display_materiality_partiesprenantes(selected_company, data, bziiit_data)
             display_pp()
-        
-        elif ia_mode == "Cartographie":
-            # data, bziiit_data = fetch_data()
-            # selected_company = display_company_selection_for_materiality(data)
-            # if selected_company:
-            #     display_materiality_partiesprenantes(selected_company, data, bziiit_data)
-            display_viz()
 
         elif ia_mode == "Matrice de matérialité":
             data, bziiit_data = fetch_data()
@@ -97,7 +90,7 @@ def main():
             if selected_company:
                 display_materiality_matrix(selected_company, data, bziiit_data)
         
-        elif ia_mode == "Chatbot Matrice de matérialité":
+        elif ia_mode == "Chatbot RSE":
             display_chat()
         
         elif ia_mode == "Audit flash RSE de vos contenus":

chat_with_pps.py

@@ -4,22 +4,24 @@ from langchain_community.chat_models import ChatOpenAI
 from dotenv import load_dotenv
 from langchain_core.output_parsers import StrOutputParser
 from langchain_core.prompts import ChatPromptTemplate
+from download_chart import construct_plot
 
 
 load_dotenv()
 
-def format_context(df,brand_name):
-    formatted_string = "le nom de la marque est " + brand_name + "\n" + "Les parties prenantes et leur pouvoir en pourcentage sont les suivants:\n"
-    for index, row in df.iterrows():
-        formatted_string += f"{row['partie_prenante']}: {row['pouvoir']}%\n"
-    return formatted_string
+def format_context(partie_prenante_grouped,marque):
+    context = ""
+    for partie_prenante in partie_prenante_grouped:
+        context += f"{partie_prenante['name']} est une partie prenante de {marque} et a un pouvoir de {partie_prenante['y']}% et une influence de {partie_prenante['x']}%.\n"
+    return context
+    
 
 
 
 def get_response(user_query, chat_history, context):
 
     template = """
-    Fournir des réponses précises et contextuelles en agissant comme un expert en affaires, en utilisant le contexte des parties prenantes et leur pouvoir en pourcentage pour expliquer les implications pour la marque. Le modèle doit connecter les informations du contexte et de l'historique de la conversation pour donner une réponse éclairée à la dernière question posée.
+    Fournir des réponses précises et contextuelles en agissant comme un expert en affaires, en utilisant le contexte des parties prenantes et leur pouvoir en pourcentage et leur influence en pourcentage pour expliquer les implications pour la marque. Le modèle doit connecter les informations du contexte et de l'historique de la conversation pour donner une réponse éclairée à la dernière question posée.
 
     Contexte: {context}
 
@@ -40,14 +42,21 @@ def get_response(user_query, chat_history, context):
         "user_question": user_query,
     })
 
+def display_chart():
+    if "pp_grouped" not in st.session_state or st.session_state['pp_grouped'] is None or len(st.session_state['pp_grouped']) == 0:
+        st.warning("Aucune partie prenante n'a été définie")
+        return None
+    plot = construct_plot()
+    st.plotly_chart(plot)
+
+
 def display_chat():
     # app config
     st.title("Chatbot")
-
     # session state
     if "chat_history" not in st.session_state:
         st.session_state.chat_history = [
-            AIMessage(content="Salut, pose-moi des questions sur tes parties prenantes."),
+            AIMessage(content="Salut, voici votre cartographie des parties prenantes. Que puis-je faire pour vous?"),
         ]
 
         
@@ -56,6 +65,8 @@ def display_chat():
         if isinstance(message, AIMessage):
             with st.chat_message("AI"):
                 st.write(message.content)
+                if "cartographie des parties prenantes" in message.content:
+                    display_chart()
         elif isinstance(message, HumanMessage):
             with st.chat_message("Moi"):
                 st.write(message.content)
@@ -69,7 +80,8 @@ def display_chat():
             st.markdown(user_query)
 
         with st.chat_message("AI"):
-            response = st.write_stream(get_response(user_query, st.session_state.chat_history,format_context(st.session_state['partie_prenante_grouped'],st.session_state['Nom de la marque'])))
-
+            response = st.write_stream(get_response(user_query, st.session_state.chat_history,format_context(st.session_state['pp_grouped'],st.session_state['Nom de la marque'])))
+            if "cartographie des parties prenantes" in message.content:
+                    display_chart()
 
         st.session_state.chat_history.append(AIMessage(content=response))

download_chart.py

@@ -0,0 +1,123 @@
+import streamlit as st
+import plotly.graph_objects as go
+import plotly.express as px
+
+from PIL import Image
+import pdfkit
+import pandas as pd 
+import plotly.io as pio
+import tempfile
+
+
+def construct_plot():
+    # Define data
+    stakeholders = st.session_state['pp_grouped']
+
+    if stakeholders is None or len(stakeholders) == 0:
+        st.error("Aucune partie prenante n'a été définie")
+        return None
+    # Create plot
+    fig = go.Figure()
+
+    # Add category areas
+    fig.add_shape(type="rect", x0=0, y0=50, x1=50, y1=100, fillcolor="lightblue", opacity=0.2, line_width=0)
+    fig.add_shape(type="rect", x0=50, y0=50, x1=100, y1=100, fillcolor="lightyellow", opacity=0.2, line_width=0)
+    fig.add_shape(type="rect", x0=0, y0=0, x1=50, y1=50, fillcolor="lightcoral", opacity=0.2, line_width=0)
+    fig.add_shape(type="rect", x0=50, y0=0, x1=100, y1=50, fillcolor="lightcyan", opacity=0.2, line_width=0)
+
+    # Add category titles
+    fig.add_annotation(x=10, y=90, text="Rendre satisfait", showarrow=False)
+    fig.add_annotation(x=60, y=90, text="Gérer étroitement", showarrow=False)
+    fig.add_annotation(x=10, y=40, text="Suivre de près", showarrow=False)
+    fig.add_annotation(x=60, y=40, text="Tenir informé", showarrow=False)
+
+    x_array = [stakeholder['x'] for stakeholder in stakeholders]
+    y_array = [stakeholder['y'] for stakeholder in stakeholders]
+    name_array = [stakeholder['name'] for stakeholder in stakeholders]
+
+    color_sequence = px.colors.qualitative.Plotly
+    # Add stakeholders to plot
+    for i,stakeholder in enumerate(stakeholders):
+        fig.add_trace(go.Scatter(
+            x=[stakeholder['x']],
+            y=[stakeholder['y']],
+            mode='markers+text',
+            marker=dict(color=color_sequence[i % len(color_sequence)],size=20),
+            textposition="top center",
+            name=stakeholder['name']
+        ))
+
+    # Update layout
+    fig.update_layout(
+        title="Cartographie des parties prenantes",
+        xaxis=dict(title="Influence", range=[0, 100]),
+        yaxis=dict(title="Pouvoir", range=[0, 100]),
+        showlegend=True
+    )
+
+    # Display plot in Streamlit
+    return fig
+
+def save_plot_as_pdf(fig, logo_path, title):
+    st.write("saving plot as pdf")
+
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".png") as tmpfile:
+        fig.write_image("./plot.png")
+        st.write("tmpfile created")
+        image_bytes = pio.to_image(fig, format='png')
+        st.write("image_bytes")
+
+        tmpfile.write(image_bytes)
+        tmpfile.close()
+        plot_image_path = tmpfile.name
+    
+    st.write(plot_image_path)
+
+    html_content = f"""
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>{title}</title>
+        <style>
+            body {{ font-family: Arial, sans-serif; text-align: center; }}
+            .logo {{ width: 100px; margin-top: 20px; }}
+            .title {{ font-size: 24px; margin-top: 20px; }}
+            .plot-image {{ width: 80%; margin-top: 20px; }}
+        </style>
+    </head>
+    <body>
+        {"<img src='" + logo_path + "' class='logo'>" if logo_path else ""}
+        <div class="title">{title}</div>
+        <img src="{plot_image_path}" class="plot-image">
+    </body>
+    </html>
+    """
+    
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as tmpfile:
+        tmpfile.write(html_content.encode('utf-8'))
+        tmpfile.close()
+        html_path = tmpfile.name
+    
+    pdf_path = html_path.replace('.html', '.pdf')
+    st.write(pdf_path)
+    pdfkit.from_file(html_path, pdf_path)
+    return pdf_path
+
+def download_pdf():
+    # Construct plot
+    fig = construct_plot()
+    
+    if fig is None:
+        return None
+    st.write("fig constructed")
+
+    logo_path = "https://static.wixstatic.com/media/d7d3da_b69e03ae99224f7d8b6e358918e60071~mv2.png/v1/crop/x_173,y_0,w_1906,h_938/fill/w_242,h_119,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/BZIIIT_LOGO-HORIZ-COULEUR.png"
+    pdf_title = "Cartographie des parties prenantes"
+    # Button to download PDF
+    pdf_path = save_plot_as_pdf(fig, logo_path, pdf_title)
+
+    st.write("pdf saved")
+    with open(pdf_path, "rb") as pdf_file:
+        st.download_button(label="Download PDF", data=pdf_file, file_name="stakeholder_analysis.pdf")
+

high_chart.py

@@ -0,0 +1,210 @@
+import streamlit as st
+import st_hc as hct
+import download_chart as dc
+
+
+
+# Define the highchart definition
+cd2 = {
+   "chart":{
+      "animation":False
+   },
+   "title":{
+      "text":"Cartographie des parties prenantes"
+   },
+   "tooltip":{
+      "valueDecimals":0
+   },
+   "xAxis":{
+      "title":{
+         "text":"Influence"
+      },
+      "min":0,
+      "max":100,
+      "plotLines":[
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":50,
+            "label":{
+               "rotation":0,
+               "y":290,
+               "style":{
+                  "color":"blue",
+                  "font-size": "20px"
+               },
+               "text":"Tenir informé",
+            },
+            "zIndex":3
+         },
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":50,
+            "label":{
+               "rotation":0,
+               "y":25,
+               "style":{
+                  "color":"orange",
+                  "font-size": "20px"
+               },
+               "text":"Gérer étroitement",
+            },
+            "zIndex":3
+         },
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":0,
+            "label":{
+               "rotation":0,
+               "y":25,
+               "style":{
+                  "color":"green",
+                  "font-size": "20px"
+               },
+               "text":"Rendre satisfait",
+            },
+            "zIndex":3
+         },
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":0,
+            "label":{
+               "rotation":0,
+               "y":290,
+               "style":{
+                  "color":"red",
+                  "font-size": "20px"
+               },
+               "text":"Suivre de près",
+            },
+            "zIndex":3
+         },
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":100,
+            "zIndex":3
+
+         }
+      ]
+   },
+   "yAxis":{
+      "title":{
+         "text":"Pouvoir"
+      },
+      "min":0,
+      "max":100,
+      "plotLines":[
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":50,
+            "zIndex":3
+
+         },
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":100,
+            "zIndex":3
+         },
+         {
+            "color":"gray",
+            "dashStyle":"LongDash",
+            "width":1,
+            "value":0,
+            "zIndex":3
+         }
+      ],
+   },
+   "tooltip":{
+      "headerFormat":"",
+      "pointFormat":"{point.name}",
+      "valueDecimals":0
+   },
+   "series":[
+      {
+         "type":"bubble",
+         "maxSize":50,
+         "cursor":"move",
+         "name":"Influence",
+         "pointformat":"{point.name}",
+         "dragDrop":{
+            "draggableX":True,
+            "draggableY":True,
+            "dragMinY":0,
+            "dragMaxY":100,
+            "dragMinX":0,
+            "dragMaxX":100,
+            "dragPrecisionX":1,
+            "dragPrecisionY":1,
+            "dragSensitivity":0
+         },
+         "data":[],
+         "colorByPoint":True
+      }
+   ],
+   "exporting": {
+        "enabled": True
+   
+   },
+   "legend":{
+      "enabled":False
+   }
+}
+
+
+def construct_data():
+   data = []
+   for i in range(10):
+      object = {
+         "x": 50+i*5,
+         "y": 50,
+         "name": f"Point{i}",
+         
+      }
+      data.append(object)
+   
+   return data
+
+        
+
+
+def test_chart():
+   #The component can render any highchart definition
+   if len(st.session_state['pp_grouped']) == 0:
+      return None
+   points = st.session_state['pp_grouped']
+   cd2["series"][0]["data"] = points
+   chart = hct.streamlit_highcharts(cd2,640) #640 is the chart height
+   # if chart:
+   #    st.session_state['pp_grouped'] = chart
+   
+   emp = st.empty()
+
+   col1, col2, col3 = st.columns([2,2,8])
+
+   if col1.button("Save"):
+      st.session_state['pp_grouped'] = chart.copy()
+      emp.success("Saved")
+      st.experimental_rerun()
+
+   if col2.button("download"):
+      if not chart:
+         st.error("Un truc ne va pas. Veuillez réessayer")
+      else:
+         st.session_state['pp_grouped'] = chart.copy()
+         dc.construct_plot()
+         dc.download_pdf()
+   
+   return chart

partie_prenante_carte.py

@@ -22,6 +22,7 @@ from session import set_partie_prenante
 import os
 from streamlit_vertical_slider import vertical_slider
 from pp_viz import display_viz
+from high_chart import test_chart
 
 load_dotenv()
 
@@ -44,10 +45,6 @@ def get_doc_chunks(docs):
     return docs
     
 
-def disp_test():
-    chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
-    st.scatter_chart(chart_data)
-
 def get_vectorstore_from_docs(doc_chunks):
     embedding = OpenAIEmbeddings(model="text-embedding-3-large")
     vectorstore = FAISS.from_documents(documents=doc_chunks, embedding=embedding)
@@ -84,8 +81,10 @@ def text_to_list(text):
 
 def delete_pp(pps):
     for pp in pps:
-        st.session_state['partie_prenante_grouped'] = st.session_state['partie_prenante_grouped'].drop(st.session_state['partie_prenante_grouped'][st.session_state['partie_prenante_grouped']['partie_prenante'] == pp].index)
-        st.session_state['partie_prenante_grouped'].reset_index()
+        for i in range(len(st.session_state['pp_grouped'])):
+            if st.session_state['pp_grouped'][i]['name'] == pp:
+                del st.session_state['pp_grouped'][i]
+                break
 
 def display_list_urls():
     for index, item in enumerate(st.session_state["urls"]):
@@ -107,7 +106,7 @@ def display_list_urls():
                 st.write(pd.DataFrame(pp, columns=["Partie prenante"]))
         else:
             emp.empty()  # Clear the placeholder if the index exceeds the list
-
+    
 def extract_pp(urls,input_variables):
     template_extraction_PP = '''
     Objectif : identifiez tout les noms de marques qui sont des parties prenantes de la marque suivante pour développer un marketing de coopération (co-op marketing)
@@ -137,7 +136,7 @@ def extract_pp(urls,input_variables):
 
     # version plus poussée a considérer
     # each item in the list is a list with the name of the brand and the similarity percentage
-    #partie_prenante = text_to_list(response.content)
+    # partie_prenante = text_to_list(response.content)
 
     #version simple
     partie_prenante = response.content.replace("- ","").split('\n')
@@ -166,15 +165,21 @@ def disp_vertical_slider(partie_prenante):
             )
             st.write(tst)
 
+def format_pp_add_viz(pp):
+
+    for i in range(len(st.session_state['pp_grouped'])):
+        if st.session_state['pp_grouped'][i]['name'] == pp:
+            return None
+    else:
+        st.session_state['pp_grouped'].append({'name':pp, 'x':50,'y':50 + len(st.session_state['pp_grouped'])*5})
+
 def add_pp(new_pp, default_value=50):
     new_pp = sorted(new_pp)
     new_pp = [item.lower().capitalize() for item in new_pp]
     st.session_state['parties_prenantes'].append(new_pp)
     for pp in new_pp:
-        if pp not in st.session_state['partie_prenante_grouped']['partie_prenante'].values:
-            st.session_state['partie_prenante_grouped'].loc[len(st.session_state['partie_prenante_grouped'])] = [pp, default_value, pp]
-    st.session_state['partie_prenante_grouped'] = st.session_state['partie_prenante_grouped'].sort_values(by='partie_prenante')
-    st.session_state['partie_prenante_grouped'] = st.session_state['partie_prenante_grouped'].reset_index(drop=True)
+        format_pp_add_viz(pp)
+
 
 def complete_and_verify_url(partial_url):
     # Regex pattern for validating a URL
@@ -188,7 +193,7 @@ def complete_and_verify_url(partial_url):
 
     # Complete the URL if it doesn't have http:// or https://
     if not partial_url.startswith(('http://', 'https://')):
-        complete_url = 'http://' + partial_url
+        complete_url = 'https://' + partial_url
     else:
         complete_url = partial_url
 
@@ -205,25 +210,22 @@ def display_pp():
     #check if brand name and description are already set
     if "Nom de la marque" not in st.session_state:
         st.session_state["Nom de la marque"] = ""
-    if "Description de la marque" not in st.session_state:
-        st.session_state["Description de la marque"] = ""
 
     #check if urls and partie prenante are already set
     if "urls" not in st.session_state:
         st.session_state["urls"] = []
     if "parties_prenantes" not in st.session_state:
         st.session_state['parties_prenantes'] = []
-    if "partie_prenante_grouped" not in st.session_state: #servira pour le plot et la cartographie
-        st.session_state['partie_prenante_grouped'] = pd.DataFrame(columns=['partie_prenante', 'pouvoir', 'Code couleur'])
+    if "pp_grouped" not in st.session_state: #servira pour le plot et la cartographie des parties prenantes, regroupe sans doublons
+        st.session_state['pp_grouped'] = []
 
     st.header("Parties prenantes de la marque")
     #set brand name and description
     brand_name = st.text_input("Nom de la marque", st.session_state["Nom de la marque"])
     st.session_state["Nom de la marque"] = brand_name
-    brand_description = st.text_input("Description de la marque", st.session_state["Description de la marque"])
-    st.session_state["Description de la marque"] = brand_description
 
     option = st.radio("Source", ("A partir de votre site web", "A partir de vos documents entreprise"))
+
     #if the user chooses to extract from website
     if option == "A partir de votre site web":
 
@@ -231,11 +233,14 @@ def display_pp():
 
         #if the user clicks on the button
         if st.button("ajouter"):
+
+            #complete and verify the url
             is_valid,url = complete_and_verify_url(url)
             if not is_valid:
                 st.error("URL invalide")
             elif url in st.session_state["urls"] :
                 st.error("URL déjà ajoutée")
+            
             else:
                 # Création de l'expander
                 with st.expander("Cliquez ici pour éditer et voir le document"):
@@ -243,13 +248,14 @@ def display_pp():
                     text_value = st.text_area("Modifier le texte ci-dessous:", value=cleaned_text, height=300)
                     if st.button('Sauvegarder'):
                         st.success("Texte sauvegardé avec succès!")
+                
                 with st.spinner("Processing..."):
 
                     #handle the extraction
-                    input_variables = {"BRAND_NAME": brand_name, "BRAND_DESCRIPTION": brand_description}
+                    input_variables = {"BRAND_NAME": brand_name, "BRAND_DESCRIPTION": ""}
                     partie_prenante = extract_pp([url], input_variables)
 
-                    if "444" in partie_prenante:
+                    if "444" in partie_prenante: #444 is the code for no brand found , chosen
                         st.error("Aucune partie prenante trouvée")
                     else:
                         partie_prenante = sorted(partie_prenante)
@@ -272,10 +278,8 @@ def display_pp():
 
                     # disp_vertical_slider(partie_prenante)
                     # st.altair_chart(c, use_container_width=True)
-    
     display_list_urls()
-    display_viz()
-    st.write(st.session_state["partie_prenante_grouped"])
+    test_chart()
 
                 
 

requirements.txt

@@ -29,4 +29,7 @@ altair[all]
 streamlit-vertical-slider
 streamlit_toggle
 langchain_experimental
-streamlit_draggable_list
+streamlit_draggable_list
+streamlit-highcharts
+pdfkit
+kaleido

st_hc/__init__.py

@@ -0,0 +1,2562 @@
+from pathlib import Path
+from typing import Optional
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+SAMPLE={
+
+    "title": {
+        "text": 'U.S Solar Employment Growth by Job Category, 2010-2020'
+    },
+
+    "subtitle": {
+        "text": 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>'
+    },
+
+    "yAxis": {
+        "title": {
+            "text": 'Number of Employees'
+        }
+    },
+
+    "xAxis": {
+        "accessibility": {
+            "rangeDescription": 'Range: 2010 to 2020'
+        }
+    },
+
+    "legend": {
+        "layout": 'vertical',
+        "align": 'right',
+        "verticalAlign": 'middle'
+    },
+
+    "plotOptions": {
+        "series": {
+            "label": {
+                "connectorAllowed": False
+            },
+            "pointStart": 2010
+        }
+    },
+
+    "series": [{
+        "name": 'Installation & Developers',
+        "data": [43934, 48656, 65165, 81827, 112143, 142383,
+            171533, 165174, 155157, 161454, 154610]
+    }, {
+        "name": 'Manufacturing',
+        "data": [24916, 37941, 29742, 29851, 32490, 30282,
+            38121, 36885, 33726, 34243, 31050]
+    }, {
+        "name": 'Sales & Distribution',
+        "data": [11744, 30000, 16005, 19771, 20185, 24377,
+            32147, 30912, 29243, 29213, 25663]
+    }, {
+        "name": 'Operations & Maintenance',
+        "data": ["null", "null", "null", "null", "null", "null", "null",
+            "null", 11164, 11218, 10077]
+    }, {
+        "name": 'Other',
+        "data": [21908, 5548, 8105, 11248, 8989, 11816, 18274,
+            17300, 13053, 11906, 10073]
+    }],
+
+    "responsive": {
+        "rules": [{
+            "condition": {
+                "maxWidth": 500
+            },
+            "chartOptions": {
+                "legend": {
+                    "layout": 'horizontal',
+                    "align": 'center',
+                    "verticalAlign": 'bottom'
+                }
+            }
+        }]
+    }
+
+}
+SAMPLE2={
+
+    "chart": {
+        "type": 'streamgraph',
+        "marginBottom": 30,
+        "zoomType": 'x'
+    },
+
+    "title": {
+        "floating": True,
+        "align": 'left',
+        "text": 'Winter Olympic Medal Wins'
+    },
+    "subtitle": {
+        "floating": True,
+        "align": 'left',
+        "y": 30,
+        "text": 'Source: <a href="https://www.sports-reference.com/olympics/winter/1924/">sports-reference.com</a>'
+    },
+
+    "xAxis": {
+        "maxPadding": 0,
+        "type": 'category',
+        "crosshair": True,
+        "categories": [
+            '',
+            '1924 Chamonix',
+            '1928 St. Moritz',
+            '1932 Lake Placid',
+            '1936 Garmisch-Partenkirchen',
+            '1940 <i>Cancelled (Sapporo)</i>',
+            '1944 <i>Cancelled (Cortina d\'Ampezzo)</i>',
+            '1948 St. Moritz',
+            '1952 Oslo',
+            '1956 Cortina d\'Ampezzo',
+            '1960 Squaw Valley',
+            '1964 Innsbruck',
+            '1968 Grenoble',
+            '1972 Sapporo',
+            '1976 Innsbruck',
+            '1980 Lake Placid',
+            '1984 Sarajevo',
+            '1988 Calgary',
+            '1992 Albertville',
+            '1994 Lillehammer',
+            '1998 Nagano',
+            '2002 Salt Lake City',
+            '2006 Turin',
+            '2010 Vancouver',
+            '2014 Sochi'
+        ],
+        "labels": {
+            "align": 'left',
+            "reserveSpace": False,
+            "rotation": 270
+        },
+        "lineWidth": 0,
+        "margin": 20,
+        "tickWidth": 0
+    },
+
+    "yAxis": {
+        "visible": False,
+        "startOnTick": False,
+        "endOnTick": False
+    },
+
+    "legend": {
+        "enabled": False
+    },
+
+    "annotations": [{
+        "labels": [{
+            "point": {
+                "x": 5.5,
+                "xAxis": 0,
+                "y": 30,
+                "yAxis": 0
+            },
+            "text": 'Cancelled<br>during<br>World War II'
+        }, {
+            "point": {
+                "x": 18,
+                "xAxis": 0,
+                "y": 90,
+                "yAxis": 0
+            },
+            "text": 'Soviet Union fell,<br>Germany united'
+        }],
+        "labelOptions": {
+            "backgroundColor": 'rgba(255,255,255,0.5)',
+            "borderColor": 'silver'
+        }
+    }],
+
+    "plotOptions": {
+        "series": {
+            "label": {
+                "minFontSize": 5,
+                "maxFontSize": 15,
+                "style": {
+                    "color": 'rgba(255,255,255,0.75)'
+                }
+            },
+            "accessibility": {
+                "exposeAsGroupOnly": True
+            }
+        }
+    },
+    "series": [{
+        "name": "Finland",
+        "data": [
+            0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7,
+            7, 6, 12, 7, 9, 5, 5
+        ]
+    }, {
+        "name": "Austria",
+        "data": [
+            0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10,
+            21, 9, 17, 17, 23, 16, 17
+        ]
+    }, {
+        "name": "Sweden",
+        "data": [
+            0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4,
+            3, 3, 7, 14, 11, 15
+        ]
+    }, {
+        "name": "Norway",
+        "data": [
+            0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10,
+            9, 5, 20, 26, 25, 25, 19, 23, 26
+        ]
+    }, {
+        "name": "U.S.",
+        "data": [
+            0, 4, 6, 12, 4, 0, 0, 9, 11, 7, 10, 7, 7, 8, 10, 12, 8, 6,
+            11, 13, 13, 34, 25, 37, 28
+        ]
+    }, {
+        "name": "East Germany",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 14, 19, 23, 24, 25,
+            0, 0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "West Germany",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 5, 10, 5, 4, 8, 0,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Germany",
+        "data": [
+            0, 0, 1, 2, 6, 0, 0, 0, 7, 2, 8, 9, 0, 0, 0, 0, 0, 0, 26,
+            24, 29, 36, 29, 30, 19
+        ]
+    }, {
+        "name": "Netherlands",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 2, 2, 9, 9, 6, 4, 0, 7, 4,
+            4, 11, 8, 9, 8, 24
+        ]
+    }, {
+        "name": "Italy",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 1, 4, 4, 5, 4, 2, 2, 5, 14,
+            20, 10, 13, 11, 5, 8
+        ]
+    }, {
+        "name": "Canada",
+        "data": [
+            0, 1, 1, 7, 1, 0, 0, 3, 2, 3, 4, 3, 3, 1, 3, 2, 4, 5, 7,
+            13, 15, 17, 24, 26, 25
+        ]
+    }, {
+        "name": "Switzerland",
+        "data": [
+            0, 3, 1, 1, 3, 0, 0, 10, 2, 6, 2, 0, 6, 10, 5, 5, 5, 15,
+            3, 9, 7, 11, 14, 9, 11
+        ]
+    }, {
+        "name": "Great Britain",
+        "data": [
+            0, 4, 1, 0, 3, 0, 0, 2, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0,
+            2, 1, 2, 1, 1, 4
+        ]
+    }, {
+        "name": "France",
+        "data": [
+            0, 3, 1, 1, 1, 0, 0, 5, 1, 0, 3, 7, 9, 3, 1, 1, 3, 2, 9,
+            5, 8, 11, 9, 11, 15
+        ]
+    }, {
+        "name": "Hungary",
+        "data": [
+            0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Unified Team",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Soviet Union",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 21, 25, 13, 16, 27, 22, 25,
+            29, 0, 0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Russia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            23, 18, 13, 22, 15, 33
+        ]
+    }, {
+        "name": "Japan",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 1, 1, 1, 7,
+            5, 10, 2, 1, 5, 8
+        ]
+    }, {
+        "name": "Czechoslovakia",
+        "data": [
+            0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 4, 3, 1, 1, 6, 3, 3,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Poland",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 1, 0, 0, 0, 0, 0,
+            0, 0, 2, 2, 6, 6
+        ]
+    }, {
+        "name": "Spain",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "China",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3,
+            3, 8, 8, 11, 11, 9
+        ]
+    }, {
+        "name": "South Korea",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4,
+            6, 6, 4, 11, 14, 8
+        ]
+    }, {
+        "name": "Czech Republic",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 3, 3, 4, 6, 8
+        ]
+    }, {
+        "name": "Belarus",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            2, 2, 1, 1, 3, 6
+        ]
+    }, {
+        "name": "Kazakhstan",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            3, 2, 0, 0, 1, 1
+        ]
+    }, {
+        "name": "Bulgaria",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,
+            0, 1, 3, 1, 0, 0
+        ]
+    }, {
+        "name": "Denmark",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 1, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Ukraine",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            2, 1, 0, 2, 0, 2
+        ]
+    }, {
+        "name": "Australia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            1, 1, 2, 2, 3, 3
+        ]
+    }, {
+        "name": "Belgium",
+        "data": [
+            0, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 1, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Romania",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Liechtenstein",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 0,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Yugoslavia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Luxembourg",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "New Zealand",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "North Korea",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1,
+            0, 0, 0, 0, 0, 0
+        ]
+    }, {
+        "name": "Slovakia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 1, 3, 1
+        ]
+    }, {
+        "name": "Croatia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 4, 3, 3, 1
+        ]
+    }, {
+        "name": "Slovenia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            3, 0, 1, 0, 3, 8
+        ]
+    }, {
+        "name": "Latvia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 1, 2, 4
+        ]
+    }, {
+        "name": "Estonia",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 3, 3, 1, 0
+        ]
+    }, {
+        "name": "Uzbekistan",
+        "data": [
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            1, 0, 0, 0, 0, 0
+        ]
+    }],
+
+    "exporting": {
+        "sourceWidth": 800,
+        "sourceHeight": 600
+    }
+
+}
+SAMPLE3={
+
+    "chart": {
+        "type": 'bubble',
+        "plotBorderWidth": 1,
+        "zoomType": 'xy'
+    },
+
+    "title": {
+        "text": 'Highcharts bubbles with radial gradient fill'
+    },
+
+    "xAxis": {
+        "gridLineWidth": 1,
+        "accessibility": {
+            "rangeDescription": 'Range: 0 to 100.'
+        }
+    },
+
+    "yAxis": {
+        "startOnTick": False,
+        "endOnTick": False,
+        "accessibility": {
+            "rangeDescription": 'Range: 0 to 100.'
+        }
+    },
+
+    "series": [{
+        "data": [
+            [9, 81, 63],
+            [98, 5, 89],
+            [51, 50, 73],
+            [41, 22, 14],
+            [58, 24, 20],
+            [78, 37, 34],
+            [55, 56, 53],
+            [18, 45, 70],
+            [42, 44, 28],
+            [3, 52, 59],
+            [31, 18, 97],
+            [79, 91, 63],
+            [93, 23, 23],
+            [44, 83, 22]
+        ],
+        "marker": {
+            "fillColor": {
+                "radialGradient": { "cx": 0.4, "cy": 0.3, "r": 0.7 },
+                "stops": [
+                    [0, 'rgba(255,255,255,0.5)'],
+                    [1, 'rgba(124,181,236,0.5)']
+                ]
+            }
+        }
+    }, {
+        "data": [
+            [42, 38, 20],
+            [6, 18, 1],
+            [1, 93, 55],
+            [57, 2, 90],
+            [80, 76, 22],
+            [11, 74, 96],
+            [88, 56, 10],
+            [30, 47, 49],
+            [57, 62, 98],
+            [4, 16, 16],
+            [46, 10, 11],
+            [22, 87, 89],
+            [57, 91, 82],
+            [45, 15, 98]
+        ],
+        "marker": {
+            "fillColor": {
+                "radialGradient": { "cx": 0.4, "cy": 0.3, "r": 0.7 },
+                "stops": [
+                    [0, 'rgba(255,255,255,0.5)'],
+                    [1, 'rgba(67,67,72,0.5)']
+                ]
+            }
+        }
+    }]
+
+}
+SAMPLE4={
+
+   "chart":{
+      "type":"packedbubble",
+      "height":"100%"
+   },
+   "title":{
+      "text":"Carbon emissions around the world (2014)"
+   },
+   "tooltip":{
+      "useHTML":True,
+      "pointFormat":"<b>{point.name}:</b> {point.value}m CO<sub>2</sub>"
+   },
+   "plotOptions":{
+      "packedbubble":{
+         "minSize":"20%",
+         "maxSize":"100%",
+         "zMin":0,
+         "zMax":1000,
+         "layoutAlgorithm":{
+            "gravitationalConstant":0.05,
+            "splitSeries":True,
+            "seriesInteraction":False,
+            "dragBetweenSeries":True,
+            "parentNodeLimit":True
+         },
+         "dataLabels":{
+            "enabled":True,
+            "format":"{point.name}",
+            "filter":{
+               "property":"y",
+               "operator":">",
+               "value":250
+            },
+            "style":{
+               "color":"black",
+               "textOutline":"none",
+               "fontWeight":"normal"
+            }
+         }
+      }
+   },
+   "series":[
+      {
+         "name":"Europe",
+         "data":[
+            {
+               "name":"Germany",
+               "value":767.1
+            },
+            {
+               "name":"Croatia",
+               "value":20.7
+            },
+            {
+               "name":"Belgium",
+               "value":97.2
+            },
+            {
+               "name":"Czech Republic",
+               "value":111.7
+            },
+            {
+               "name":"Netherlands",
+               "value":158.1
+            },
+            {
+               "name":"Spain",
+               "value":241.6
+            },
+            {
+               "name":"Ukraine",
+               "value":249.1
+            },
+            {
+               "name":"Poland",
+               "value":298.1
+            },
+            {
+               "name":"France",
+               "value":323.7
+            },
+            {
+               "name":"Romania",
+               "value":78.3
+            },
+            {
+               "name":"United Kingdom",
+               "value":415.4
+            },
+            {
+               "name":"Turkey",
+               "value":353.2
+            },
+            {
+               "name":"Italy",
+               "value":337.6
+            },
+            {
+               "name":"Greece",
+               "value":71.1
+            },
+            {
+               "name":"Austria",
+               "value":69.8
+            },
+            {
+               "name":"Belarus",
+               "value":67.7
+            },
+            {
+               "name":"Serbia",
+               "value":59.3
+            },
+            {
+               "name":"Finland",
+               "value":54.8
+            },
+            {
+               "name":"Bulgaria",
+               "value":51.2
+            },
+            {
+               "name":"Portugal",
+               "value":48.3
+            },
+            {
+               "name":"Norway",
+               "value":44.4
+            },
+            {
+               "name":"Sweden",
+               "value":44.3
+            },
+            {
+               "name":"Hungary",
+               "value":43.7
+            },
+            {
+               "name":"Switzerland",
+               "value":40.2
+            },
+            {
+               "name":"Denmark",
+               "value":40
+            },
+            {
+               "name":"Slovakia",
+               "value":34.7
+            },
+            {
+               "name":"Ireland",
+               "value":34.6
+            },
+            {
+               "name":"Croatia",
+               "value":20.7
+            },
+            {
+               "name":"Estonia",
+               "value":19.4
+            },
+            {
+               "name":"Slovenia",
+               "value":16.7
+            },
+            {
+               "name":"Lithuania",
+               "value":12.3
+            },
+            {
+               "name":"Luxembourg",
+               "value":10.4
+            },
+            {
+               "name":"Macedonia",
+               "value":9.5
+            },
+            {
+               "name":"Moldova",
+               "value":7.8
+            },
+            {
+               "name":"Latvia",
+               "value":7.5
+            },
+            {
+               "name":"Cyprus",
+               "value":7.2
+            }
+         ]
+      },
+      {
+         "name":"Africa",
+         "data":[
+            {
+               "name":"Senegal",
+               "value":8.2
+            },
+            {
+               "name":"Cameroon",
+               "value":9.2
+            },
+            {
+               "name":"Zimbabwe",
+               "value":13.1
+            },
+            {
+               "name":"Ghana",
+               "value":14.1
+            },
+            {
+               "name":"Kenya",
+               "value":14.1
+            },
+            {
+               "name":"Sudan",
+               "value":17.3
+            },
+            {
+               "name":"Tunisia",
+               "value":24.3
+            },
+            {
+               "name":"Angola",
+               "value":25
+            },
+            {
+               "name":"Libya",
+               "value":50.6
+            },
+            {
+               "name":"Ivory Coast",
+               "value":7.3
+            },
+            {
+               "name":"Morocco",
+               "value":60.7
+            },
+            {
+               "name":"Ethiopia",
+               "value":8.9
+            },
+            {
+               "name":"United Republic of Tanzania",
+               "value":9.1
+            },
+            {
+               "name":"Nigeria",
+               "value":93.9
+            },
+            {
+               "name":"South Africa",
+               "value":392.7
+            },
+            {
+               "name":"Egypt",
+               "value":225.1
+            },
+            {
+               "name":"Algeria",
+               "value":141.5
+            }
+         ]
+      },
+      {
+         "name":"Oceania",
+         "data":[
+            {
+               "name":"Australia",
+               "value":409.4
+            },
+            {
+               "name":"New Zealand",
+               "value":34.1
+            },
+            {
+               "name":"Papua New Guinea",
+               "value":7.1
+            }
+         ]
+      },
+      {
+         "name":"North America",
+         "data":[
+            {
+               "name":"Costa Rica",
+               "value":7.6
+            },
+            {
+               "name":"Honduras",
+               "value":8.4
+            },
+            {
+               "name":"Jamaica",
+               "value":8.3
+            },
+            {
+               "name":"Panama",
+               "value":10.2
+            },
+            {
+               "name":"Guatemala",
+               "value":12
+            },
+            {
+               "name":"Dominican Republic",
+               "value":23.4
+            },
+            {
+               "name":"Cuba",
+               "value":30.2
+            },
+            {
+               "name":"USA",
+               "value":5334.5
+            },
+            {
+               "name":"Canada",
+               "value":566
+            },
+            {
+               "name":"Mexico",
+               "value":456.3
+            }
+         ]
+      },
+      {
+         "name":"South America",
+         "data":[
+            {
+               "name":"El Salvador",
+               "value":7.2
+            },
+            {
+               "name":"Uruguay",
+               "value":8.1
+            },
+            {
+               "name":"Bolivia",
+               "value":17.8
+            },
+            {
+               "name":"Trinidad and Tobago",
+               "value":34
+            },
+            {
+               "name":"Ecuador",
+               "value":43
+            },
+            {
+               "name":"Chile",
+               "value":78.6
+            },
+            {
+               "name":"Peru",
+               "value":52
+            },
+            {
+               "name":"Colombia",
+               "value":74.1
+            },
+            {
+               "name":"Brazil",
+               "value":501.1
+            },
+            {
+               "name":"Argentina",
+               "value":199
+            },
+            {
+               "name":"Venezuela",
+               "value":195.2
+            }
+         ]
+      },
+      {
+         "name":"Asia",
+         "data":[
+            {
+               "name":"Nepal",
+               "value":6.5
+            },
+            {
+               "name":"Georgia",
+               "value":6.5
+            },
+            {
+               "name":"Brunei Darussalam",
+               "value":7.4
+            },
+            {
+               "name":"Kyrgyzstan",
+               "value":7.4
+            },
+            {
+               "name":"Afghanistan",
+               "value":7.9
+            },
+            {
+               "name":"Myanmar",
+               "value":9.1
+            },
+            {
+               "name":"Mongolia",
+               "value":14.7
+            },
+            {
+               "name":"Sri Lanka",
+               "value":16.6
+            },
+            {
+               "name":"Bahrain",
+               "value":20.5
+            },
+            {
+               "name":"Yemen",
+               "value":22.6
+            },
+            {
+               "name":"Jordan",
+               "value":22.3
+            },
+            {
+               "name":"Lebanon",
+               "value":21.1
+            },
+            {
+               "name":"Azerbaijan",
+               "value":31.7
+            },
+            {
+               "name":"Singapore",
+               "value":47.8
+            },
+            {
+               "name":"Hong Kong",
+               "value":49.9
+            },
+            {
+               "name":"Syria",
+               "value":52.7
+            },
+            {
+               "name":"DPR Korea",
+               "value":59.9
+            },
+            {
+               "name":"Israel",
+               "value":64.8
+            },
+            {
+               "name":"Turkmenistan",
+               "value":70.6
+            },
+            {
+               "name":"Oman",
+               "value":74.3
+            },
+            {
+               "name":"Qatar",
+               "value":88.8
+            },
+            {
+               "name":"Philippines",
+               "value":96.9
+            },
+            {
+               "name":"Kuwait",
+               "value":98.6
+            },
+            {
+               "name":"Uzbekistan",
+               "value":122.6
+            },
+            {
+               "name":"Iraq",
+               "value":139.9
+            },
+            {
+               "name":"Pakistan",
+               "value":158.1
+            },
+            {
+               "name":"Vietnam",
+               "value":190.2
+            },
+            {
+               "name":"United Arab Emirates",
+               "value":201.1
+            },
+            {
+               "name":"Malaysia",
+               "value":227.5
+            },
+            {
+               "name":"Kazakhstan",
+               "value":236.2
+            },
+            {
+               "name":"Thailand",
+               "value":272
+            },
+            {
+               "name":"Taiwan",
+               "value":276.7
+            },
+            {
+               "name":"Indonesia",
+               "value":453
+            },
+            {
+               "name":"Saudi Arabia",
+               "value":494.8
+            },
+            {
+               "name":"Japan",
+               "value":1278.9
+            },
+            {
+               "name":"China",
+               "value":10540.8
+            },
+            {
+               "name":"India",
+               "value":2341.9
+            },
+            {
+               "name":"Russia",
+               "value":1766.4
+            },
+            {
+               "name":"Iran",
+               "value":618.2
+            },
+            {
+               "name":"Korea",
+               "value":610.1
+            }
+         ]
+      }
+   ]
+}
+SAMPLE5={
+   "chart":{
+      "type":"column"
+   },
+   "title":{
+      "align":"left",
+      "text":"Browser market shares. January, 2022"
+   },
+   "subtitle":{
+      "align":"left",
+      "text":"Click the columns to view versions. Source: <a href=\"http://statcounter.com\" target=\"_blank\">statcounter.com</a>"
+   },
+   "accessibility":{
+      "announceNewData":{
+         "enabled":True
+      }
+   },
+   "xAxis":{
+      "type":"category"
+   },
+   "yAxis":{
+      "title":{
+         "text":"Total percent market share"
+      }
+   },
+   "legend":{
+      "enabled":False
+   },
+   "plotOptions":{
+      "series":{
+         "borderWidth":0,
+         "dataLabels":{
+            "enabled":True,
+            "format":"{point.y:.1f}%"
+         }
+      }
+   },
+   "tooltip":{
+      "headerFormat":"<span style=\"font-size:11px\">{series.name}</span><br>",
+      "pointFormat":"<span style=\"color:{point.color}\">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>"
+   },
+   "series":[
+      {
+         "name":"Browsers",
+         "colorByPoint":True,
+         "data":[
+            {
+               "name":"Chrome",
+               "y":63.06,
+               "drilldown":"Chrome"
+            },
+            {
+               "name":"Safari",
+               "y":19.84,
+               "drilldown":"Safari"
+            },
+            {
+               "name":"Firefox",
+               "y":4.18,
+               "drilldown":"Firefox"
+            },
+            {
+               "name":"Edge",
+               "y":4.12,
+               "drilldown":"Edge"
+            },
+            {
+               "name":"Opera",
+               "y":2.33,
+               "drilldown":"Opera"
+            },
+            {
+               "name":"Internet Explorer",
+               "y":0.45,
+               "drilldown":"Internet Explorer"
+            },
+            {
+               "name":"Other",
+               "y":1.582,
+               "drilldown":"null"
+            }
+         ]
+      }
+   ],
+   "drilldown":{
+      "breadcrumbs":{
+         "position":{
+            "align":"right"
+         }
+      },
+      "series":[
+         {
+            "name":"Chrome",
+            "id":"Chrome",
+            "data":[
+               [
+                  "v65.0",
+                  0.1
+               ],
+               [
+                  "v64.0",
+                  1.3
+               ],
+               [
+                  "v63.0",
+                  53.02
+               ],
+               [
+                  "v62.0",
+                  1.4
+               ],
+               [
+                  "v61.0",
+                  0.88
+               ],
+               [
+                  "v60.0",
+                  0.56
+               ],
+               [
+                  "v59.0",
+                  0.45
+               ],
+               [
+                  "v58.0",
+                  0.49
+               ],
+               [
+                  "v57.0",
+                  0.32
+               ],
+               [
+                  "v56.0",
+                  0.29
+               ],
+               [
+                  "v55.0",
+                  0.79
+               ],
+               [
+                  "v54.0",
+                  0.18
+               ],
+               [
+                  "v51.0",
+                  0.13
+               ],
+               [
+                  "v49.0",
+                  2.16
+               ],
+               [
+                  "v48.0",
+                  0.13
+               ],
+               [
+                  "v47.0",
+                  0.11
+               ],
+               [
+                  "v43.0",
+                  0.17
+               ],
+               [
+                  "v29.0",
+                  0.26
+               ]
+            ]
+         },
+         {
+            "name":"Firefox",
+            "id":"Firefox",
+            "data":[
+               [
+                  "v58.0",
+                  1.02
+               ],
+               [
+                  "v57.0",
+                  7.36
+               ],
+               [
+                  "v56.0",
+                  0.35
+               ],
+               [
+                  "v55.0",
+                  0.11
+               ],
+               [
+                  "v54.0",
+                  0.1
+               ],
+               [
+                  "v52.0",
+                  0.95
+               ],
+               [
+                  "v51.0",
+                  0.15
+               ],
+               [
+                  "v50.0",
+                  0.1
+               ],
+               [
+                  "v48.0",
+                  0.31
+               ],
+               [
+                  "v47.0",
+                  0.12
+               ]
+            ]
+         },
+         {
+            "name":"Internet Explorer",
+            "id":"Internet Explorer",
+            "data":[
+               [
+                  "v11.0",
+                  6.2
+               ],
+               [
+                  "v10.0",
+                  0.29
+               ],
+               [
+                  "v9.0",
+                  0.27
+               ],
+               [
+                  "v8.0",
+                  0.47
+               ]
+            ]
+         },
+         {
+            "name":"Safari",
+            "id":"Safari",
+            "data":[
+               [
+                  "v11.0",
+                  3.39
+               ],
+               [
+                  "v10.1",
+                  0.96
+               ],
+               [
+                  "v10.0",
+                  0.36
+               ],
+               [
+                  "v9.1",
+                  0.54
+               ],
+               [
+                  "v9.0",
+                  0.13
+               ],
+               [
+                  "v5.1",
+                  0.2
+               ]
+            ]
+         },
+         {
+            "name":"Edge",
+            "id":"Edge",
+            "data":[
+               [
+                  "v16",
+                  2.6
+               ],
+               [
+                  "v15",
+                  0.92
+               ],
+               [
+                  "v14",
+                  0.4
+               ],
+               [
+                  "v13",
+                  0.1
+               ]
+            ]
+         },
+         {
+            "name":"Opera",
+            "id":"Opera",
+            "data":[
+               [
+                  "v50.0",
+                  0.96
+               ],
+               [
+                  "v49.0",
+                  0.82
+               ],
+               [
+                  "v12.1",
+                  0.14
+               ]
+            ]
+         }
+      ]
+   }
+}
+SAMPLE6={
+   "chart":{
+      "type":"tilemap",
+      "inverted":True,
+      "height":"80%"
+   },
+   "accessibility":{
+      "description":"A tile map represents the states of the USA by population in 2016. The hexagonal tiles are positioned to geographically echo the map of the USA. A color-coded legend states the population levels as below 1 million (beige), 1 to 5 million (orange), 5 to 20 million (pink) and above 20 million (hot pink). The chart is interactive, and the individual state data points are displayed upon hovering. Three states have a population of above 20 million: California (39.3 million), Texas (27.9 million) and Florida (20.6 million). The northern US region from Massachusetts in the Northwest to Illinois in the Midwest contains the highest concentration of states with a population of 5 to 20 million people. The southern US region from South Carolina in the Southeast to New Mexico in the Southwest contains the highest concentration of states with a population of 1 to 5 million people. 6 states have a population of less than 1 million people; these include Alaska, Delaware, Wyoming, North Dakota, South Dakota and Vermont. The state with the lowest population is Wyoming in the Northwest with 584,153 people.",
+      "screenReaderSection":{
+         "beforeChartFormat":"<h5>{chartTitle}</h5>""+""<div>{chartSubtitle}</div>""+""<div>{chartLongdesc}</div>""+""<div>{viewTableButton}</div>"
+      },
+      "point":{
+         "valueDescriptionFormat":"{index}. {xDescription}, {point.value}."
+      }
+   },
+   "title":{
+      "text":"U.S. states by population in 2016"
+   },
+   "subtitle":{
+      "text":"Source:<a href=\"https://simple.wikipedia.org/wiki/List_of_U.S._states_by_population\">Wikipedia</a>"
+   },
+   "xAxis":{
+      "visible":False
+   },
+   "yAxis":{
+      "visible":False
+   },
+   "colorAxis":{
+      "dataClasses":[
+         {
+            "from":0,
+            "to":1000000,
+            "color":"#F9EDB3",
+            "name":"< 1M"
+         },
+         {
+            "from":1000000,
+            "to":5000000,
+            "color":"#FFC428",
+            "name":"1M - 5M"
+         },
+         {
+            "from":5000000,
+            "to":20000000,
+            "color":"#FF7987",
+            "name":"5M - 20M"
+         },
+         {
+            "from":20000000,
+            "color":"#FF2371",
+            "name":"> 20M"
+         }
+      ]
+   },
+   "tooltip":{
+      "headerFormat":"",
+      "pointFormat":"The population of <b> {point.name}</b> is <b>{point.value}</b>"
+   },
+   "plotOptions":{
+      "series":{
+         "dataLabels":{
+            "enabled":True,
+            "format":"{point.hc-a2}",
+            "color":"#000000",
+            "style":{
+               "textOutline":False
+            }
+         }
+      }
+   },
+   "series":[
+      {
+         "name":"",
+         "data":[
+            {
+               "hc-a2":"AL",
+               "name":"Alabama",
+               "region":"South",
+               "x":6,
+               "y":7,
+               "value":4849377
+            },
+            {
+               "hc-a2":"AK",
+               "name":"Alaska",
+               "region":"West",
+               "x":0,
+               "y":0,
+               "value":737732
+            },
+            {
+               "hc-a2":"AZ",
+               "name":"Arizona",
+               "region":"West",
+               "x":5,
+               "y":3,
+               "value":6745408
+            },
+            {
+               "hc-a2":"AR",
+               "name":"Arkansas",
+               "region":"South",
+               "x":5,
+               "y":6,
+               "value":2994079
+            },
+            {
+               "hc-a2":"CA",
+               "name":"California",
+               "region":"West",
+               "x":5,
+               "y":2,
+               "value":39250017
+            },
+            {
+               "hc-a2":"CO",
+               "name":"Colorado",
+               "region":"West",
+               "x":4,
+               "y":3,
+               "value":5540545
+            },
+            {
+               "hc-a2":"CT",
+               "name":"Connecticut",
+               "region":"Northeast",
+               "x":3,
+               "y":11,
+               "value":3596677
+            },
+            {
+               "hc-a2":"DE",
+               "name":"Delaware",
+               "region":"South",
+               "x":4,
+               "y":9,
+               "value":935614
+            },
+            {
+               "hc-a2":"DC",
+               "name":"District of Columbia",
+               "region":"South",
+               "x":4,
+               "y":10,
+               "value":7288000
+            },
+            {
+               "hc-a2":"FL",
+               "name":"Florida",
+               "region":"South",
+               "x":8,
+               "y":8,
+               "value":20612439
+            },
+            {
+               "hc-a2":"GA",
+               "name":"Georgia",
+               "region":"South",
+               "x":7,
+               "y":8,
+               "value":10310371
+            },
+            {
+               "hc-a2":"HI",
+               "name":"Hawaii",
+               "region":"West",
+               "x":8,
+               "y":0,
+               "value":1419561
+            },
+            {
+               "hc-a2":"ID",
+               "name":"Idaho",
+               "region":"West",
+               "x":3,
+               "y":2,
+               "value":1634464
+            },
+            {
+               "hc-a2":"IL",
+               "name":"Illinois",
+               "region":"Midwest",
+               "x":3,
+               "y":6,
+               "value":12801539
+            },
+            {
+               "hc-a2":"IN",
+               "name":"Indiana",
+               "region":"Midwest",
+               "x":3,
+               "y":7,
+               "value":6596855
+            },
+            {
+               "hc-a2":"IA",
+               "name":"Iowa",
+               "region":"Midwest",
+               "x":3,
+               "y":5,
+               "value":3107126
+            },
+            {
+               "hc-a2":"KS",
+               "name":"Kansas",
+               "region":"Midwest",
+               "x":5,
+               "y":5,
+               "value":2904021
+            },
+            {
+               "hc-a2":"KY",
+               "name":"Kentucky",
+               "region":"South",
+               "x":4,
+               "y":6,
+               "value":4413457
+            },
+            {
+               "hc-a2":"LA",
+               "name":"Louisiana",
+               "region":"South",
+               "x":6,
+               "y":5,
+               "value":4649676
+            },
+            {
+               "hc-a2":"ME",
+               "name":"Maine",
+               "region":"Northeast",
+               "x":0,
+               "y":11,
+               "value":1330089
+            },
+            {
+               "hc-a2":"MD",
+               "name":"Maryland",
+               "region":"South",
+               "x":4,
+               "y":8,
+               "value":6016447
+            },
+            {
+               "hc-a2":"MA",
+               "name":"Massachusetts",
+               "region":"Northeast",
+               "x":2,
+               "y":10,
+               "value":6811779
+            },
+            {
+               "hc-a2":"MI",
+               "name":"Michigan",
+               "region":"Midwest",
+               "x":2,
+               "y":7,
+               "value":9928301
+            },
+            {
+               "hc-a2":"MN",
+               "name":"Minnesota",
+               "region":"Midwest",
+               "x":2,
+               "y":4,
+               "value":5519952
+            },
+            {
+               "hc-a2":"MS",
+               "name":"Mississippi",
+               "region":"South",
+               "x":6,
+               "y":6,
+               "value":2984926
+            },
+            {
+               "hc-a2":"MO",
+               "name":"Missouri",
+               "region":"Midwest",
+               "x":4,
+               "y":5,
+               "value":6093000
+            },
+            {
+               "hc-a2":"MT",
+               "name":"Montana",
+               "region":"West",
+               "x":2,
+               "y":2,
+               "value":1023579
+            },
+            {
+               "hc-a2":"NE",
+               "name":"Nebraska",
+               "region":"Midwest",
+               "x":4,
+               "y":4,
+               "value":1881503
+            },
+            {
+               "hc-a2":"NV",
+               "name":"Nevada",
+               "region":"West",
+               "x":4,
+               "y":2,
+               "value":2839099
+            },
+            {
+               "hc-a2":"NH",
+               "name":"New Hampshire",
+               "region":"Northeast",
+               "x":1,
+               "y":11,
+               "value":1326813
+            },
+            {
+               "hc-a2":"NJ",
+               "name":"New Jersey",
+               "region":"Northeast",
+               "x":3,
+               "y":10,
+               "value":8944469
+            },
+            {
+               "hc-a2":"NM",
+               "name":"New Mexico",
+               "region":"West",
+               "x":6,
+               "y":3,
+               "value":2085572
+            },
+            {
+               "hc-a2":"NY",
+               "name":"New York",
+               "region":"Northeast",
+               "x":2,
+               "y":9,
+               "value":19745289
+            },
+            {
+               "hc-a2":"NC",
+               "name":"North Carolina",
+               "region":"South",
+               "x":5,
+               "y":9,
+               "value":10146788
+            },
+            {
+               "hc-a2":"ND",
+               "name":"North Dakota",
+               "region":"Midwest",
+               "x":2,
+               "y":3,
+               "value":739482
+            },
+            {
+               "hc-a2":"OH",
+               "name":"Ohio",
+               "region":"Midwest",
+               "x":3,
+               "y":8,
+               "value":11614373
+            },
+            {
+               "hc-a2":"OK",
+               "name":"Oklahoma",
+               "region":"South",
+               "x":6,
+               "y":4,
+               "value":3878051
+            },
+            {
+               "hc-a2":"OR",
+               "name":"Oregon",
+               "region":"West",
+               "x":4,
+               "y":1,
+               "value":3970239
+            },
+            {
+               "hc-a2":"PA",
+               "name":"Pennsylvania",
+               "region":"Northeast",
+               "x":3,
+               "y":9,
+               "value":12784227
+            },
+            {
+               "hc-a2":"RI",
+               "name":"Rhode Island",
+               "region":"Northeast",
+               "x":2,
+               "y":11,
+               "value":1055173
+            },
+            {
+               "hc-a2":"SC",
+               "name":"South Carolina",
+               "region":"South",
+               "x":6,
+               "y":8,
+               "value":4832482
+            },
+            {
+               "hc-a2":"SD",
+               "name":"South Dakota",
+               "region":"Midwest",
+               "x":3,
+               "y":4,
+               "value":853175
+            },
+            {
+               "hc-a2":"TN",
+               "name":"Tennessee",
+               "region":"South",
+               "x":5,
+               "y":7,
+               "value":6651194
+            },
+            {
+               "hc-a2":"TX",
+               "name":"Texas",
+               "region":"South",
+               "x":7,
+               "y":4,
+               "value":27862596
+            },
+            {
+               "hc-a2":"UT",
+               "name":"Utah",
+               "region":"West",
+               "x":5,
+               "y":4,
+               "value":2942902
+            },
+            {
+               "hc-a2":"VT",
+               "name":"Vermont",
+               "region":"Northeast",
+               "x":1,
+               "y":10,
+               "value":626011
+            },
+            {
+               "hc-a2":"VA",
+               "name":"Virginia",
+               "region":"South",
+               "x":5,
+               "y":8,
+               "value":8411808
+            },
+            {
+               "hc-a2":"WA",
+               "name":"Washington",
+               "region":"West",
+               "x":2,
+               "y":1,
+               "value":7288000
+            },
+            {
+               "hc-a2":"WV",
+               "name":"West Virginia",
+               "region":"South",
+               "x":4,
+               "y":7,
+               "value":1850326
+            },
+            {
+               "hc-a2":"WI",
+               "name":"Wisconsin",
+               "region":"Midwest",
+               "x":2,
+               "y":5,
+               "value":5778708
+            },
+            {
+               "hc-a2":"WY",
+               "name":"Wyoming",
+               "region":"West",
+               "x":3,
+               "y":3,
+               "value":584153
+            }
+         ]
+      }
+   ]
+}
+SAMPLE7={
+   "chart":{
+      "type":"pie"
+   },
+   "title":{
+      "text":"Browser market shares. January, 2022"
+   },
+   "subtitle":{
+      "text":"Click the slices to view versions. Source: <a href=\"http://statcounter.com\" target=\"_blank\">statcounter.com</a>"
+   },
+   "accessibility":{
+      "announceNewData":{
+         "enabled":True
+      },
+      "point":{
+         "valueSuffix":"%"
+      }
+   },
+   "plotOptions":{
+      "series":{
+         "dataLabels":{
+            "enabled":True,
+            "format":"{point.name}: {point.y:.1f}%"
+         }
+      }
+   },
+   "tooltip":{
+      "headerFormat":"<span style=\"font-size:11px\">{series.name}</span><br>",
+      "pointFormat":"<span style=\"color:{point.color}\">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>"
+   },
+   "series":[
+      {
+         "name":"Browsers",
+         "colorByPoint":True,
+         "data":[
+            {
+               "name":"Chrome",
+               "y":61.04,
+               "drilldown":"Chrome"
+            },
+            {
+               "name":"Safari",
+               "y":9.47,
+               "drilldown":"Safari"
+            },
+            {
+               "name":"Edge",
+               "y":9.32,
+               "drilldown":"Edge"
+            },
+            {
+               "name":"Firefox",
+               "y":8.15,
+               "drilldown":"Firefox"
+            },
+            {
+               "name":"Other",
+               "y":11.02,
+               "drilldown":"null"
+            }
+         ]
+      }
+   ],
+   "drilldown":{
+      "series":[
+         {
+            "name":"Chrome",
+            "id":"Chrome",
+            "data":[
+               [
+                  "v97.0",
+                  36.89
+               ],
+               [
+                  "v96.0",
+                  18.16
+               ],
+               [
+                  "v95.0",
+                  0.54
+               ],
+               [
+                  "v94.0",
+                  0.7
+               ],
+               [
+                  "v93.0",
+                  0.8
+               ],
+               [
+                  "v92.0",
+                  0.41
+               ],
+               [
+                  "v91.0",
+                  0.31
+               ],
+               [
+                  "v90.0",
+                  0.13
+               ],
+               [
+                  "v89.0",
+                  0.14
+               ],
+               [
+                  "v88.0",
+                  0.1
+               ],
+               [
+                  "v87.0",
+                  0.35
+               ],
+               [
+                  "v86.0",
+                  0.17
+               ],
+               [
+                  "v85.0",
+                  0.18
+               ],
+               [
+                  "v84.0",
+                  0.17
+               ],
+               [
+                  "v83.0",
+                  0.21
+               ],
+               [
+                  "v81.0",
+                  0.1
+               ],
+               [
+                  "v80.0",
+                  0.16
+               ],
+               [
+                  "v79.0",
+                  0.43
+               ],
+               [
+                  "v78.0",
+                  0.11
+               ],
+               [
+                  "v76.0",
+                  0.16
+               ],
+               [
+                  "v75.0",
+                  0.15
+               ],
+               [
+                  "v72.0",
+                  0.14
+               ],
+               [
+                  "v70.0",
+                  0.11
+               ],
+               [
+                  "v69.0",
+                  0.13
+               ],
+               [
+                  "v56.0",
+                  0.12
+               ],
+               [
+                  "v49.0",
+                  0.17
+               ]
+            ]
+         },
+         {
+            "name":"Safari",
+            "id":"Safari",
+            "data":[
+               [
+                  "v15.3",
+                  0.1
+               ],
+               [
+                  "v15.2",
+                  2.01
+               ],
+               [
+                  "v15.1",
+                  2.29
+               ],
+               [
+                  "v15.0",
+                  0.49
+               ],
+               [
+                  "v14.1",
+                  2.48
+               ],
+               [
+                  "v14.0",
+                  0.64
+               ],
+               [
+                  "v13.1",
+                  1.17
+               ],
+               [
+                  "v13.0",
+                  0.13
+               ],
+               [
+                  "v12.1",
+                  0.16
+               ]
+            ]
+         },
+         {
+            "name":"Edge",
+            "id":"Edge",
+            "data":[
+               [
+                  "v97",
+                  6.62
+               ],
+               [
+                  "v96",
+                  2.55
+               ],
+               [
+                  "v95",
+                  0.15
+               ]
+            ]
+         },
+         {
+            "name":"Firefox",
+            "id":"Firefox",
+            "data":[
+               [
+                  "v96.0",
+                  4.17
+               ],
+               [
+                  "v95.0",
+                  3.33
+               ],
+               [
+                  "v94.0",
+                  0.11
+               ],
+               [
+                  "v91.0",
+                  0.23
+               ],
+               [
+                  "v78.0",
+                  0.16
+               ],
+               [
+                  "v52.0",
+                  0.15
+               ]
+            ]
+         }
+      ]
+   }
+}
+SAMPLE8={
+   "title":{
+      "text":"Sales of petroleum products March, Norway",
+      "align":"left"
+   },
+   "xAxis":{
+      "categories":[
+         "Jet fuel",
+         "Duty-free diesel",
+         "Petrol",
+         "Diesel",
+         "Gas oil"
+      ]
+   },
+   "yAxis":{
+      "title":{
+         "text":"Million liter"
+      }
+   },
+   "labels":{
+      "items":[
+         {
+            "html":"Total liter",
+            "style":{
+               "left":"50px",
+               "top":"18px",
+               "color":"black"
+            }
+         }
+      ]
+   },
+   "series":[
+      {
+         "type":"column",
+         "name":"2020",
+         "data":[
+            59,
+            83,
+            65,
+            228,
+            184
+         ]
+      },
+      {
+         "type":"column",
+         "name":"2021",
+         "data":[
+            24,
+            79,
+            72,
+            240,
+            167
+         ]
+      },
+      {
+         "type":"column",
+         "name":"2022",
+         "data":[
+            58,
+            88,
+            75,
+            250,
+            176
+         ]
+      },
+      {
+         "type":"spline",
+         "name":"Average",
+         "data":[
+            47,
+            83.33,
+            70.66,
+            239.33,
+            175.66
+         ],
+         "marker":{
+            "lineWidth":2,
+            "fillColor":"black",
+         }
+      },
+      {
+         "type":"pie",
+         "name":"Liter",
+         "data":[
+            {
+               "name":"2020",
+               "y":619,
+               "color": "#7cb4ec"
+               
+            },
+            {
+               "name":"2021",
+               "y":586,
+               "color": "#434348"
+            },
+            {
+               "name":"2022",
+               "y":647,
+               "color":"#90ed7d"
+            }
+         ],
+         "center":[
+            80,
+            70
+         ],
+         "size":100,
+         "showInLegend":False,
+         "dataLabels":{
+            "enabled":False
+         }
+      }
+    ]
+}
+SAMPLE9={
+   "chart":{
+      "type":"solidgauge",
+      "height":"90%"
+   },
+   "title":{
+      "text":"Activity",
+      "style":{
+         "fontSize":"24px"
+      }
+   },
+   "tooltip":{
+      "borderWidth":0,
+      "backgroundColor":"none",
+      "shadow":False,
+      "style":{
+         "fontSize":"16px"
+      },
+      "valueSuffix":"%",
+      "pointFormat":"{series.name}<br><span style=\"font-size:2em; color: {point.color}; font-weight: bold\">{point.y}</span>",
+      "positioner":{
+         "x":"50px",
+         "y":100
+      }
+   },
+   "pane":{
+      "startAngle":0,
+      "endAngle":360,
+      "background":[
+         {
+            "radius":"112%",
+            "innerRadius":"88%",
+            "borderWidth":0
+         },
+         {
+            "radius":"87%",
+            "innerRadius":"63%",
+            "borderWidth":0
+         },
+         {
+            "radius":"62%",
+            "innerRadius":"38%",
+            "borderWidth":0
+         }
+      ]
+   },
+   "yAxis":{
+      "min":0,
+      "max":100,
+      "lineWidth":0,
+      "tickPositions":[
+         
+      ]
+   },
+   "plotOptions":{
+      "solidgauge":{
+         "dataLabels":{
+            "enabled":False
+         },
+         "linecap":"round",
+         "stickyTracking":False,
+         "rounded":True
+      }
+   },
+   "series":[
+      {
+         "name":"Move",
+         "data":[
+            {
+               "color":"lightgreen",
+               "radius":"112%",
+               "innerRadius":"88%",
+               "y":80
+            }
+         ]
+      },
+      {
+         "name":"Exercise",
+         "data":[
+            {
+               "color":"red",
+               "radius":"87%",
+               "innerRadius":"63%",
+               "y":65
+            }
+         ]
+      },
+      {
+         "name":"Stand",
+         "data":[
+            {
+               "color":"blue",
+               "radius":"62%",
+               "innerRadius":"38%",
+               "y":50
+            }
+         ]
+      }
+   ]
+}
+SAMPLE10={
+
+    "chart": {
+        "type": 'gauge',
+        "plotBackgroundColor": "white",
+        "plotBackgroundImage": "white",
+        "plotBorderWidth": 0,
+        "plotShadow": False,
+        "height": '80%'
+    },
+
+    "title": {
+        "text": 'Speedometer'
+    },
+
+    "pane": {
+        "startAngle": -90,
+        "endAngle": 89.9,
+        "background": "null",
+        "center": ['50%', '75%'],
+        "size": '110%'
+    },
+
+    "yAxis": {
+        "min": 0,
+        "max": 200,
+        "tickPixelInterval": 72,
+        "tickPosition": 'inside',
+        "tickColor": '#FFFFFF',
+        "tickLength": 20,
+        "tickWidth": 2,
+        "minorTickInterval": "null",
+        "labels": {
+            "distance": 20,
+            "style": {
+                "fontSize": '14px'
+            }
+        },
+        "plotBands": [{
+            "from": 0,
+            "to": 120,
+            "color": '#55BF3B', 
+            "thickness": 20
+        }, {
+            "from": 120,
+            "to": 160,
+            "color": '#DDDF0D',
+            "thickness": 20
+        }, {
+            "from": 160,
+            "to": 200,
+            "color": '#DF5353', 
+            "thickness": 20
+        }]
+    },
+
+    "series": [{
+        "name": 'Speed',
+        "data": [80],
+        "tooltip": {
+            "valueSuffix": ' km/h'
+        },
+        "dataLabels": {
+            "format": '{y} km/h',
+            "borderWidth": 0,
+            "color": '#333333',
+            "style": {
+                "fontSize": '16px'
+            }
+        },
+        "dial": {
+            "radius": '80%',
+            "backgroundColor": 'gray',
+            "baseWidth": 12,
+            "baseLength": '0%',
+            "rearLength": '0%'
+        },
+        "pivot": {
+            "backgroundColor": 'gray',
+            "radius": 6
+        }
+    }]
+
+}
+SAMPLE11={
+
+    "title": {
+        "text": 'Highcharts Dependency Wheel'
+    },
+
+    "accessibility": {
+        "point": {
+            "valueDescriptionFormat": '{index}. From {point.from} to {point.to}: {point.weight}.'
+        }
+    },
+
+    "series": [{
+        "keys": ['from', 'to', 'weight'],
+        "data": [
+            ['Brazil', 'Portugal', 5],
+            ['Brazil', 'France', 1],
+            ['Brazil', 'Spain', 1],
+            ['Brazil', 'England', 1],
+            ['Canada', 'Portugal', 1],
+            ['Canada', 'France', 5],
+            ['Canada', 'England', 1],
+            ['Mexico', 'Portugal', 1],
+            ['Mexico', 'France', 1],
+            ['Mexico', 'Spain', 5],
+            ['Mexico', 'England', 1],
+            ['USA', 'Portugal', 1],
+            ['USA', 'France', 1],
+            ['USA', 'Spain', 1],
+            ['USA', 'England', 5],
+            ['Portugal', 'Angola', 2],
+            ['Portugal', 'Senegal', 1],
+            ['Portugal', 'Morocco', 1],
+            ['Portugal', 'South Africa', 3],
+            ['France', 'Angola', 1],
+            ['France', 'Senegal', 3],
+            ['France', 'Mali', 3],
+            ['France', 'Morocco', 3],
+            ['France', 'South Africa', 1],
+            ['Spain', 'Senegal', 1],
+            ['Spain', 'Morocco', 3],
+            ['Spain', 'South Africa', 1],
+            ['England', 'Angola', 1],
+            ['England', 'Senegal', 1],
+            ['England', 'Morocco', 2],
+            ['England', 'South Africa', 7],
+            ['South Africa', 'China', 5],
+            ['South Africa', 'India', 1],
+            ['South Africa', 'Japan', 3],
+            ['Angola', 'China', 5],
+            ['Angola', 'India', 1],
+            ['Angola', 'Japan', 3],
+            ['Senegal', 'China', 5],
+            ['Senegal', 'India', 1],
+            ['Senegal', 'Japan', 3],
+            ['Mali', 'China', 5],
+            ['Mali', 'India', 1],
+            ['Mali', 'Japan', 3],
+            ['Morocco', 'China', 5],
+            ['Morocco', 'India', 1],
+            ['Morocco', 'Japan', 3],
+            ['Japan', 'Brazil', 1]
+        ],
+        "type": 'dependencywheel',
+        "name": 'Dependency wheel series',
+        "dataLabels": {
+            "color": '#333',
+            "style": {
+                "textOutline": 'none'
+            },
+            "textPath": {
+                "enabled": True,
+                "attributes": {
+                    "dy": 5
+                }
+            },
+            "distance": 10
+        },
+        "size": '95%'
+    }]
+
+}
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+	"streamlit_highcharts", path=str(frontend_dir)
+)
+
+def streamlit_highcharts(
+    options=SAMPLE,
+    height=410,
+    key: Optional[str] = None,
+):
+    """
+    Add a descriptive docstring
+    """
+    component_value = _component_func(
+        options=options,key=key,height=height
+    )
+
+    return component_value
+
+
+# def main():
+#     st.write("## Example")
+#     selSample=st.selectbox("Choose a sample",[SAMPLE,SAMPLE2,SAMPLE3,SAMPLE4,SAMPLE5,SAMPLE6,SAMPLE7,SAMPLE8,SAMPLE9,SAMPLE10],format_func=lambda x: str(x["title"]["text"])
+# )
+#     value = streamlit_highcharts(selSample,640)
+#     with st.expander("Show code...",expanded=False):
+#         st.code(str(selSample).replace("},","},\r\n"),language="python")
+
+
+
+# if __name__ == "__main__":
+#     main()

st_hc/frontend/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>streamlit-highcharts</title>
+    <script src="https://code.highcharts.com/stock/highstock.js"></script>
+    <script src="https://code.highcharts.com/highcharts-more.js"></script>
+    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
+    <script src="https://code.highcharts.com/modules/tilemap.js"></script>
+    <script src="https://code.highcharts.com/modules/streamgraph.js"></script>
+    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
+    <script src="https://code.highcharts.com/modules/series-label.js"></script>
+    <script src="https://code.highcharts.com/modules/data.js"></script>
+    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
+    <script src="https://code.highcharts.com/modules/sankey.js"></script>
+    <script src="https://code.highcharts.com/modules/dependency-wheel.js"></script>
+    <script src="https://code.highcharts.com/modules/annotations.js"></script>
+    <script src="https://code.highcharts.com/modules/exporting.js"></script>
+    <script src="https://code.highcharts.com/modules/export-data.js"></script>
+    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
+    <script src="https://github.highcharts.com/modules/parallel-coordinates.js"></script>
+    <script src="https://code.highcharts.com/modules/draggable-points.js"></script>
+    <script src="https://code.highcharts.com/modules/exporting.js"></script>
+    <script src="https://code.highcharts.com/modules/export-data.js"></script>
+    <script src="./streamlit-component-lib.js"></script>
+    <script src="./main.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="root">
+      <div id="container" ></div>
+    </div>
+  </body>
+</html>

st_hc/frontend/main.js

@@ -0,0 +1,40 @@
+function sendValue(value) {
+  Streamlit.setComponentValue(value)
+}
+
+
+function onRender(event) {
+  if (true) {
+    const {options,height} = event.detail.args
+    Streamlit.setFrameHeight(height+20)
+    document.getElementById("container").style.height=height+"px"
+    let c = Highcharts.chart('container', options);
+
+    let points = c.series[0].data.map((p) => 
+      ({ x: Math.round(p.x),
+         y: Math.round(p.y),
+         name:p.name} ));
+    sendValue(points);
+
+    console.log(c.series[0].data);
+
+    c.series[0].data.forEach((point, i) => {
+
+      point.graphic.element.onclick = () => {
+
+        let points = c.series[0].data.map((p) => 
+         ({ x: Math.round(p.x),
+            y: Math.round(p.y),
+            name:p.name} ));
+
+        console.log(points);
+        sendValue(points);
+
+      }
+    })
+    window.rendered = true
+  }
+}
+
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
+Streamlit.setComponentReady()

st_hc/frontend/streamlit-component-lib.js

@@ -0,0 +1,34 @@
+
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+  console.log(type, data)
+  const outData = Object.assign({
+      isStreamlitMessage: true,
+      type: type,
+  }, data);
+  window.parent.postMessage(outData, "*");
+}
+
+const Streamlit = {
+  setComponentReady: function() {
+      sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+  },
+  setFrameHeight: function(height) {
+      sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+  },
+  setComponentValue: function(value) {
+      sendMessageToStreamlitClient("streamlit:setComponentValue", {value: value});
+  },
+  RENDER_EVENT: "streamlit:render",
+  events: {
+      addEventListener: function(type, callback) {
+          window.addEventListener("message", function(event) {
+              if (event.data.type === type) {
+                  event.detail = event.data
+                  callback(event);
+              }
+          });
+      }
+  }
+}

st_hc/frontend/style.css

@@ -0,0 +1,9 @@
+text.highcharts-credits {
+    display: none;
+}
+.highcharts-exporting-group {
+    display: none;
+}
+div[class*="chartMenu"] {
+    display: none;
+}