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)]
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/89c595e8-bc0d-46ca-ab6d-b284e10c8786n%40googlegroups.com.
