Is there a way to use NumberFormat() formatter (Google Charts) in vue-google-charts vue.js wrapper

Viewed 427

I have been tasked with formatting some columns in charts using vue-google-charts, a vue.js wrapper for Google Charts and I am not sure that 'NumberFormat()' is even supported in vue-google-charts.

First, if somebody knows if it is or isn't, I would like to know so I don't waste much time pursuing something that isn't possible. But if it is, I sure would love an example of how to do it.

What we are doing is returning our chart data from the database and passing it into this vue.js wrapper. We are creating several charts but there are columns that have commas in them we want to remove.

Please review the existing code. I am trying to implement this using @ready as documented in the docs for vue-google-charts.

vue-google-charts docs -> https://www.npmjs.com/package/vue-google-charts

Here is our existing code with a little framework of the onChartReady method already in place.

<GChart
                    v-if="chart.data"
                    id="gchart"
                    :key="index"
                    :options="{
                        pieSliceText: chart.dropDownPie,
                        allowHtml: true
                    }"
                    :type="chart.ChartType"
                    :data="filtered(chart.data, chart.query, chart.query_type)"
                    :class="[
                    {'pieChart': chart.ChartType == 'PieChart'},
                    {'tableChart': chart.ChartType == 'Table'}
                    ]"
                    @ready = "onChartReady"
            />    

And then ...

<script>
import { GChart } from 'vue-google-charts';
import fuzzy from 'fuzzy';
import 'vue-awesome/icons';
import Icon from 'vue-awesome/components/Icon';

export default {
    components: {
        GChart,
        Icon
    },
    props: {

    },
    data() {
        return {
            charts: window.template_data,
            selected: 'null',
            selects: [],
            chartToSearch: false,
            directDownloads: {
                'Inactive Phones' : {
                    'slug' : 'phones_by_status',
                    'search_by' : 2,
                    'search' : '/Inactive/'
                },
                'Active Phones' : {
                    'slug' : 'phones_by_status',
                    'search_by' : 2,
                    'search' : '/Active/'
                },

            }
        }
    },
    created(){
        for (let i in this.charts){
            if( !this.charts[i].slug ) continue;
            $.post(ajaxurl, {
                action: 'insights_' + this.charts[i].slug,
            }, (res) => {
                console.log(res.data);
                if (res.success) {
                    this.$set(this.charts[i], 'data', res.data);
                }
            });
        }
        // console.log(this.charts);
    },
    methods: {
        onChartReady(chart,google) {
            let formatter = new.target.visualization.NumberFormat({
                pattern: '0'
            });
            formatter.format(data, 0);
            chart.draw(data)
        },
        toggleChart(chart) {
            jQuery.post(ajaxurl, {
                'action': 'update_insight_chart_type',
                'chartType': chart.ChartType,
                'chartSlug': chart.slug
            }, (res) => {
                chart.ChartType = res.data
            })
        },
        csvHREF(chart) {
            return window.location.href + '&rr_download_csv=' + chart.slug + '&rr_download_csv_search_by=' + chart.query_type + '&rr_download_csv_search=' + chart.query.trim()
        },
        filtered(data, query, column) {
            query = query.trim();
            if (query){
                let localData = JSON.parse(JSON.stringify(data));
                let column_Headers = localData.shift();

                localData = localData.filter((row)=>{
                    if( query.endsWith('/') && query.startsWith('/') ){
                        return new RegExp(query.replace(/\//g, '')).test(String(row[column]));
                    }
                    return String(row[column]).toLowerCase().indexOf(query.toLowerCase()) > -1;
                });
                localData.unshift(column_Headers);
                return localData;
            }
            return data;
        },
        filterIcon(chart) {
            chart.searchVisible = !chart.searchVisible;
            chart.query = "";
            setTimeout(()=>{
                document.querySelector(`#chart-${chart.slug} .insightSearch`).focus();
            }, 1);
        }
    }
}
document.getElementsByClassName('google-visualization-table')

If anybody can help in ANY way, I am all ears.

Thanks!

1 Answers

not familiar with vue or the wrapper,
but in google charts, you can use object notation in your data,
to provide the formatted values.

all chart types will display the formatted values by default.

google's formatters just simply do this for you.

so, in your data, replace your number values with objects,
where v: is the value and f: is the formatted value...

{v: 2000, f: '$2,000.00'}

see following working snippet...

google.charts.load('current', {
  packages: ['table']
}).then(function () {

  var chartData = [
    ['col 0', 'col 1'],
    ['test', {v: 2000, f: '$2,000.00'}],
  ];

  var dataTable = google.visualization.arrayToDataTable(chartData);

  var table = new google.visualization.Table(document.getElementById('chart_div'));
  table.draw(dataTable);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related