I tried to create a chart with vue 3 and and google charts. Chart is created with vue-google-charts package. But i couldn't able to create control wrapper for it. I want to include RangeSliderFilter to my charts. Here is my code.
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { Head, Link } from '@inertiajs/inertia-vue3';
import { ref, onMounted, nextTick } from "vue";
import { GChart } from 'vue-google-charts'
const props = defineProps({
data: Object
})
const chartData = ref([])
const rangeSlider = ref();
onMounted(() => {
chartData.value[0] = props.data.header_array;
props.data.msg_array.map((val, index) => {
val[0] = new Date(val[0])
chartData.value.push(val)
})
});
const chartOptions = ref({
title: "Temperature History",
curveType: 'function',
height: 700,
})
</script>
<template>
<Head title="Temperature History" />
<AppLayout>
<div class="py-12">
<div class="mx-auto sm:px-6 lg:px-8">
<div class="shadow-md sm:rounded-lg bg-white">
<div class="p-4">
<GChart v-if="chartData.length > 0" type="LineChart" :data="chartData"
:options="chartOptions" />
<div id="filter_div"></div>
</div>
</div>
</div>
</div>
</AppLayout>
</template>
How I can do this? Is there any good chart package for this?