{"_id":"@danny50610/vue-google-charts","_rev":"2-5a465518a36a2f66b7f080299ae1647d","name":"@danny50610/vue-google-charts","dist-tags":{"latest":"1.1.0-danny50610.3"},"versions":{"1.1.0-danny50610.1":{"name":"@danny50610/vue-google-charts","version":"1.1.0-danny50610.1","keywords":["vue","vuejs","charts","google charts","charts component"],"author":{"name":"Refat","email":"nobilix@gmail.com"},"license":"MIT","_id":"@danny50610/vue-google-charts@1.1.0-danny50610.1","maintainers":[{"name":"danny50610","email":"danny50610@yahoo.com.tw"}],"homepage":"https://github.com/devstark-com/vue-google-charts#readme","bugs":{"url":"https://github.com/devstark-com/vue-google-charts/issues"},"dist":{"shasum":"a63be13e8395ad97951d2c8d690c35d0964a4b41","tarball":"https://registry.npmjs.org/@danny50610/vue-google-charts/-/vue-google-charts-1.1.0-danny50610.1.tgz","fileCount":26,"integrity":"sha512-YHsVWlMXB7GtamYJtQs01t1e9Ub8fSm1/KKDbtVGFJ4R24JsLKc/gGpBDPWSBt7ouevepM0Ax+JIUJCjnQTaGw==","signatures":[{"sig":"MEUCIQCxUSEaiyaUU79Blx6/dl9gP4Ss/MI4Ns9cCXiFvWWl0gIgX7Gutgb/g8IS8aAVofkxE7ey/fSV1gJYXjZPLMgOy3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211737},"main":"./dist/index.cjs","_from":"file:danny50610-vue-google-charts-1.1.0-danny50610.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","scripts":{},"_npmUser":{"name":"danny50610","email":"danny50610@yahoo.com.tw"},"_resolved":"/tmp/3179b72b1798e796678f5f4a4d458ef4/danny50610-vue-google-charts-1.1.0-danny50610.1.tgz","_integrity":"sha512-YHsVWlMXB7GtamYJtQs01t1e9Ub8fSm1/KKDbtVGFJ4R24JsLKc/gGpBDPWSBt7ouevepM0Ax+JIUJCjnQTaGw==","repository":{"url":"git+https://github.com/devstark-com/vue-google-charts.git","type":"git"},"_npmVersion":"8.19.4","description":"Reactive Vue.js wrapper for Google Charts lib","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"directory":"package"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.0.0-0 || ^2.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-google-charts_1.1.0-danny50610.1_1727597829031_0.8840223071403659","host":"s3://npm-registry-packages"}},"1.1.0-danny50610.2":{"name":"@danny50610/vue-google-charts","version":"1.1.0-danny50610.2","keywords":["vue","vuejs","charts","google charts","charts component"],"author":{"name":"Refat","email":"nobilix@gmail.com"},"license":"MIT","_id":"@danny50610/vue-google-charts@1.1.0-danny50610.2","maintainers":[{"name":"danny50610","email":"danny50610@yahoo.com.tw"}],"homepage":"https://github.com/danny50610/vue-google-charts","bugs":{"url":"https://github.com/danny50610/vue-google-charts/issues"},"dist":{"shasum":"82d0da156210a7f59c5242c2d5a9ce31e643af33","tarball":"https://registry.npmjs.org/@danny50610/vue-google-charts/-/vue-google-charts-1.1.0-danny50610.2.tgz","fileCount":26,"integrity":"sha512-ZrrDWKLweOq374KU0aIFzWqb7drLAyyjYFEuDcXOjGKfW9oD2/QBPA8biq3MHmSm7FEz3fmaH9hUt52bBOMaDQ==","signatures":[{"sig":"MEQCIEWvJFL9cSqCft/3p17m+vO2Agrvno+eZnZGYuX6MInOAiBntiKjxm7z1MCB4xRb3fq+nSLcLFyX25Q8qnVRO2FQtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211747},"main":"./dist/index.cjs","_from":"file:danny50610-vue-google-charts-1.1.0-danny50610.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","scripts":{},"_npmUser":{"name":"danny50610","email":"danny50610@yahoo.com.tw"},"_resolved":"/tmp/e7810ec88d174c44ab711e02382a8d8b/danny50610-vue-google-charts-1.1.0-danny50610.2.tgz","_integrity":"sha512-ZrrDWKLweOq374KU0aIFzWqb7drLAyyjYFEuDcXOjGKfW9oD2/QBPA8biq3MHmSm7FEz3fmaH9hUt52bBOMaDQ==","repository":{"url":"git+ssh://git@github.com/danny50610/vue-google-charts.git","type":"git"},"_npmVersion":"8.19.4","description":"Reactive Vue.js wrapper for Google Charts lib","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"directory":"package"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.0.0-0 || ^2.6.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-google-charts_1.1.0-danny50610.2_1727598863059_0.80288022303751","host":"s3://npm-registry-packages"}},"1.1.0-danny50610.3":{"name":"@danny50610/vue-google-charts","version":"1.1.0-danny50610.3","description":"Reactive Vue.js wrapper for Google Charts lib","author":{"name":"Refat","email":"nobilix@gmail.com"},"homepage":"https://github.com/danny50610/vue-google-charts","license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/danny50610/vue-google-charts.git"},"main":"./dist/index.cjs","types":"./dist/index.d.ts","publishConfig":{"directory":"package"},"keywords":["vue","vuejs","charts","google charts","charts component"],"peerDependencies":{"vue":"^3.0.0-0 || ^2.6.0"},"module":"./dist/index.js","scripts":{},"bugs":{"url":"https://github.com/danny50610/vue-google-charts/issues"},"_id":"@danny50610/vue-google-charts@1.1.0-danny50610.3","_integrity":"sha512-Zw7UVqzTCMmbg/zlmzTy78GRJp0pmg9DlbByc9aSkspzm2bb8BTxkoz7VEpSmSzgtLn40a2oGXANpkrR5p2SpQ==","_resolved":"/tmp/2c02d14cb10ee4ee001291e334cc8cc5/danny50610-vue-google-charts-1.1.0-danny50610.3.tgz","_from":"file:danny50610-vue-google-charts-1.1.0-danny50610.3.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-Zw7UVqzTCMmbg/zlmzTy78GRJp0pmg9DlbByc9aSkspzm2bb8BTxkoz7VEpSmSzgtLn40a2oGXANpkrR5p2SpQ==","shasum":"455ca183ad652c68482cfde59abffec3bc0c4784","tarball":"https://registry.npmjs.org/@danny50610/vue-google-charts/-/vue-google-charts-1.1.0-danny50610.3.tgz","fileCount":26,"unpackedSize":212157,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2fFTYhR48eOBdCOpgG+3dLy+B+AazTPJKFBbwly1D8AiBiowhf5tmRStbOgWIYvom5ExdnHPEWCY8wxTeq1PKodQ=="}]},"_npmUser":{"name":"danny50610","email":"danny50610@yahoo.com.tw"},"directories":{},"maintainers":[{"name":"danny50610","email":"danny50610@yahoo.com.tw"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-google-charts_1.1.0-danny50610.3_1728544964559_0.781990569649849"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-29T08:17:08.953Z","modified":"2024-10-10T07:22:45.010Z","1.1.0-danny50610.1":"2024-09-29T08:17:09.244Z","1.1.0-danny50610.2":"2024-09-29T08:34:23.331Z","1.1.0-danny50610.3":"2024-10-10T07:22:44.823Z"},"bugs":{"url":"https://github.com/danny50610/vue-google-charts/issues"},"author":{"name":"Refat","email":"nobilix@gmail.com"},"license":"MIT","homepage":"https://github.com/danny50610/vue-google-charts","keywords":["vue","vuejs","charts","google charts","charts component"],"repository":{"type":"git","url":"git+ssh://git@github.com/danny50610/vue-google-charts.git"},"description":"Reactive Vue.js wrapper for Google Charts lib","maintainers":[{"name":"danny50610","email":"danny50610@yahoo.com.tw"}],"readme":"# vue-google-charts\n\n[ ](https://www.npmjs.com/package/vue-google-charts)\n[](https://vuejs.org/)\n[](https://vuejs.org/)\n\nReactive Vue.js wrapper for Google Charts lib\n\nForked from [https://github.com/devstark-com/vue-google-charts](https://github.com/devstark-com/vue-google-charts)\n\n
\nInstallation\n • \nUsage\n • \nSlack\n • \nExamples\n
\n
\n\n# Installation\n\n```bash\npnpm add vue-google-charts\n# or\nyarn add vue-google-charts\n# or\nnpm i vue-google-charts\n```\n\n
\n\nNeed an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-google-charts), an open-source API for data apps.\n\n
\n\n[](https://cube.dev/?ref=eco-vue-google-charts)\n\n## Default import\n\nThis package works with version 2.x and 3.x of Vue.\n\nUse locally in a component:\n\n```javascript\nimport { GChart } from 'vue-google-charts'\n\nexport default {\n components: {\n GChart\n }\n}\n```\n\nFor Vue 2 projects, you need to import from `vue-google-charts/legacy`.\n\n```javascript\nimport { GChart } from 'vue-google-charts/legacy'\n```\n\n# Usage\n\n## Read the Google Charts docs first\nThe `GChart` component is a wrapper for the original Google Charts, so it's assumed you are familiar with the vanilla Google Charts usage (https://developers.google.com/chart/).\n\nWith `vue-google-charts` package you don't need to link script loader and load Google Charts package manually.\n\nAnother bonus — reactive data binding. A chart will be redrawn automatically once `data` , `type` and `options` prop is changed.\n\n## Simple usage:\n\n```html\n \n```\n---\n```javascript\nexport default {\n data () {\n return {\n // Array will be automatically processed with visualization.arrayToDataTable function\n chartData: [\n ['Year', 'Sales', 'Expenses', 'Profit'],\n ['2014', 1000, 400, 200],\n ['2015', 1170, 460, 250],\n ['2016', 660, 1120, 300],\n ['2017', 1030, 540, 350]\n ],\n chartOptions: {\n chart: {\n title: 'Company Performance',\n subtitle: 'Sales, Expenses, and Profit: 2014-2017',\n }\n }\n }\n }\n}\n```\n---\n## Load additional packages:\n\n```html\n \n```\nUsing `settings` prop you can specify any setting available for google charts loader:\n`packages`, `language`, `callback`, `mapsApiKey`.\n\nSee more on [available setting](https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings)\n\nThere's also `version` prop, so you can load a specific version, e.g. `version=\"upcoming\"`.\n\nSee more on [available versions](https://developers.google.com/chart/interactive/docs/basic_load_libs#load-version-name-or-number)\n\n\n---\n## Add event listeners:\n\n```html\n \n```\n\n```javascript\nexport default {\n data () {\n return {\n // {\n // eventName: handlerFunction,\n // eventName: handlerFunction,\n // }\n chartEvents: {\n 'select': () => {\n // handle event here\n }\n }\n }\n }\n}\n```\n\n---\n## Use `@ready` for something very custom\n\nYou can get chart instance and charts api references to draw a custom chart:\n\n```html\n \n```\n\n```javascript\nexport default {\n methods: {\n onChartReady (chart, google) {\n const query = new google.visualization.Query('https://url-to-spreadsheet...')\n query.send(response => {\n const options = {\n // some custom options\n }\n const data = response.getDataTable()\n chart.draw(data, options)\n })\n }\n }\n}\n```\n\n---\n\n## `createChart` property\n\nThis property allows you to create custom chart object from outside of the component.\n`createChart` property is the function and accepts three arguments:\n`el` - the reference to chart element,\n`google` - Google chart library,\n`type` - chart type\n\n```html\n new google.charts.Bar(el)\"\n />\n```\n\nBy default the function looks like this:\n```javascript\n (el, google, type) => {\n return new google.visualization[type](el)\n }\n```\n\nFor example `createChart` may be used to create Material bar charts (Material bar charts expect of class `google.charts.Bar` instead of `google.visualization.BarChart`). See: https://codesandbox.io/embed/z699l6oq4p?module=%2Fsrc%2FApp.vue\n\n---\n## Responsive Chart Behaviour\n\nGCharts are responsive by default and they can change their width on `window.resize` event.\nThe resize is debounces and you can control debounce time (ms) by using `resizeDebounce` property:\n```html\n \n```\nIf you don't need responsive behaviour for your charts, set `:resizeDebounce=\"0\"`\n\n---\n\n# Plugin Development\n\n## Installation\n\nThe first time you create or clone your plugin, you need to install the default dependencies:\n\n```\nnpm i\n```\n\n## Watch and compile\n\nThis will run webpack in watching mode and output the compiled files in the `dist` folder.\n\n```\nnpm run dev\n```\n\n## Use it in another project\n\nWhile developing, you can follow the install instructions of your plugin and link it into the project that uses it.\n\nIn the plugin folder:\n\n```\nnpm link\n```\n\nIn the other project folder:\n\n```\nnpm link vue-google-charts\n```\n\nThis will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.\n\n## Manual build\n\nThis will build the plugin into the `dist` folder in production mode.\n\n```\nnpm run build\n```\n\n---\n\n## Examples\n\n- Area Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/area-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/area-chart)\n- Bar Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/bar-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/bar-chart)\n- Bubble Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/bubble-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/bubble-chart)\n- Calendar Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/calendar-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/calendar-chart)\n- Candlestick Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/candlestick-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/candlestick-chart)\n- Column Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/column-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/column-chart)\n- Combo Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/combo-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/combo-chart)\n- Donut Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/donut-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/donut-chart)\n- Gantt Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/gantt-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/gantt-chart)\n- Gauge Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/gauge-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/gauge-chart)\n- Geo Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/geo-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/geo-chart)\n- Histogram Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/histogram-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/histogram-chart)\n- Line Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/line-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/line-chart)\n- Org Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/org-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/org-chart)\n- Pie Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/pie-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/pie-chart)\n- Sankey Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/sankey-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/sankey-chart)\n- Scatter Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/scatter-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/scatter-chart)\n- Stepped Area Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/stepped-area-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/stepped-area-chart)\n- Table Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/table-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/table-chart)\n- Timeline Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/timeline-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/time-line-chart)\n- Tree Map Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/tree-map-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/tree-map-chart)\n- Trendlines Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/trendlines-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/trendlines-chart)\n- Waterfall Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/waterfall-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/waterfall-chart)\n- Word Tree Chart: [Vue 2](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/legacy/sandboxes/word-tree-chart) / [Vue 3](https://codesandbox.io/s/github/devstark-com/vue-google-charts/tree/master/sandboxes/word-tree-chart)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","readmeFilename":"README.md"}