Vue - Calendar chart is not working in vue-google-charts - javascript

I am using vue-google-charts package to display google charts, but unable to use Calendar chart in it.
HTML Template:
<GChart
type="CalendarChart"
:data="chartData"
:options="chartOptions"
/>
Script:
<script>
import { GChart } from "vue-google-charts";
export default {
name: "App",
components: {
GChart
},
data() {
return {
chartData: [
['a','b'],
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ]
],
chartOptions: {
chart: {
title: "Red Sox Attendance",
height: 350,
}
}
};
}
};
It shows this error
Uncaught (in promise) TypeError: chartsLib.visualization[this.type] is not a constructor
at VueComponent.createChartObject (vue-google-charts.common.js:1)
at eval (vue-google-charts.common.js:1)
How to fix this issue? Thank you.

There seems to be :settings property to chart. Its working with that.
<GChart
:settings="{packages: ['calendar']}"
type="Calendar"
:data="chartData"
:options="chartOptions"
/>

Related

Adding vanilla js library to Nuxt

I'm trying to add Chartist library to existing NuxtJs project.
Below is a configuration I have:
> npm i chartist
~plugins/chartist.js:
import Chartist from 'chartist'
export default Chartist
nuxt.config.js:
module.exports = {
plugins: [{src:'~plugins/chartist.js', ssr:false}],
build: {
vendor: ['chartist']
}
}
index.vue:
<template>
<div>
<div class="ct-chart"></div>
</div>
</template>
<script>
import Chartist from 'chartist'
export default {
mounted(){
var chart=new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
}
}
</script>
On the first attempt to open page nuxt returns an error:
ReferenceError: window is not defined
After page reload it always returns:
Error: render function or template not defined in component: anonymous
However no errors raising and chart is visible if open page from another page through VueRouter.
But here is another problem - chart is not shown as expected:
I guess this is due to lack of related css styles.
I would appreciate for any advise:
- how to correctly include Chartist (or any other vanilla js library)
- how to attach css related to js library
p.s. I know there are different chartist vue components, but I want to understand how to work with vanilla js libraries in nuxt.
Here below the only working variant which found for the moment:
<script>
import 'chartist/dist/chartist.min.css'
export default {
data() {
return {
chartist: null
}
},
mounted() {
this.chartist = require('chartist')
var z = new this.chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
}
}
</script>

react-highcarts using es6 getting some errors

I am new to react library and es6 and I tried to build a graph that display data. I started with creating the react app template and then I decided to use highchart and start playing with their xrange graph.
Im using https://github.com/kirjs/react-highcharts library.
My Code looks like:
import React, { Component } from 'react'
import ReactHighcharts from 'react-highcharts';
class Graph extends Component {
constructor() {
super();
this.state = {
config: {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
}]
}
}
}
render() {
const config = this.state.config;
return (
<ReactHighcharts config={config}></ReactHighcharts>
)
}
}
export default Graph
My final design is going to be importing a default template and inject to the component properties like title and data to make it a little more flexible.
Im getting 2 errors (I just copy the xrange graph from highcharts website):
Error: Highcharts error #17: www.highcharts.com/errors/17
TypeError: Cannot read property 'destroy' of undefined
Follow error link https://www.highcharts.com/errors/17 which state
This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.
Import highcharts more js
import ReactHighcharts from 'react-highcharts';
import xrange from 'highcharts/modules/xrange';
(xrange)(ReactHighcharts.Highcharts)
Stackblitz demo

Can't embed Google Chart Service in a modal dialog

In a Google Spreadhseet I have code.gs:
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setWidth(900)
.setHeight(700);
SpreadsheetApp.getUi()
.showModalDialog(html, 'My custom dialog');
}
And index.html:
<script src="https://www.google.com/jsapi"></script>
<script>
try{
google.load("visualization", "1.1", {packages:["calendar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
} catch(e){
alert(e);
}
</script>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
I want to display the chart in a dialog box using the example code from: https://google-developers.appspot.com/chart/interactive/docs/gallery/calendar
But this is returning an empty dialog. No errors are thrown.
What can I do to fix this?
Since very recently you have been able to use the Visualisation service in HTMLService created dialog:
An exciting new development in the HTMLService is the addition of the iFrame sandbox mode which removes a lot of the Caja restrictions, one of them being that you can use the Visualisation Service. You just need to add:
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
to your HTMLService call.
So using this in code.gs (I've added a menu item for the dialog):
function onOpen() {
SpreadsheetApp
.getUi()
.createMenu('Show Dialog')
.addItem('Show dialog...', 'showDialog')
.addToUi()
}
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(900)
.setHeight(700);
SpreadsheetApp.getUi()
.showModalDialog(html, 'My custom dialog');
}
and this in index.html (note you need to bring your Doctype, html, body and back in as it's raw HTML again, not Cajaised):
<!DOCTYPE html>
<html>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
<script src="https://www.google.com/jsapi"></script>
<script>
try{
google.load("visualization", "1.1", {packages:["calendar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
} catch(e){
alert(e);
}
</script>
</body>
</html>
You'll be able to see your chart in the dialog box ... I'm sorry but that is just too cool!
I've created a quick demo if you wanted to see it action. Make a copy if you want to play with the code.
Unfortunately, App Script is not able to add the Google Visualization Library. Since App Script is based on the Caja Compiler (https://code.google.com/p/google-caja/), it is not guaranteed that external JS libraries will properly work.
You can read more details on the following link:
https://developers.google.com/apps-script/guides/html/restrictions#javascript

Click to URL irregular highcharts graph

I have an irregular time xAxis highchart for my data. I am trying to make it so that when a point is clicked on, I can open a new URL in another window. I was able to get this working for a basic graph (without irregular xAxis intervals), but when I change the format of my data, I am unable to get an actual URL.
Below is my code with dummy data
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'x'
},
title: {
text: ' frequency'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%b %y, %Y',
year: '%Y'
},
title: {
text: 'Date Published'
}
},
yAxis: {
title: {
text: 'Price ($USD)'
},
min: 0
},
credits: {
enabled: false
},
tooltip: {
// headerFormat: '<b>{series.name}</b><br>',
// pointFormat: '{point.x:%b %e, %Y}: {point.y:.2f} m'
enabled: false
},
series: [{
name: 'Car Price',
color: '#CC0000',
URLs: ['www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
'www.google.com',
],
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(2012, 10, 9), 37000],
[Date.UTC(2012, 11, 1), 39000],
[Date.UTC(2012, 11, 1), 10500],
[Date.UTC(2012, 11, 13), 20000],
[Date.UTC(2012, 11, 18), 33000],
[Date.UTC(2013, 5, 22), 24995],
[Date.UTC(2013, 5, 31), 15000],
[Date.UTC(2013, 6, 13), 19000],
[Date.UTC(2013, 8, 20), 4000],
[Date.UTC(2013, 9, 1), 17900],
[Date.UTC(2013, 9, 30), 2500],
[Date.UTC(2013, 11, 18), 25000],
[Date.UTC(2014, 4, 14), 15900],
[Date.UTC(2014, 5, 16), 6900],
],
point: {
events: {
click: function() {
x = this;
var someURL = this.series.userOptions.URLs[this.x];
// if (someURL)
window.open('http://'+someURL);
}
}
}
}]
});
});
Fiddle with dummy data above.
http://jsfiddle.net/5kyzkps5/1/
Can you recommend the best way to associate a URL with each point? If the URL information can't be integrated with the data table, can you help get a correct xAxis id number? If that works I should be able to at least build an array that I could just call a URL from in the click function. Thanks in advance
Better is keeping url in the point object like:
data: [{x:Date.UTC(2012, 10, 9), y:37000,url:'http://www.google.com'},
[Date.UTC(2012, 11, 1), 39000]]
Example: http://jsfiddle.net/5kyzkps5/3/
Click on the first point, url will be working.
You can use your current code and do a indexOf to find the correct index for your point.
Your code:
var someURL = this.series.userOptions.URLs[this.x];
To do a index-lookup, change it to this:
var someURL = this.series.userOptions.URLs[this.series.data.indexOf(this)];
See this JSFiddle demonstration.

Highcharts - kind of hack for stick plot timeseries

Hi all from a highchart developer Pawel-fus on Highcharts official forum, I came to know that highchart doesn't support stick plot, and similar effects can be achieved using linked series.
I have u and v components which I want to show as stick using highcharts, So theoretically what I know is
A stick plot is a plot on the u-v plane. Suppose you have a time
series of a vector (u(t), v(t)). Then, you plot line segments
from (ct, 0) to (ct+u(t), v(t))
on the u-v plane for all values of t, where c is an arbitrary
constant. Each line segment represents the vector (u(t), v(t))
but its origin is shifted as (ct, 0).
So, the vertical axis is v and the horizontal axis is u.
But, the horizontal axis is "labeled" with time t, just for
convenience, to represent the shift of the origin (ct,0).
from Pawel-Fus help, I could able to implement theory like this, here x axis is numeric that is 0 - 3, checkout Fiddle - working theory
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'main',
id: 'main',
data: [
[0, 0],
[(-3.969 +0), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[1, 0],
[(-4.578 + 1), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[2, 0],
[(1.593 + 2), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[3, 0],
[(-1.622 + 3), 1.580]
]
}]
});
});
</script>
but my ultimate aim is to make time series plot, so I tried like this, here I replaced with date, unfortunately I didn't get result like above checkout Bad Fiddle
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats : {
year: '%e %b %Y',
}
},
series: [{
name: 'main',
id: 'main',
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 2, 16), 0],
[(-4.578 + Date.UTC(1982, 2, 16)), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 3, 16), 0],
[(1.593 + Date.UTC(1982, 3, 16)), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 4, 16), 0],
[(-1.622 + Date.UTC(1982, 4, 16)), 1.580]
]
}]
});
});
</script>
So what I am doing wrong with time series plot ? whether timeseries can be done like first working script ? and I want to add arrow for each stick on top
Someone please help me...
Please shout at me, if you need more clarification...
Thanks..
Your dates are too close to get any sort of slope to your line. Date.UTC returns milliseconds since 1/1/1970, so subtracting off only 3 or 4 milliseconds, will just produce vertical lines. This:
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
is equal to:
data: [
[382665600000, 0],
[382665599996.031, -1.001]
]

Categories