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've done a mapping before, but not this deeply nested. I am trying to re-populate data from a corrupt db. I have manually reconstructed an orders array. I'm trying to look up data for each player, and then update the fields (which start out null) for each player:
Example: I start with data like this:
const orders = [
{
"paymentID": "ch_456",
"paymentStatus": "PAID",
"user": "kingkong#gmail.com",
"cart": {
"username": "kingkong#gmail.com",
"totalQty": 1,
"totalPrice": 80,
"items": [{
"event": "Men's BB",
"division": "Men's",
"level": "BB",
"group": "nonpro",
"field": "PAL",
"day": "Saturday",
"numplayers": 2,
"price": 80,
"players": [{
"avp_id": 1042641,
"first": "King",
"last": "Kong",
"waivers": [],
"completed": true,
"country": "USA",
"signed": false},
{
"avp_id": 1086117,
"first": "Jacob",
"last": "Ladder",
"waivers": [],
"completed": true,
"country": "USA",
"signed": false,
"shirt_size": "N/A"}],
"net": null,
"team": null,
"notes": null,
"paymentNote": null,
"waiversSent": false,
"active": true,
"paymentID": "ch_456",
"users": ["kingkong#gmail.com"],
"paymentStatus": "PAID", "__v": 4}]},
"__v": 0
},{
"paymentID": "ch_123",
"paymentStatus": "PAID",
"user": "marymac#aol.com",
"cart": {
"username": "marymac#aol.com",
"totalQty": 1,
"totalPrice": 50,
"items": [{
"event": "Junior Boys 16s",
"division": "Junior Boys",
"level": "16s",
"group": "nonpro",
"field": "Main",
"day": "Friday",
"numplayers": 2,
"price": 80,
"players": [{
"avp_id": 1022228,
"first": "Some",
"last": "Kid",
"waivers": [],
"completed": true,
"country": "USA",
"signed": false
}, {
"avp_id": 1020142,
"first": "Justin",
"last": "Kid",
"waivers": [],
"completed": true,
"country": "USA",
"signed": false,
"shirt_size": "N/A"
}
],
"net": null,
"team": null,
"notes": null,
"paymentNote": null,
"waiversSent": false,
"active": true,
"paymentID": "ch_123",
"users": ["marymac#aol.com"],
"paymentStatus": "PAID", "__v": 4
}
]
},
"__v": 0
}];
Here is my code, which I'd like to get the data from an API, and update player info to pass into a function further down:
async getLostData() {
// get the lost orders
console.log('start lost data import');
// this.adminService.GetLostOrders().subscribe(orders => {
// console.log('load each order into system', orders);
orders.forEach(order => {
order.cart.items.map(item => {
const players = item.players.map(async player => {
player = await
this.adminService.adminAVPReg(player.last, player.avp_id)
.toPromise();
console.log("updated player outside subscribe", player);
});
item.players = players;
console.log("item", item);
});
// load order with updated info, create registration, and skip pmt
// this.adminService.LoadLostOrders(order).subscribe(data => {
// console.log(data);
// console.log('finished');
// });
});
console.log("orderlist", orders);
// });}
The data I'm getting logged is interesting. What comes back first from the logger is each item, followed by orderlist, and then the updated player info. Each item shows the players array listed as ZoneAwarePromise. I have no idea how to replace that with the actual data, but I can see it's not being logged in the order I expected.
How can I get the item to return with the updated data?
From what I understood you are trying to do, I came up with this,
this.adminService.GetLostOrders().pipe(
mergeMap((orders: any[]) => from(orders).pipe(
mergeMap((order) => from(order.cart.items)),
mergeMap((item) => of(item).pipe(
mergeMap(_ => from(item.players)),
mergeMap(player => this.adminService.adminAVPReg(player.last, player.avp_id).pipe(
map(newPlayer => { player = newPlayer; return player; }))
),
toArray(),
tap(newPlayerArray => item.players = newPlayerArray)
)),
toArray(),
mergeMap(_ => this.adminService.LoadLostOrders(orders))
))
).subscribe();
OP's Edit
I implemented what you shared above, and turned it into this:
getLostData() {
// get the lost orders
console.log('start lost data import');
// get manually created orders from lostdata collection
this.adminService.GetLostOrders()
.pipe(
mergeMap((orders: any) => from(orders).pipe(
mergeMap((order: any) => from(order.cart.items)),
mergeMap((item: any) => of(item).pipe(
mergeMap(_ => from(item.players)),
mergeMap((player: any) => this.adminService.adminAVPReg(player.last, player.avp_id).pipe(
map((newPlayer: any) => {
player.avp_id = player.avp_id;
player.signed = player.signed;
player.waivers = player.waivers;
player.country = player.country;
player.completed = true;
player.sandbagger = false;
player.first = newPlayer.first;
player.last = newPlayer.last;
player.email = newPlayer.email;
player.address = newPlayer.address;
player.city = newPlayer.city;
player.state = newPlayer.state;
player.zip = newPlayer.zip;
player.shirt_size = newPlayer.shirt_size;
player.ranking = newPlayer.ranking;
player.overallRanking = newPlayer.overallRanking;
player.notes = player.notes;
player.phone = newPlayer.phone;
player.adult = newPlayer.adult;
return player; }))
),
toArray(),
tap(newPlayerArray => item.players = newPlayerArray)
)),
toArray(),
tap(_ => { this.loadlostOrders(orders);
})
))
)
.subscribe();
}
loadlostOrders(orders) {
orders.forEach(order => {
this.adminService.LoadLostOrders(order).subscribe((data) => {
console.log("success", JSON.stringify(data));
}, (error) => {
console.log("error", JSON.stringify(error));
});
});
}
I'm trying to create a hover effect for two bar at the same time, is there any possibility to achieve this by using any existing method or external css to achieve this kind of hover effect, on hover event present in highcharts I can only change the colour of the single bar image.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.src.js"></script>
<script src="http://code.highcharts.com/modules/xrange.js"></script>
<div id="container" style="width: 100%; height: 100px"></div>
Highcharts
Highcharts.setOptions({
time: {
useUTC: false
}
});
Highcharts.chart('container',{
chart:{
type : 'xrange',
backgroundColor : '0C0D19',
renderTo:'container',
marginRight: 100,
},
colors : ['#45AD59','#6699FF'],
title : { text : '' },
credits : { enabled : false },
legend : { enabled : false },
exporting : {
buttons : {
contextButton : {
enabled : false
}
}
},
plotOptions : {
series : {
cursor : 'pointer',
}
},
tooltip : { enabled: false },
xAxis : {
type : 'datetime',
opposite : true,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
tickLength: 0,
tickInterval:3600*1000,
gridLineColor:'#2c2d39',
gridLineWidth:1,
min : 1545281770000,
minPadding: 0,
dateTimeLabelFormats : {
millisecond: '%I:%M %P',
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
crosshair : {
snap : false,
zIndex : 100,
label: {
enabled: true,
format: '{value:%I:%M %P}'
}
},
labels : {
align : 'left',
style : {
color : 'rgba(255, 255, 255, 0.7)',
fontSize : '12px'
}
},
},
yAxis: {
title: {
text: ''
},
plotBands: [{
from: -0.21001,
to: 0.3291,
color: '#00401f'
},{
from:0.5570,
to:1.275,
color:'#2f4776'
}],
categories: ['Reported','Tracked'],
reversed: true,
labels:{
align:'center',
style:{
color:'rgba(255, 255, 255, 0.7)',
fontSize:'12px'
},
formatter: function() {
return this.value + '<img></img>';
},
useHTML: true
},
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
pointWidth: 20,
borderWidth:0,
borderRadius:0,
data : [{
"x": 1545281770000,
"x2": 1545284950000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 0
}, {
"x": 1545285388000,
"x2": 1545291448000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 1,
}, {
"x": 1545303407000,
"x2": 1545312167000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 2,
}, {
"x": 1545312218000,
"x2": 1545312338000,
"y": 1,
"floor": 3,
"room": "3000",
"value": true,
"hoverId": 3,
}, {
"x": 1545314138000,
"x2": 1545314738000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 4,
}
,{
x:1545281701745,
x2:1545285267354,
y:0,
},
{
x:1545285327157,
x2:1545292261051,
y:0,
},{
x:1545303345999,
x2:1545314757609,
y:0,
className:'manual',
}
],
dataLabels: {
enabled: false
}
}]
})
CSS
#container .highcharts-grid.highcharts-yaxis-grid path{
display: none;
}
#container .highcharts-axis.highcharts-xaxis path{
display: none;
}
#container .highcharts-point.highcharts-point.highcharts-color-0 rect{
height: 15px;
y: 8;
}
#container .highcharts-point.highcharts-point.highcharts-color-1 rect{
y: 27;
height: 18px;
}
Here is a JSFiddle
You can make it using Highcharts.SVGRenderer which allows you to plot a rectangle and Highcharts.SVGElement.on method which allows you to add events on SVG elements (for example series group). Check demo and code posted below.
Code:
chart: {
type: 'xrange',
backgroundColor: '0C0D19',
renderTo: 'container',
marginRight: 100,
events: {
load: function() {
var chart = this,
series = chart.series[0],
seriesSvg = series.group,
seriesSvgBBox = seriesSvg.getBBox(),
width = 80,
height = seriesSvgBBox.height,
y = chart.plotTop + seriesSvgBBox.y,
x,
tooltip;
seriesSvg.on('mousemove', function(e) {
if (tooltip) {
tooltip.destroy();
}
x = e.offsetX - width / 2
tooltip = chart.renderer
.rect(x, y, width, height)
.attr({
fill: 'rgba(255, 255, 255, 0.2)'
})
.css({
'pointer-events': 'none'
})
.add()
.toFront();
});
seriesSvg.on('mouseout', function(e) {
tooltip.destroy();
tooltip = null;
});
}
}
}
Demo:
http://jsfiddle.net/BlackLabel/z2h59pLf/2/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
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?
I have a problem with amCharts after trying a lot of settings.
I want to limit the range of the y-axis from 1-150 and do not want amCharts to plot data points with the value 0. There is no time-period in the x-range. I created a fiddle of my actual result: http://jsfiddle.net/zt9exqwq/5/
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
Here's what it actual looks like:
And here's what I want to have:
Has anybody an idea? Thanks very much.
Value axis
To set the the scale for the value axis, we can use its minimum and maximum properties. However, even if we set those two, the chart will try to round up value axis increments to "pretty" numbers, hence it will still display 0.
To work around that we will use another value axis property strictMinMax. It will ensure that our value axis scale is crisply cut at 0 and 15 values.
However we now lose the first and last labels. We'll use guides to add labels for 1 and 150 values.
Combined code for the above is this:
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}]
Gaps
Zero is a valid number and a value. If you need to display a gap in place of the zero-value data points, you will need to set the value for those to null.
If you can't replace that directly in your data, you can add some custom code to iterate through the data and replace zero values with null:
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
In order to display gaps, we will also need to set connect: false for the graph.
And since your data is at irregular date intervals, we'll also set gapPeriod to some larger period (say 10) so that gaps are not displayed whenever you have a distance bigger than 1 day between two adjacent data points.
Here's combined working chart:
var chartData = [{"position":"114","datum":"20.12.2014"},{"position":"0","datum":"24.12.2014"},{"position":"127","datum":"29.12.2014"},{"position":"128","datum":"02.01.2015"},{"position":"125","datum":"05.01.2015"},{"position":"132","datum":"09.01.2015"},{"position":"0","datum":"13.01.2015"},{"position":"131","datum":"17.01.2015"},{"position":"0","datum":"20.01.2015"},{"position":"0","datum":"24.01.2015"},{"position":"88","datum":"28.01.2015"},{"position":"89","datum":"01.02.2015"},{"position":"94","datum":"04.02.2015"},{"position":"86","datum":"08.02.2015"},{"position":"80","datum":"12.02.2015"},{"position":"83","datum":"16.02.2015"},{"position":"82","datum":"19.02.2015"},{"position":"0","datum":"23.02.2015"},{"position":"109","datum":"27.02.2015"},{"position":"100","datum":"03.03.2015"},{"position":"98","datum":"06.03.2015"},{"position":"92","datum":"10.03.2015"},{"position":"99","datum":"14.03.2015"},{"position":"97","datum":"18.03.2015"},{"position":"93","datum":"21.03.2015"},{"position":"0","datum":"25.03.2015"},{"position":"0","datum":"29.03.2015"},{"position":"108","datum":"02.04.2015"},{"position":"106","datum":"06.04.2015"},{"position":"109","datum":"10.04.2015"},{"position":"0","datum":"14.04.2015"},{"position":"107","datum":"17.04.2015"},{"position":"114","datum":"21.04.2015"},{"position":"109","datum":"25.04.2015"},{"position":"0","datum":"29.04.2015"},{"position":"111","datum":"02.05.2015"},{"position":"101","datum":"06.05.2015"},{"position":"84","datum":"10.05.2015"},{"position":"0","datum":"14.05.2015"},{"position":"74","datum":"17.05.2015"},{"position":"71","datum":"21.05.2015"},{"position":"72","datum":"25.05.2015"},{"position":"72","datum":"29.05.2015"},{"position":"0","datum":"01.06.2015"},{"position":"66","datum":"05.06.2015"},{"position":"73","datum":"09.06.2015"},{"position":"78","datum":"13.06.2015"},{"position":"72","datum":"16.06.2015"},{"position":"65","datum":"20.06.2015"},{"position":"67","datum":"24.06.2015"},{"position":"72","datum":"28.06.2015"},{"position":"74","datum":"02.07.2015"},{"position":"68","datum":"05.07.2015"},{"position":"67","datum":"09.07.2015"},{"position":"72","datum":"13.07.2015"},{"position":"74","datum":"17.07.2015"},{"position":"73","datum":"21.07.2015"}];
for(var i = 0; i < chartData.length; i++) {
if (chartData[i].position == 0)
chartData[i].position = null;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataDateFormat": "DD.MM.YYYY",
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"bullet": "round",
"bulletBorderAlpha": 0.5,
"bulletColor": "#FFFFFF",
"bulletSize": 8,
"hideBulletsCount": 50,
"lineThickness": 2,
"useLineColorForBulletBorder": true,
"valueField": "position",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
"connect": false,
"gapPeriod": 10
}],
"valueAxes": [{
"integersOnly": true,
"maximum": 150,
"minimum": 1,
"strictMinMax": true,
"reversed": true,
"axisAlpha": 1,
"dashLength": 2,
"position": "left",
"title": "Position",
"guides": [{
"value": 1,
"label": "1"
}, {
"value": 150,
"label": "150"
}]
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":0.2,
"valueLineAlpha":0.2
},
"categoryField": "datum",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
},
"dataProvider": chartData
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
#chartdiv {
width : 100%;
height : 500px;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>