I am using angular ui-calendar and I am trying to pass $scope.eventSources an object coming from my back end. I have confirmed that the object exists. It looks like this:
, "eventSources" : [
{
"title": 'All Day Test Event',
"start": new Date(2017, 0, 10)
},
{
"title": 'Long Test Event',
"start": new Date(2017, 0, 10),
"end": new Date(2017, 0, 19)
},
{
"title": 'Test Appointment',
"start": new Date(2017, 0, 10),
"end": new Date(2017, 0, 17),
"allDay": false
}
]
If I hardcode the events in, I can confirm that the calendar shows the events, like such:
$scope.eventSources =
[
[
{
title: 'All Day Test Event',
start: new Date(2017, 0, 9)
},
{
title: 'Long Test Event',
start: new Date(2017, 0, 10),
end: new Date(2017, 0, 12)
},
{
title: 'Test Appointment',
start: new Date(2017, 0, 8),
end: new Date(2017, 0, 21),
allDay: false
}
]
];
When I try to pass the object to $scope.eventSources like this:
$scope.eventSources = [vm.myPractice[0].eventSources]
it doesn't show anything on the calendar. Could someone please weigh in?
Here is the solution I found. It's a bit hacky, but it worked
function loadPatient() {
$scope.eventSources = vm.myPractice[0].eventSources;
uiCalendarConfig.calendars.myCal.fullCalendar('removeEvents');
uiCalendarConfig.calendars.myCal.fullCalendar('addEventSource', vm.myPractice[0].eventSources);
}
Related
So I am trying to create a flow where there is a form, when they user modifies the form useFetch is triggered and the results on the page update. things are mostly working well i am able to access the currentPokemon variable within the html and reactivity is working great. The issue is that I am trying to access parts of currentPokemon from within the so that the chart i define will also be reactive.
The graph_data show in the below is in the currentPokemon object, but i cant access it from within <script setup>
<script setup>
import { ref } from 'vue'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import { Scatter } from 'vue-chartjs'
ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
const units = ref('METRIC')
const friction = ref(1)
const payload = ref(1)
const distance = ref(1)
const time = ref(1)
const gearRatio = ref(1)
const motionProfile = ref(0.25)
const conservatism = ref(1.5)
const stage = ref('DEFAULT')
const options = {
responsive: true,
maintainAspectRatio: true
}
const { data: currentPokemon } = await useFetch(`http://localhost:3000/`, {
method: "POST",
body: {
unit_system: units,
motion_profile: motionProfile,
move_time_sec: time,
move_distance_deg: distance,
friction: friction,
payload: payload,
gear_ratio: gearRatio,
safety_factor: conservatism,
be_stage: stage,
manufacturers: ["Bosch"],
motor: "DEFAULT"
}
})
console.log(typeof(currentPokemon))
console.log(currentPokemon)
console.log(currentPokemon.graph_data)
const test = ref(currentPokemon.value)
console.log("test")
console.log(typeof(test))
console.log(test.graph_data)
const data = ref({
datasets: [
{
label: 'Accel Profile 0.25 User',
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: user_graph.x[0], y: user_graph.y[0]},
{x: user_graph.x[1], y: user_graph.y[1]},
{x: user_graph.x[2], y: user_graph.y[2]},
{x: user_graph.x[3], y: user_graph.y[3]}
]
}
]
})
here is the console output
✔ Vite server hmr 6 files in 54.932ms 13:56:25
object 13:56:25
[Vue warn]: Unhandled error during execution of setup function 13:56:25
at <App>
RefImpl { 13:56:25
__v_isShallow: false,
dep: undefined,
__v_isRef: true,
_rawValue: {
motormatch: {
'1': [Object],
'3': [Object],
'5': [Object],
'7': [Object],
'10': [Object]
},
stage_details: { DEFAULT: [Object] },
motioncalcs: {
'0.5': [Object],
'0.33': [Object],
'0.1': [Object],
'0.25 User': [Object]
},
graph_data: {
xlabel: 'Time (s)',
ylabel: 'Velocity (deg/s)',
title: 'Move Profiles',
profiles: [Array]
}
},
_value: {
motormatch: {
'1': [Object],
'3': [Object],
'5': [Object],
'7': [Object],
'10': [Object]
},
stage_details: { DEFAULT: [Object] },
motioncalcs: {
'0.5': [Object],
'0.33': [Object],
'0.1': [Object],
'0.25 User': [Object]
},
graph_data: {
xlabel: 'Time (s)',
ylabel: 'Velocity (deg/s)',
title: 'Move Profiles',
profiles: [Array]
}
}
}
undefined 13:56:25
test 13:56:25
object 13:56:25
undefined
Again the goal is to have the paramater passed to the graph be reactive based on the value of currentPokemon.graph_data. I have tried using let to declare new variables and access graph_data that way, which did allow me to get the value of graph_data but it was no longer reactive.
console.log(typeof(currentPokemon))
let res_data1 = currentPokemon.value
let graph_data1 = res_data1.graph_data
let user_graph = graph_data1.profiles[3]
console.log(user_graph)
addition note, in html {{ currentPokemon.graph_data }} works perfectly and is reactive...
Whenever you use ref or computed the way you access values template vs script differs, in script you must use the value key accessor, in template you omit it because in templates the value key accessor is injected at compilation run-time.
<script setup>
const myVar = ref([]) // Array
console.log(myVar.value.length) // Outputs 0
myVar.value.push('hello')
console.log(myVar.value.length) // Outputs 1
const count = computed(() => myvar.value.length)
myVar.value.push('world')
console.log(count.value) // Outputs 2
</script>
<template>
<div>Total Items: {{ myVar.length }}</div>
<div>Counter: {{ count.length }}</div>
</template>
However it is not the same case when working with nested reactive reference objects which is what you want to use if you are altering inner values of a nested object where you want to react to those nested alterations:
<script setup>
const myObject = reference({
myData: [] // Array
})
console.log(myObject.myData.length) // Outputs 0
myObject.myData.push('hello')
console.log(myObject.myData.length) // Outputs 1
</script>
<template>
<div>Total Items: {{ myObject.myData.length }}</div>
</template>
Not sure if this is the best way to do this... I tried using reactive and a few other methods but this finally worked for me
/ Data pased to scatter plot
const data = computed({
get() {
let res_data1 = currentPokemon.value
let user_graph = res_data1.graph_data.profiles[3]
let dataset = {datasets: [
{label: 'Accel Profile 0.5',
fill: false,
borderColor: 'blue',
backgroundColor: 'blue',
borderWidth: 1,
// pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
// pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 0,
pointHoverRadius: 5,
fill: false,
// tension: 0,
showLine: true,
data: [
{x: 0, y: 0},
{x: 0.5, y: 2},
{x: 0.5, y: 2},
{x: 1, y: 0}]},
{label: 'Accel Profile 0.33',
fill: false,
borderColor: 'orange',
backgroundColor: 'orange',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
data: [
{x: 0, y: 0},
{x: 0.33, y: 1.49},
{x: 0.66, y: 1.49},
{x: 1, y: 0}]
},
{
label: 'Accel Profile 0.1',
borderColor: 'green',
backgroundColor: 'green',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: 0, y: 0},
{x: 0.1, y: 1.11},
{x: 0.9, y: 1.11},
{x: 1, y: 0}]
},
{
label: 'Accel Profile 0.25 User',
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 5,
// tension: 0,
showLine: true,
fill: false,
data: [
{x: user_graph.x[0], y: user_graph.y[0]},
{x: user_graph.x[1], y: user_graph.y[1]},
{x: user_graph.x[2], y: user_graph.y[2]},
{x: user_graph.x[3], y: user_graph.y[3]}
]
}
]}
return dataset
},
// setter
set(newValue) {
// Note: we are using destructuring assignment syntax here.
[firstName.value, lastName.value] = newValue.split(' ')
}
})
I have a wrong point data shown.
It doesn't show the correct data, check out the picture.
Startpoint is Date.UTC(2016, 06, 30) and not the Date.UTC(2016, 07, 30) as in the tooltip. Here is the result I get:
$(function() {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Waterflow'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Flow im Mio'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Main',
data: ([
[Date.UTC(2016, 06, 30), 3072.541365],
[Date.UTC(2016, 07, 31), 3315.618228],
[Date.UTC(2016, 08, 31), 3367.458135],
[Date.UTC(2016, 09, 30), 3370.195785],
[Date.UTC(2016, 10, 31), 3424.501986],
[Date.UTC(2016, 11, 30), 3479.865412],
[Date.UTC(2016, 12, 31), 3521.730275],
])
}, ]
});
});
In Date.UTC(Year,Month*,Day,Hour,Minute,Seconds) the Month is starting from 0. This is mentioned in the documentation.
So to specify the month June you have to use 5 and not 6.
I am currently working for my school project and using Meteor with AngularJs 1 and ES6. In one of my views I try to update some live data (with AngularCharts) every second which are currently randomly generated. I am new to the way of how Meteor and ES6 works, so I think a have a pretty easy error.
This is my code of the class from the view:
class View2 {
constructor($interval, $scope) {
'ngInject';
this.cardRow = [
{name: 'Drilling Heat', color: 'white', value: 0},
{name: 'Drilling Speed', color: 'white', value: 0},
{name: 'Milling Heat', color: 'white', value: 0},
{name: 'Milling Speed', color: 'white', value: 0}
];
this.type = ['bar', 'line', 'pie', 'doughnut', 'radar'];
this.chartRow = [
{
name: 'Chart1',
type: 'bar',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: ['Series A'],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
datasetOverride: [{yAxisID: 'y-axis-1'}],
options: {
animation: false,
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}]
}
}
},
{
name: 'Chart2',
type: 'line',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: ['Series A'],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
datasetOverride: [{yAxisID: 'y-axis-1'}],
options: {
animation: false,
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}]
}
}
}
];
$interval(this.update, 1000);
}
update() {
for (var i = 0; i < this.cardRow.length; i++) {
this.cardRow[i].value = Math.round((Math.random() * 10) * 10);
var value = this.cardRow[i].value;
switch (true) {
case (value > 80):
this.cardRow[i].color = 'red';
break;
case (value > 60):
this.cardRow[i].color = 'orange';
break;
case (value > 40):
this.cardRow[i].color = 'yellow';
break;
default:
this.cardRow[i].color = 'green';
break;
}
}
for (var y = 0; y < this.chartRow.length; y++) {
for (var z = 0; z < this.chartRow[y].data.length; z++) {
this.chartRow[y].data[z] = this.chartRow[y].data[z + 1];
}
this.chartRow[y].data[z - 1] = Math.round((Math.random() * 10) * 10);
}
}
}
The $interval should call the function "update" every second but then the variable is unknown. it throws an error like this:
TypeError: Cannot read property 'length' of undefined
at update (view2.js:74)
at callback (modules.js?hash=7db65c4…:46346)
at Scope.$eval (modules.js?hash=7db65c4…:51381)
at Scope.$digest (modules.js?hash=7db65c4…:51194)
at Scope.$apply (modules.js?hash=7db65c4…:51489)
at tick (modules.js?hash=7db65c4…:46336)
What can I do to solve this problem? And is there a way to use Meteor with the old Javascript Version?
How could I achieve the chart below as accurate as possible?
I'm trying to achieve the chart in the picture below with highcharts, the problem I have is that I can't achieve the gradients and the purple cut-line
this is what I have donde so far : jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
options: {
title: {
text: "Historical report"
},
heigth: 200
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
plotBands: [
{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: 'John',
data: [3, 9, null, 5, 4, 10, 12],
lineColor: "#5A66AF"
}, {
name: 'Jane',
data: [1, 10, null, 3, 3, 5, 4],
lineColor: '#47a06b'
}, {
name: 'Roberto',
data: [10, 15, null, 15, 9, 9, 4],
lineColor: '#2ba9db'
}
]
});
});
The line is achieved by the DashStyle property:
http://api.highcharts.com/highcharts#plotOptions.line.dashStyle
The gradient fill is a matter of defining the gradient stops in the fillColor property:
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/
(though, FWIW, that extreme white end to the gradient is reeeeally distracting...)
i am facing quite a problem which is to create the nice graph from http://www.amcharts.com/ but i need to retrieve data from my sql database. But i don't know how to place inside. Please guide me. Below is the way how the graph displayed, but i wanted to work with data from database. Thank you.
<script type="text/javascript">
var chartData = generateChartData();
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var value = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: value
});
}
return chartData;
}
AmCharts.makeChart("chartdiv", {
type: "stock",
pathToImages: "../amcharts/images/",
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: true,
title: "Value",
eraseAll: false,
labels: [{
x: 0,
y: 100,
text: "Click on the pencil icon on top-right to start drawing",
align: "center",
size: 16
}],
stockGraphs: [{
id: "g1",
valueField: "value",
bullet: "round",
bulletColor: "#FFFFFF",
bulletBorderColor: "#00BBCC",
bulletBorderAlpha: 1,
bulletBorderThickness: 2,
bulletSize: 7,
lineThickness: 2,
lineColor: "#00BBCC",
useDataSetColors: false
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
},
drawingIconsEnabled: true
}],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
</script>
Can you generate this script in your code behind ( using a string builder for example ) then use this
ScriptManager.RegisterStartupScript(this, this.GetType(), "", "'" + YourStringBuild.toString() + "'", true);