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>
Related
Is it possible to change the animation of line chart on Apexcharts.js from bottom-top to left-right when launching the chart?
I forked this example on Codepen and dug the docs but can't a way to do that.
<div id="chart">
</div>
#chart {
max-width: 650px;
}
var options = {
chart: {
height: 380,
type: "line",
id: "areachart-2"
},
dataLabels: {
enabled: false
},
stroke: {
curve: "straight"
},
series: [
{
data: series.monthDataSeries1.prices
}
],
labels: series.monthDataSeries1.dates,
xaxis: {
type: "datetime",
labels: {
rotate: 0,
formatter: function(val) {
return dayjs(val).format('MMM YYYY')
}
},
tooltip: {
formatter: function(val) {
return dayjs(val).format('MMM YYYY')
}
}
},
tooltip: {
x: {
formatter: function(val) {
return dayjs(val).format('MMM DD, YYYY');
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
var totalIncident = [151, 169, 311, 614, 840];
var ransomDemands = [18, 60, 150, 383, 555];
var forensicsCosts = [24, 33, 58, 109, 103];
var xCat = ['2017', '2018', '2019', '2020', '2021'];
var defaultValues = new Array(totalIncident.length).fill(null);
var totalIncidentD = [...defaultValues]
var ransomDemandsD = [...defaultValues]
var forensicsCostsD = [...defaultValues]
var options = {
series: [{
name: "Total Incident Costs",
data: defaultValues
}, {
name: "Ransom Demands",
data: defaultValues
}, {
name: "Forensics Costs",
data: defaultValues
}],
colors: ['#A0CEE8', '#4060AC', '#EC6058'],
chart: {
height: 500,
width: 1200,
type: 'line',
zoom: {
enabled: false
},
fontFamily: 'Raleway, sans-serif',
animations: {
speed: 13000,
easing: 'linear',
dynamicAnimation: {
speed: 1000
}
}
},
dataLabels: {
enabled: true,
formatter: function (val, opt) {
if (val === null) return;
return val + "K"
},
},
stroke: {
curve: 'straight'
},
title: {
text: 'Ransomware',
align: 'center'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.5
},
},
xaxis: {
type: 'category',
tickPlacement: 'between',
categories: xCat,
},
yaxis: {
min: 0,
max: 1000,
labels: {
formatter: function (value) {
return value + "K";
}
},
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
var i = 0;
var dataInterval = setInterval(function () {
totalIncidentD[i] = totalIncident[i];
ransomDemandsD[i] = ransomDemands[i];
forensicsCostsD[i] = forensicsCosts[i];
chart.updateSeries([{
name: "Total Incident Costs",
data: totalIncidentD
}, {
name: "Ransom Demands",
data: ransomDemandsD
}, {
name: "Forensics Costs",
data: forensicsCostsD
}])
i = i + 1;
if (i === xCat.length) clearInterval(dataInterval)
}, 1000)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.apexcharts-canvas {
margin: auto;
}
</style>
</head>
<body>
<div id="chart"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>
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 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:
Highcharts - Multiple pie charts from json
Let's say I have a server with 4 hard drives. How do I show 4 pie charts, one for each hard drive? It works if the chart type is stacked column (code below).
JSON produces this output:
[{
"name":"Drive",
"data":["C:","D:","E:","F:"]},{
"name":"Free",
"data":[673869,2267920,105627,307096]},{
"name":"Used",
"data":[94029,2264810,6373,104]
}]
And my script code (for stacked column):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacked column chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
colors: ['#50B432', '#ED561B'],
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Server',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Used / Free'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +' '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#000000',
formatter: function() {
return bytes(this.point.y, true);
}
}
}
},
series: []
}
$.getJSON("data2.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
function bytes(bytes, label) {
if (bytes == 0) return '';
var s = ['MB', 'GB', 'TB', 'PB'];
var e = Math.floor(Math.log(bytes)/Math.log(1024));
var value = ((bytes/Math.pow(1024, Math.floor(e))).toFixed(2));
e = (e<0) ? (-e) : e;
if (label) value += ' ' + s[e];
return value;
}
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Thank you for any suggestions.
You can iterate on each json item and create new div (by for example append) and init chart.
What is important, all values in data should be numbers, not strings like you have.
Example:
http://jsfiddle.net/9ov3en2t/
$(function () {
var json = [{
"name": "Drive",
"data": ["C:", "D:", "E:", "F:"]
}, {
"name": "Free",
"data": [673869, 2267920, 105627, 307096]
}, {
"name": "Used",
"data": [94029, 2264810, 6373, 104]
}];
var each = Highcharts.each,
$charts = $('#charts');
each(json,function(item, i) {
$charts.append('<div id="container' + i + '"></div>');
var $chart = $('#container' + i);
$chart.highcharts({
chart:{
type:'pie'
},
series:[{
name: item.name,
data: item.data
}]
});
});
});