I have a highchart in a html file which works fine. When I moved that to vue.js project it does not work. the code in html file is as below
<html>
<head>
<title>
Chart
</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.setOptions({
global: {
useUTC: false
}
});
const chart = new Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: []
});
document.addEventListener('DOMContentLoaded', function() {
var i = 0;
setInterval(function () {
if (chart.series.length > 0) {
var series = chart.series[0];
var x = (new Date()).getTime(),
y = Math.random();
if (series.data.length < 20)
series.addPoint([x, y], true, false);
else
series.addPoint([x, y], true, true);
console.log(1)
}
else {
a = { name: 'aaa', data: [{x: (new Date()).getTime(), y:Math.random()}] };
chart.addSeries(a);
console.log(chart.series[0].name)
}
}, 1000);
});
</script>
</body>
</html>
and the code in vue is as below
<template>
<div class="container">
<b-row>
<b-col md="12" sm="12">
<b-card header="Line Chart">
<div class="chart-wrapper">
<vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
</div>
</b-card>
</b-col>
</b-row>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts'
import Highcharts from 'highcharts'
export default {
name: 'chartSample',
components: {
VueHighcharts
},
data () {
return {
Highcharts: Highcharts,
options: {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2)
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: []
}
}
},
mounted () {
let chart = this.$refs.lineCharts
setInterval(function () {
if (chart.series != null) {
var series = chart.series[0]
var x = (new Date()).getTime()
var y = Math.random()
if (series.data.length < 20) {
series.addPoint([x, y], true, false)
} else {
series.addPoint([x, y], true, true)
}
} else {
var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
chart.addSeries(a)
}
}, 1000)
}
}
</script>
I don't know what is the reason, but it doesn't work.
It seems most parts are undefined or the chart object in the page has a problem. But it is working in html file.
You can not directly access series array of Vue wrapper for Highcharts. To access internal Highcharts object call getChart method:
new Vue({
el: "#app",
name: 'chartSample',
components: {
VueHighcharts: VueHighcharts.default
},
data () {
return {
Highcharts: Highcharts,
options: {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2)
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: []
}
}
},
mounted () {
var chart = this.$refs.lineCharts;
setInterval(function () {
var series = chart.getChart().series[0];
if (series != null) {
var x = (new Date()).getTime()
var y = Math.random()
if (series.data.length < 20) {
series.addPoint([x, y], true, false)
} else {
series.addPoint([x, y], true, true)
}
} else {
var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
chart.addSeries(a)
}
}, 1000)
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-highcharts#1.2.4/dist/vue-highcharts.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="app">
<div class="chart-wrapper">
<vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
</div>
</div>
Related
I am using highcharts and facing the issue.
In my data I have different ratings for different quarters and I am trying
to show all "ratings" on xaxis for all "quarters".
enter code here
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
var response = {
"KBByRating":[
{
"FiscalQtr":"FY2018 Q4",
"FiscalQtrData":[
{
"Rating":"2.5",
"Count":1
},
{
"Rating":"4.0",
"Count":1
},
{
"Rating":"5.0",
"Count":1
}
]
},
{
"FiscalQtr":"FY2018 Q3",
"FiscalQtrData":[
{
"Rating":"2.33",
"Count":1
},
{
"Rating":"1.0",
"Count":3
},
{
"Rating":"5.0",
"Count":17
}
]
},
{
"FiscalQtr":"FY2018 Q2",
"FiscalQtrData":[
{
"Rating":"3.67",
"Count":1
},
{
"Rating":"5.0",
"Count":8
}
]
}
]
};
var ratings=[],ratingsCount=[],periodRatingData=[];
_.each(response.KBByRating, function(val){
ratings=[];
ratingsCount=[];
_.each(val.FiscalQtrData, function(main){
ratings.push(main.Rating),
ratingsCount.push(main.Count);
});
periodRatingData.push({
name: val.FiscalQtr,
data:ratingsCount
});
});
Highcharts.chart('container',
{
chart:{
type: 'column'
},
title: {
text: 'Knowledge Articles Published By Rating'
},
subtitle: {
text: ''
},
colors: ['#005073','#64e572','#24cbe5'],
xAxis: {
categories:ratings,
labels: {
formatter: function(){
var str = this.value;
if(str < 0){
str = '';
}
return str;
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'middle'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '' +'Count'+ ': ' + this.y;
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth: 40,
groupPadding: '.05',
shadow: false
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name + '</span>';
}
},
credits: {
enabled: true
},
exporting: {
enabled: true
},
series: periodRatingData
});
but I am getting only few ratings which is not correct. Could you please
help out to fix this.
Here I have created live example on jsfiddle:
https://jsfiddle.net/ugyef9ju/
Here is an example of my highcharts:
var url = 'https://api.myjson.com/bins/12puf3';
$.get({
url: url,
type: 'GET',
dataType: 'json',
success: function (data) {
var months = [];
datas = [];
estimeSapColor = "#009dc1"; // Bleu - Estimation Fournisseur
reelGrdfColor = "#d8662c"; // Orange - Relève Distributeur
console.log(data.G);
$.each(data.G, function(index, val) {
months.push(data.G[index].month + " " + data.G[index].year);
datas.push(parseInt(data.G[index].consoSimple));
});
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
this.xAxis[0].setExtremes(data.G.length -5 ,data.G.length-1);
}
},
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: months,
crosshair: true
},
yAxis: {
allowDecimals: false,
min: 5,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
return this.y > 30 ? this.y : null;
}
}
},
series: {
formatter: function() {
console.log(this.y < 0);
},
minPointLength: 5 // Largeur de la colonne
}
},
series: [{
name: 'Estimation Fournisseur',
data: datas,
color: estimeSapColor,
stack: 'male'
}]
});
}
})
.done(function() {
console.log("success");
$('.highcharts-button').hide();
$('.highcharts-axis-title').hide();
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can notice that the first element is May 2013 and the last is may 2014.
Is there a way, a condition, a function, to take the column of may 2014 to put it next to may 2013, without adding a series object?
EDIT:
It should look like this:
How to change the default animation from right to left for series in high charts as animation:false will remove animation and by default whenever chart loads its from left to right but i want it from right to left..
I am adding the link in addition to that which captures live data and then it is displayed in high charts.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/
`$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});`
Highcharts drilldown is not working . Scenario is From graph, if i click any point It needs to show another graph using avgTimes.testIds (check below json). But i am unable to get testId value when i click on the point.
Please check Json and Javascript for reference .
"this.series.data.indexOf( this.point )" code is not working to get the indexValue, it is giving "undefined" as response.Please check javascript code
Response json Json:
{
"testid": {
"name": "testId",
"data": [
208,
207,
206,
205,
202
]
},
"xaxis": {
"xaxis": "xaxis",
"data": [
"2016/03/21 01:50:04",
"2016/03/20 04:56:20",
"2016/03/20 04:41:56",
"2016/03/18 11:09:53",
"2016/03/18 09:33:15"
]
},
"avgTimes": {
"name": "avgTime",
"units": "ms",
"data": [
1894,
3141,
44966,
1792,
22929
],
"testIds": [
208,
207,
206,
205,
202
]
}
}
Below is the javascript which i am using
var options;
var chart;
$(document).ready(function() {
init();
});
function init() {
$('#back_btn').hide();
options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
enabled: true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'<b>'+ this.x +': '+ this.y+' '+'</b><br/>'+
'TestId: '+this.series.options.testIds[this.series.data.indexOf(this.point)];
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function() {
//document.write(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$('#dateDisplay').text(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$.getJSON("http://localhost:8080/reports/graph/transaction?testId="+this.series.options.testIds[this.series.data.indexOf( this.point )], function(json){
options.xAxis.categories = json.xAxis.xaxisList;
options.series[0] = json.avgTimes;
options.series[1] = json.tps;
options.series[2] = json.minTimes;
options.series[3] = json.maxTimes;
options.xAxis.labels = {
formatter: function() {
//return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
return Highcharts.dateFormat('%l%p', Date.parse(this.value));
//return this.value;
}
}
options = new Highcharts.Chart(options);
$('#back_btn').show();
});
}
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'line',
name: '',
data: []
}]
}
$.getJSON("http://localhost:8080/reports/graph/tests?limit=10&offset=1&env=stg&project=MarketplaceOffers&userCount=10", function(json){
options.xAxis.categories = json.xaxis.data;
options.series[0]= json.avgTimes;
//options.series[1]=json.testid;
//options.series[1].extra= json.testid;
chart = new Highcharts.Chart(options);
});
}
function goback() {
init();
$('#dateDisplay').text("2013-02");
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Dynamic Drill Down in Highcharts</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="date.js"></script>
<script src="dynamicChats.js"></script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<strong><div id="dateDisplay">2013-02</div></strong>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Back
</body>
</html>
this.point is undefined that's why you can't retrieve the index from this.series.data array. It seems that when a point is clicked on the graph, this refers to the point object itself in the click handler.
You should replace the line bellow :
this.series.options.testIds[this.series.data.indexOf(this.point)]
by this one :
this.series.options.testIds[this.series.data.indexOf(this)]
I also moved the creation of the object options inside the getJSON callback function :
<script>
var chart;
$(document).ready(function () {
init();
});
function init() {
$('#back_btn').hide();
$.getJSON("http://localhost:8080/reports/graph/tests?limit=10&offset=1&env=stg&project=MarketplaceOffers&userCount=10", function (json) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function () {
return Highcharts.dateFormat('%b-%d', Date.parse(this.value));
}
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
'<b>' + this.x + ': ' + this.y + ' ' + '</b><br/>' +
'TestId: ' + this.series.options.testIds[this.series.data.indexOf(this.point)];
}
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function () {
//document.write(this.series.options.testIds[this.series.data.indexOf( this.point )]);
$('#dateDisplay').text(this.series.options.testIds[this.series.data.indexOf(this.point)]);
$.getJSON("http://localhost:8080/reports/graph/transaction?testId=" + this.series.options.testIds[this.series.data.indexOf(this)], function (json) {
options.xAxis.categories = json.xAxis.xaxisList;
options.series[0] = json.avgTimes;
options.series[1] = json.tps;
options.series[2] = json.minTimes;
options.series[3] = json.maxTimes;
options.xAxis.labels = {
formatter: function () {
//return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
return Highcharts.dateFormat('%l%p', Date.parse(this.value));
//return this.value;
}
}
options = new Highcharts.Chart(options);
$('#back_btn').show();
});
}
}
},
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'line',
name: '',
data: []
}]
};
options.xAxis.categories = json.xaxis.data;
options.series[0] = json.avgTimes;
chart = new Highcharts.Chart(options);
});
}
function goback() {
init();
$('#dateDisplay').text("2013-02");
}
</script>
in splin highchart when draw new live point,it remove first point from left.
how can i disable this work in highchart
my chart must be in fix datetime range,and live splin chart must begin in min datetime and finish in max datetime.and do not remove any point.
when recieve to max datetime the point must be clear.
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#LineChart').highcharts({
chart: {
type: 'spline',
zoomType: 'x',
resetZoomButton: {
position: {
x: 0,
y: -30
}
},
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var seri = new Array();
seri = this.series;
setInterval(function () {
var result = ReadAlarmTypes();
var j = 0;
$.each(result, function (index, AlarmTypes) {
var AlarmName = AlarmTypes.AlarmName;
var AlarmTypeId = AlarmTypes.AlarmTypeId;
//Read Last Device's Log Value
var signals = ReadLatestLogs(AlarmTypeId);
if (signals != null) {
$.each(signals, function (index, signal) {
var series1 = seri[j];
var x = (new Date(signal.DateTime)).getTime(), // current time
y = signal.Value;
series1.addPoint([x, y], true, true);
});
}
j++;
});
}, 5000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
//min: (new Date(GetShiftTime())).getTime()
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: getSeri('Online')
});
});
});
Check your condition to remove from left or not, if you need to remove call :
series1.addPoint([x, y], true, true);
else call:
series1.addPoint([x, y], true, false);