Related
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>
I had to print the values of Active_Employees & Employees_Plan in bar chart like in this
Image
Means to make a bar representing the comparison in the last bar. It would be more suitable if concise code is provided.
function BarChart()
{
var emp = 0;
myData = "{ 'date':'" + startdate + "', 'Level1':'0','Level2':'0','Level3':'0','Level4':'0','Level5':'0','Level6':'0', 'EmployeeId':'" + emp + "'}";
$.ajax({
type: "POST",
url: "NewDashboard.asmx/BarChart",
contentType: "application/json; charset=utf-8",
data:myData,
success: OnSuccessBarChart,
// function (result) {
// alert(result.d);
//},
error: onError,
cache: false
});
}
function OnSuccessBarChart(data,status)
{
var bar_array = [];
if (data.d != null) {
var bar_data = jsonParse(data.d);
$.each(bar_data, function (i, option) {
//OSA.push(
// {
// name: option[i].Active_Employees,
// data: parseFloat(option[i].Employees_Plan)
// })
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat([option.Employees_Plan] + "/" + [option.Active_Employees])
);
});
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'BarCharts',
type: 'bar',
height: 300
},
title: {
text: 'Month Planned by Employees '
},
colors: [
'#604228'
],
credits: { enabled: false },
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
},
formatter: function () {
return this.x + ':' + this.y;
}
},
plotOptions: {
series: {
shadow: false,
borderWidth: 1,
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Plan of Current Month', 'Total Active Employee', 'Plans Made by Active Employees'],
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
text: 'Plans of Active Employees',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
series: [{
showInLegend: false,
data: bar_array
}]
});
}
I would try something like this:
$.each(bar_data, function (i, option) {
var emp_plan = option.Employees_Plan;
var active_emp = option.Active_Employees;
var plan_ratio = emp_plan / active_emp;
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat(plan_ratio).toFixed(2)
);
});
I'm trying to manipulate a chart with input boxes. Each input box should correspond to a bar. In my code, I can get the first function at the bottom of the highcharts to work, but identical code with the bar changed and the input id doesnt work. Function in question is the last function with season-2 as id.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
xAxis: {
categories: ['2016-17', '2017-18', '2018-19', '2019-20', '2020-21', '2021-22'],
title: {
text: 'Season'
}
},
yAxis: [{
title: {
text: '$ Dollars'
}
}],
plotOptions: {
series: {
borderColor: '#2c3e50',
point: {
events: {
drag: function(e) {
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
if (this.category == "2016-17"){
$('#season-1').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2017-18"){
$('#season-2').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2018-19")
{
$('#season-3').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2019-20"){
$('#season-4').val(Highcharts.numberFormat(e.y, 2));
} if (this.category == "2020-21"){
$('#season-5').val(Highcharts.numberFormat(e.y, 2));
}
},
drop: function() {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
}
}
},
stickyTracking: false
},
column: {
stacking: 'normal'
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
yDecimals: 2
},
series: [{
name: 'Salary Cap',
data: [94000000, 102000000, 108000000, 109000000, 114000000]
}, {
name: 'Tax Cap',
data: [113000000, 122000000, 130000000, 132000000, 139000000]
}, {
name: 'New Contract',
data: [10996155, 10996155, 10996155, 10996155, 10996155],
draggableY: true,
// drag: function() { console.log(arguments); },
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: 'whitesmoke'
}, {
name: 'Current Payroll',
data: [110492645, 103423474, 97903566, 62944822, 28751775],
//draggableX: true,
draggableY: false,
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}, function(chart) {
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[0].update({
y: val
});
})
},
function(chart) {
$('#season-2').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[1].update({
y: val
});
})
});
http://jsfiddle.net/twq6gb7d/
What I did is I isolated the change functions from inside the highcharts initialization function, and let JQuery handle it by selecting the container of the chart and calling the highchart function.
Snippet of the code:
.... //rest of the code
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}); //end of the highchart initialization
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
$('#container').highcharts().series[3].data[0].update({
y: val
});
});
... // other change functions
Working JSFiddle here.
I am using highcharts to display a graph.
I am having trouble displaying the time in the tooltip.
If i send time in data object of seriesdata object it displays correctly but not the other way around.
var renderchart = function (seriesData) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'barGrpahcontainer',
type: 'bar',
backgroundColor: '#d3d3d3',
animation: false
},
title: {
text: ''
},
xAxis: {
opposite: false,
categories: null,
title: {
text: ''
},
labels: {
enabled:false
}
},
yAxis: {
min: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: ''
},
opposite: true
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.y + '<br/>' + 'Time: ' + this.time;
}
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 20
}
},
series: seriesData
});
}
var dataArray = [{"status":"Program Running","y":0.08,"color":"#01BC01","time":"00:13:47"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:41"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:28"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:14"},{"status":"Program Stopped","y":0.04,"color":"#FEC201","time":"00:07:45"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:43"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:47"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:00"},{"status":"Program Stopped","y":0.01,"color":"#FEC201","time":"00:01:55"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:19"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:16"},{"status":"Program Stopped","y":0.05,"color":"#FEC201","time":"00:08:52"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:46"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:02:53"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:03"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:24"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:50"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:11"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:09"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:21"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:20"},{"status":"Program Stopped","y":1.67,"color":"#FEC201","time":"05:00:27"},{"status":"NO DATA","y":5.26,"color":"#444849","time":"15:47:37"}]
$(function () {
var data = dataArray;
var seriesData = [];
var total = 0;
var i, cat;
var count = 0;
for (i = 0; i < data.length; i++) {
seriesData.push({
name: data[i].status,
data: [data[i].y],
color: data[i].color,
time: data[i].time
});
}
var chart;
$(document).ready(function () {
renderchart(seriesData)
});
});
The reason of that is parameter, which is kept in this.series.options.time instead of this.time.
Fixed formatter:
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.y + '<br/>' +
'Time: ' + this.series.options.time;
}
},
Demo:
http://jsfiddle.net/vwdzxawv/
I have a question related to HighCharts. Below is my code for implementing a highchart with integer values on yaxis and date on x-axis. I am getting my data from database both date and values.
The x-axis date and time isn't displayed correctly. In my database it looks like that ,2015-04-27 15:26:41.463 .
var a = [];
$('#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];
xAxis[0].setCategories(x);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
categories: a
},
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, 1);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
data: series
}]
});
UPDATE
This is what I have reached now
.success(function (point) {
for (i = 0; i < point.length; i++) {
myDate[i] = point[i].date_time;
value[i] = point[i].value_db;
}
for (j = 0; j < myDate.length; j++) {
var temp = new Array(myDate[j], value[j]);
mySeries[j] = temp;
}
DrawChart(mySeries, myDate, value);
})
function DrawChart(series, x, y) {
//Fill chart
$('#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];
}
}
},
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: series
}]
});
}
UPDATE2
Help Please.
You'll have to change myDate[i] = point[i].date_time; to:
myDate[i] = parseInt((point[i].date_time).substring(6, 19));
So that it will contain the UTC date format of the datetime.
Then you will have to use xAxis.labels.formatter like this:
xAxis: {
labels: {
formatter: function() {
var date = new Date(this.value);
return date.getFullYear() + "-" +
date.getMonth() + "-" +
date.getDate() + " " +
date.getHours() + ":" +
date.getMinutes() + ":" +
date.getSeconds();
}
}
}
to tell the chart how to show it's xAxis labels.
And for showing more labels in yAxis, you can use:
yAxis: {
tickInterval: 100 // if you want the labels to show every 100 values
}