# How to Draw Pie Chart in this Subplots with PyplotJS?

**URL:** <https://discourse.julialang.org/t/how-to-draw-pie-chart-in-this-subplots-with-pyplotjs/85033>\
**Category:** General Usage\
**Tags:** pyplotjs\
**Created:** [July 30, 2022, 3:08pm UTC](https://discourse.julialang.org/t/how-to-draw-pie-chart-in-this-subplots-with-pyplotjs/85033 "2022-07-30T15:08:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Freya\_the\_Goddess](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/freya_the_goddess/32/36835_2.png) [@Freya\_the\_Goddess](https://discourse.julialang.org/u/Freya_the_Goddess)\
**Post date:** [July 30, 2022, 3:08pm UTC](https://discourse.julialang.org/t/how-to-draw-pie-chart-in-this-subplots-with-pyplotjs/85033/1 "2022-07-30T15:08:02Z")

</div>

Hi all,

I see this source  
[https://plotly.com/julia/mixed-subplots/](https://plotly.com/julia/mixed-subplots/)

This is my code (the pie chart is not working):

```julia
using PlotlyJS, CSV, DataFrames, HTTP

df = CSV.read("/home/browni/LasthrimProjection/csv/countrieshistory_db.csv", DataFrame)

# Initialize figure with subplots
fig = make_subplots(
    rows=2, cols=2,
    column_widths=[0.6, 0.4],
    row_heights=[0.4, 0.6],
    specs=[
        Spec(kind="geo", rowspan=2) Spec(kind="xy")
        missing Spec(kind= "scene")
    ]
)

# TODO: Plot not staying in it's sub plot spot
# Add scattergeo globe map of Central Bank locations
add_trace!(
    fig,
    scattergeo(
        lat=df[!, "Latitude"],
        lon=df[!, "Longitude"],
        mode="markers",
        hoverinfo="text",
        showlegend=false,
        marker=attr(color="crimson", size=4, opacity=0.8),
        projection_type="orthographic",
        landcolor="white",
        oceancolor="MidnightBlue",
        showocean=true,
        lakecolor="LightBlue"
    ),
    row=1, col=1
)

# Add locations bar chart

add_trace!(
    fig,
    bar(df, x=:Country, y=:Type, name="Type of Events"),
    row=1, col=2
)

add_trace!(
    fig,
    pie(df, values=:Type, labels=:Type, textposition="inside", texttemplate = "%{label}: %{value:\$,s} <br>(%{percent})", textfont_size=14),
    row=1, col=2
)

# Set theme, margin, and annotation in layout
relayout!(
    fig,
    geo=attr(projection_type="orthographic",
    landcolor="white",
    oceancolor="MidnightBlue",
    showocean=true,
    lakecolor="LightBlue"),
    xaxis2_tickangle=45,
    template=templates.plotly_dark,
    margin=attr(r=10, t=25, b=40, l=60),
    annotations=[
        attr(
            text="Source: World Bank, Wikipedia",
            showarrow=false,
            xref="paper",
            yref="paper",
            x=0,
            y=0)
    ]
)

fig

```

This is my csv, I do not use volcano data, instead I want to plot historical events from a lot of countries.

```julia
Number,Event,Country,Region,Type,Year,Latitude,Longitude
1,The Tiananmen Square protests known in Chinese as the June Fourth Incident. The protests started on 15 April and were forcibly suppressed on 4 June when the government declared martial law and sent the People's Liberation Army to occupy parts of central Beijing,China,Beijing,Politics,1989,39.7431699,116.3905867
2,The United States detonated two atomic bombs over the Japanese cities of Hiroshima and Nagasaki on 6 and 9 August 1945,Japan,Hiroshima,War,1945,35.5664783,139.5739671
3,The Treaty of Westphalia ensured Switzerland legal independence from the Holy Roman Empire,Switzerland,Bern,Politics,1648,46.8590494,5.5158505

```

The question is:

1. I want to plot a pie chart, but do not know how. The pie chart will plot how many type of events in the whole database, Type: Politics, War.
2. How to create a dropdown for the Year? So when 1989 is selected then it will show the event occurs in 1989 in the globe map.
3. Besides a pie chart, I want to plot a scatter plot, for the (x,y) → (latitude,longitude) and the color should represent the type of events (War -\>Red, Politics → Orange, Economics → Green)

Here is the picture :

 ![Capture d’écran_2022-07-30_21-27-40](https://global.discourse-cdn.com/julialang/original/3X/5/e/5e7b23587dd078a3dee1bfab2adefdb05dbaa751.png)

---

<div class="post-metadata">

**Author:** ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)\
**Post date:** [August 2, 2022, 2:44am UTC](https://discourse.julialang.org/t/how-to-draw-pie-chart-in-this-subplots-with-pyplotjs/85033/2 "2022-08-02T02:44:15Z")

</div>

For your topic question of how to obtain the pie chart, the following changes makes it work for me: instead of

```julia
    specs=[
        Spec(kind="geo", rowspan=2) Spec(kind="xy")
        missing Spec(kind= "scene")
    ]

```

do this

```julia
    specs=[
        Spec(kind="scattergeo", rowspan=2) Spec(kind="bar")
        missing Spec(kind="pie")
    ]

```

and instead of

```julia
pie(df, values=:Type, labels=:Type, textposition="inside", texttemplate = "%{label}: %{value:\$,s} <br>(%{percent})", textfont_size=14),
    row=1, col=2

```

do this

```julia
    pie(df, labels=:Type, textposition="inside", texttemplate = "%{label}: %{value:\$,s} <br>(%{percent})", textfont_size=14),
    row=2, col=2

```

In the second, I’ve removed the `values=:Type` as it’s not necessary, and `row=1` is now `row=2` as I assume you don’t want to overlay the bar chart.

> **Full code:**
>
> ```julia
> using PlotlyJS, CSV, DataFrames, HTTP
> 
> df = CSV.read("countrieshistory_db.csv", DataFrame)
> 
> # Initialize figure with subplots
> fig = make_subplots(
> rows=2, cols=2,
> column_widths=[0.6, 0.4],
> row_heights=[0.4, 0.6],
> specs=[
> Spec(kind="scattergeo", rowspan=2) Spec(kind="bar")
> missing Spec(kind="pie")
> ]
> )
> 
> # TODO: Plot not staying in it's sub plot spot
> # Add scattergeo globe map of Central Bank locations
> add_trace!(
> fig,
> scattergeo(
> lat=df[!, "Latitude"],
> lon=df[!, "Longitude"],
> mode="markers",
> hoverinfo="text",
> showlegend=false,
> marker=attr(color="crimson", size=4, opacity=0.8),
> projection_type="orthographic",
> landcolor="white",
> oceancolor="MidnightBlue",
> showocean=true,
> lakecolor="LightBlue"
> ),
> row=1, col=1
> )
> 
> # Add locations bar chart
> 
> add_trace!(
> fig,
> bar(df, x=:Country, y=:Type, name="Type of Events"),
> row=1, col=2
> )
> 
> add_trace!(
> fig,
> pie(df, labels=:Type, textposition="inside", texttemplate = "%{label}: %{value:\$,s} <br>(%{percent})", textfont_size=14),
> row=2, col=2
> )
> 
> # Set theme, margin, and annotation in layout
> relayout!(
> fig,
> geo=attr(projection_type="orthographic",
> landcolor="white",
> oceancolor="MidnightBlue",
> showocean=true,
> lakecolor="LightBlue"),
> xaxis2_tickangle=45,
> template=templates.plotly_dark,
> margin=attr(r=10, t=25, b=40, l=60),
> annotations=[
> attr(
> text="Source: World Bank, Wikipedia",
> showarrow=false,
> xref="paper",
> yref="paper",
> x=0,
> y=0)
> ]
> )
> 
> display(fig)
> 
> ```

---

<div class="post-metadata">

**Author:** ![Freya\_the\_Goddess](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/freya_the_goddess/32/36835_2.png) [@Freya\_the\_Goddess](https://discourse.julialang.org/u/Freya_the_Goddess)\
**Post date:** [August 2, 2022, 5:16am UTC](https://discourse.julialang.org/t/how-to-draw-pie-chart-in-this-subplots-with-pyplotjs/85033/3 "2022-08-02T05:16:24Z")

</div>

Thanks for your help @jd-foster  
Your username almost like a famous actress. (Out of topic)

Anyway, Is there any way to show the event in the chart as well?  
Maybe when I hover to the bar chart of Switzerland I can see the text of:

```julia
The Treaty of Westphalia ensured Switzerland legal independence from the Holy Roman Empire

```

Perhaps like embedding dataframes or something like that? Is it possible? For row 1-2 column 3