Charts field component to display a analytics data based on Vue.

Overview

vue-analytics-charts

Charts field component to display a analytics data based on Vue.

Works with Vue 2.*

Installation

Install via NPM

$ npm install vue-analytics-charts --save
$ yarn add vue-analytics-charts

Register as Component

import Vue from 'vue'
import VueAnalyticsCharts from 'vue-analytics-charts'

export default {
  name: 'App',

  components: {
    VueAnalyticsCharts
  }
}

Register as Plugin

import Vue from 'vue'
import VueAnalyticsCharts from 'vue-analytics-charts'

Vue.use(VueAnalyticsCharts)

Usage

example

Use controller from koa-analytics-service to an easy use

Quick example

">
<template>
    <vue-analytics-charts
        title="Page views"
        api-url="http://127.0.0.1:3009/api/analytics"
    >vue-analytics-charts>
template>

<script>
import VueAnalyticsCharts from 'vue-analytics-charts'

export default {
  name: 'App',

  components: {
    VueAnalyticsCharts
  },
}
script>

Props

Props Description Required Type Default
options apexcharts options false object { chart: { type: 'area' } }
analyticsOptions analytics options to build analytics report v4 (see Analytics options) false object {}

Analytics options (See batchGet reference)

Value Description Default
filters Filters value []
dimensions Dimensions value [{ name: "ga:date"}]
metrics metrics value [{ expression: 'ga:pageviews' }]

Changelog

Detailed changes for each release are documented in the release notes.

License

vue-analytics-charts is open-sourced software licensed under the MIT license

Support

Hello, I'm Thomas the maintainer of this project in my free time , if this project does help you in any way please consider to support me. Thanks 😃

Issues
Releases(0.0.3)
Owner
Thomas La Salmonie
Creator of https://megaswords.com/play
Thomas La Salmonie
vue-c3 is a reusable vue component for c3 charts

vue-c3 vue-c3 is a reusable vue component for c3 charts Install npm install --save vue-c3 # and if it's not already installed: npm install --save c3

Christoph Biering 77 Dec 29, 2021
Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart Lightweight Vue component for drawing pure CSS donut charts Live demo Live demo can be found on the project page – https://dumptyd

Saad 122 Jan 19, 2022
A Vue component to create charts with ZingChart

Quickstart guide Quickly add charts to your Vue application with our ZingChart component This guide assumes some basic working knowledge of Vue. 1. In

ZingChart 21 Jun 26, 2021
Vue component to draw bar charts with d3 v4

vue-d3-barchart Small component to draw charts using d3 v4 Demo Demo Installation npm install vue-d3-barchart --save Usage ... <d3-barchart :da

emi 15 May 23, 2021
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables

jQWidgets Vue Components Demos You can view them online here: https://www.jqwidgets.com/vue/. Build modern Web Apps with jQWidgets and Vue. jQWidgets

jQWidgets 55 Dec 9, 2021
Vue components for d2b charts.

vue-d2b Project setup yarn install Compiles and hot-reloads for development yarn run serve Compiles and minifies for production yarn run build Run

d2b 38 Apr 8, 2021
Create beautiful JavaScript charts with one line of Vue

Vue Chartkick Create beautiful JavaScript charts with one line of Vue See it in action Supports Chart.js, Google Charts, and Highcharts Quick Start Ru

Andrew Kane 713 Jan 13, 2022
A Vue 2 integration using Frappe Charts

Vue 2 Frappe Charts This is a simple package to get using Frappe Charts within VueJS How to use First we need to import and initialize import Vue from

Steve McDougall 146 Nov 23, 2021
Reactive Vue.js wrapper for Google Charts lib

vue-google-charts Reactive Vue.js wrapper for Google Charts lib Table of contents Installation Usage Example Installation npm i vue-google-charts Def

Devstark 383 Jan 10, 2022
Simple trend charts for Vue.js

Live Demo ?? Installation npm i vue-trend-chart ?? Usage import Vue from "vue"; import TrendChart from "vue-trend-chart"; Vue.use(TrendChart); Exampl

Dmytro Barylo 247 Dec 28, 2021
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Remco Plasmeijer 253 Jan 15, 2022
Generate beautiful charts with CSS and Vue: full accessibility and no hassle.

Visualization helps end-users understand data. Vue Charts.CSS helps frontend developers turn data into beautiful charts and graphs using the powerful Charts.CSS framework.

VueChartsCSS 12 Jan 13, 2022
Google Charts plugin for Vue.js

vue-charts Google Charts plugin for Vue.js Demo Basic Line Chart Multiple Sets of Data, with auto-update Events Redraw on window resize Installation n

Hayden Bickerton 195 Nov 4, 2021
VueJS module for Flexmonster Pivot Table & Charts

VueJS Module for Flexmonster Pivot Table & Charts

Flexmonster Pivot Table & Charts 15 Jan 10, 2022
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed wi

ApexCharts 11.1k Jan 24, 2022
realtime charts with chart.js

vue-desktop-realtime-chart realtime charts with chart.js Setup Install vue-cli yarn install -g @vue/cli Initialize a project vue create vue-desktop En

null 0 Jan 20, 2022
Easily bind a chart to the data stored in your Vue.js components.

A plugin for adding charts to Vue Table of Contents Purpose Usage Performance Consideration Build Setup Purpose This plugin is designed to allow Vue.j

Brian Greig 199 Jan 2, 2022
Data visualization examples using Vue.js and D3.js.

Data visualization examples using Vue.js and D3.js.

Tracey Holinka 5 Sep 17, 2021
data view/report screen(数据可视化大屏,数据报表设计器)

data view/report screen(数据可视化大屏,数据报表设计器)

ggymm 174 Jan 17, 2022