Retrieving event from google chart

[thompcd]

Hi! I've followed your medium post and started to create a dashboard similar to yours. Thank you for sharing!

My charts are rendering as expected but I am not able to capture events from the web component. Have you had to do this before?

<script>
   ...
  function selectedItemClickHandler(){
  //never seeing in console!
    console.log("event works")
    }
    ...
</script>

{#if data}
<google-chart id="timeline" on:select={selectedItemClickHandler} data={data} type='timeline' options={options}></google-chart>
{:else}
  <h2>Loading...</h2>
{/if}

I've actually written this same chart in vanilla js using the static google chart library and to add the event, I do it like this. google.visualization.events.addListener(chart, 'select', selectedItemClickHandler);

I'm not sure how to do the equivalent with the web component in svelte. Do you mind telling me if I'm doing something obviously incorrect?

Thanks again!

[el3um4s]

Hi

You must use the google-chart-select event:

GoogleChartCalendar.svelte

  <google-chart
    type="calendar"
    {cols}
    {rows}
    options={{
      title: title,
      backgroundColor: "transparent",
      colorAxis: { colors: colorAxis },
    }}
    style:height="{175 * years}px"
    events={["onmouseover"]}
    on:google-chart-onmouseover
    on:google-chart-select
  />

MonthlyAmounts.svelte

  <GoogleChartCalendar
    cols={dayWithWords.cols}
    rows={dayWithWords.rows}
    title="Words Per Day"
    colorAxis={["#fdba74", "#9a3412"]}
    on:google-chart-onmouseover={(e) => {
      console.log("MOUSE OVER");
      console.log(e);
    }}
    on:google-chart-select={selectedItemClickHandler}
  />

You can also create a custom event:

GoogleChartCalendar.svelte

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import "@google-web-components/google-chart";

  const dispatch = createEventDispatcher();
</script>

  <google-chart
    type="calendar"
    {cols}
    {rows}
    options={{
      title: title,
      backgroundColor: "transparent",
      colorAxis: { colors: colorAxis },
    }}
    style:height="{175 * years}px"
    events={["onmouseover"]}
    on:google-chart-onmouseover
    on:google-chart-select={(e) => {
      const selection = e.detail.chart.getSelection();
      dispatch("select", {
        selection,
        data: selection[selection.length - 1].date,
      });
    }}
  />

MonthlyAmounts.svelte

<script lang="ts">
  function selectedItemClickHandler(e) {
    console.log("event works");
    console.log(e.detail.data);
  }
</script>

    <GoogleChartCalendar
      cols={dayWithWords.cols}
      rows={dayWithWords.rows}
      title="Words Per Day"
      colorAxis={["#fdba74", "#9a3412"]}
      on:select={selectedItemClickHandler}
    />

[thompcd]

Wow, I'm not sure how I would've ever found that. It worked just as expected, thank you!

Is there a different documentation for the web components that I can't find? Their docs are great for the static library https://developers.google.com/chart/interactive/docs/events But I can't find anything for the web components and they are just slightly different