Get id of the row in google timeline chart

[Mayank Gupta]

I have created Timeline chart in vuejs using vue-google-charts

Issue - I want to make click event and get the id in the data(column 4th element shown in the data below) in the chartData so that I can trigger modal for that and get more information from database after click. 

Code

<template>

<div>

<GChart

type="Timeline"

:settings="{ packages: ['timeline'] }"

:data="chartData"

:options="chartOptions"

class="chart-div"

ref="gChart"

:events="chartEvents"

/>

</div>

</template>

<script lang="ts">

import { GChart, loadGoogleCharts } from 'vue-google-charts'

import { defineComponent } from 'vue'

import getScenarios from '../DataService/scenarios'

export default defineComponent({

components: {

GChart,

},

data() {

return {

// Array will be automatically processed with visualization.arrayToDataTable function

chartData: [],

chartOptions: {

title: 'Live Test Timeline',

// timeline: { singleColor: '#8d8' },

enableInteractivity: true,

isCollapsed: false,

explorer: {

actions: ['dragToZoom', 'rightClickToReset'],

axis: 'horizontal',

keepInBounds: true,

maxZoomIn: 4.0,

},

},

chartArea: {

height: '100%',

width: '100%',

top: 48,

left: 48,

right: 250,

bottom: 48,

},

chartEvents: {

select: () => {

const selection = getSelection()

console.log(selection)

// console.log(GoogleDataTable.getValue(selection[0].row, 0))

},

},

}

},

created() {

getScenarios().then((result) => {

this.chartData = result

})

},

mounted() {

},

methods: {

},

})

</script>

<style scoped>

.chart-div {

height: 94vh;

min-width: 100%;

}

</style>

Sample Data

['KVS:_Negative_Test_clean_vdev', 'C198009', '#7FB77E', '628d32649ae0d7cc19f72770', '<p><b>Feature Name : </b>KVS:_Negative_Test_clean_…  <p><b>Scenario Name : </b>Cleanup VDEV</p>\n    ', Tue May 24 2022 15:30:44 GMT-0400 (Eastern Daylight Time), Tue May 24 2022 15:31:39 GMT-0400 (Eastern Daylight Time)]

['KVS:_Start,_Stop_and_Restart_KVS', 'C1629', '#7FB77E', '628d32469ae0d7cc19f72767', '<p><b>Feature Name : </b>KVS:_Start,_Stop_and_Rest…o Name : </b>Start, stop and restart KVS</p>\n    ', Tue May 24 2022 15:30:14 GMT-0400 (Eastern Daylight Time), Tue May 24 2022 15:30:47 GMT-0400 (Eastern Daylight Time)]

['L3:_Resource_Removal_2', 'C278862', '#7FB77E', '628d31c39ae0d7cc19f72741', '<p><b>Feature Name : </b>L3:_Resource_Removal_2</p…rio Name : </b>Remove loopback Interface</p>\n    ', Tue May 24 2022 15:28:03 GMT-0400 (Eastern Daylight Time), Tue May 24 2022 15:28:43 GMT-0400 (Eastern Daylight Time)]

['L3:_Resource_Removal_2', 'C278861', '#7FB77E', '628d31999ae0d7cc19f7272d', '<p><b>Feature Name : </b>L3:_Resource_Removal_2</p…ario Name : </b>Remove IP from Interface</p>\n    ', Tue May 24 2022 15:27:21 GMT-0400 (Eastern Daylight Time), Tue May 24 2022 15:28:03 GMT-0400 (Eastern Daylight Time)]

['L2:_Resource_Removal', 'C191485', '#7FB77E', '628d31929ae0d7cc19f7272a', '<p><b>Feature Name : </b>L2:_Resource_Removal</p>\n    <p><b>Scenario Name : </b>Detach TP</p>\n    ', Tue May 24 2022 15:27:14 GMT-0400 (Eastern Daylight Time), Tue May 24 2022 15:27:29 GMT-0400 (Eastern Daylight Time)]

['L2:_Resource_Removal', 'C191484', '#7FB77E', '628d317c9ae0d7cc19f72727', '<p><b>Feature Name : </b>L2:_Resource_Removal</p>\n…<b>Scenario Name : </b>Delete L2 Network</p>\n    ', Tue May 24 2022 15:26:52 GMT-0400 (Eastern Daylight Time)]