I'm not quite sure is this a bug or can be configured in Highstock.
I expect the navigator line to looks the same like the series line. With the red marker I drew how it should looks:
The numbers are really small and you can see the implementation here: http://jsfiddle.net/Vangi/mfgwpsLn/1/
chart = new Highcharts.StockChart({
chart: {
renderTo: "container",
},
xAxis: {
type: 'datetime',
},
series: [{
data: [{
'x': 1413981042000,
'y': 1.0307497910755359E-10
}, {
'x': 1414049332000,
'y': 6.8937692958570551E-06
}, {
'x': 1414153012000,
'y': 6.1638593534807384E-12
}, {
'x': 1414156468000,
'y': 6.1457475393489336E-12
}, {
'x': 1414159924000,
'y': 6.1549662935811433E-12
}, {
'x': 1414166836000,
'y': 6.1692543434910263E-12
}, {
'x': 1414170292000,
'y': 6.1634967962742593E-12
}, {
'x': 1414173748000,
'y': 6.1702021530302131E-12
}, {
'x': 1414184401000,
'y': 6.1611544859008216E-12
}]
}]
});
The problem is with y value, which should not cinaon E-12 value, but full number.
data: [{
'x': 1413981042000,
'y': 1
}, {
'x': 1414049332000,
'y': 6
}, {
'x': 1414153012000,
'y': 1
}, {
'x': 1414156468000,
'y': 1
}, {
'x': 1414159924000,
'y': 1
}, {
'x': 1414166836000,
'y': 1
}, {
'x': 1414170292000,
'y': 1
}, {
'x': 1414173748000,
'y': 1
}, {
'x': 1414184401000,
'y': 1
}]
Example: http://jsfiddle.net/uykeoc3j/3/
Related
I am trying to show a table in my cloud function using the new #assistant/conversation with the array of data but when i test the action i am getting the error as below
Unsuccessful webhook call: Failed to translate JSON to ExecuteHttpResponse
But when i check the logs i am getting the row values like below
{
"responseJson": {
"session": {
"id": "ABwppHE5M8EGlWf3YmpUUGPQ5xxHh-cb2QYyF_YUarZbF_jXq-Ad2iKDtyI8XAyvWPp4hHnQockBWMZuQA",
"params": {},
"languageCode": ""
},
"prompt": {
"override": false,
"content": {
"table": {
"button": {},
"columns": [
"Date",
"Time",
"Place"
],
"image": {},
"rows": [
"20-10-2020",
"11:20",
"Test"
],
"subtitle": "",
"title": ""
}
}
}
}
}
Here is the implementation of my adding table in the conv
const tempDatas = ['20-10-2020', '11:20', 'Test'];
conv.add(
new Table({
dividers: true,
columns: ['Date', 'Time', 'Place'],
rows: tempDatas
})
);
I have used the same logic in google-actions plugin there it works fine.I have imported the Table like below
const { conversation, Table } = require('#assistant/conversation');
Fixed the issue. The structure provided by the new actions builder is little different with the old one
New Structure:
conv.add(new Table({
'title': 'Table Title',
'subtitle': 'Table Subtitle',
'image': ASSISTANT_LOGO_IMAGE,
'columns': [{
'header': 'Column A',
}, {
'header': 'Column B',
}, {
'header': 'Column C',
}],
'rows': [{
'cells': [{
'text': 'A1',
}, {
'text': 'B1',
}, {
'text': 'C1',
}],
}, {
'cells': [{
'text': 'A2',
}, {
'text': 'B2',
}, {
'text': 'C2',
}],
}, {
'cells': [{
'text': 'A3',
}, {
'text': 'B3',
}, {
'text': 'C3',
}],
}],
}));
You can simplify it like below that is the solution for my above issue
const tableRows = [];
tablesRows.push({ 'cells': [{ 'text': moment(data.date).format('DD-MM-YYYY') }, { 'text': data.time }, { 'text': data.place }] });
conv.add(new Table({
'columns': [{
'header': 'Date',
}, {
'header': 'Time',
}, {
'header': 'Place',
}],
'rows': tablesRows,
}));
For more info visit conversation components
The Highchart graph code is shown below I want every bar label color is different. Currently, I'm getting the same color in bar
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Popular '
},
credits:{
enabled:false
},
xAxis: {
max: 20,
type: 'category',
style:{
fontSize: '12px'
}
},
yAxis: {
min: 0,
allowDecimals:false,
title: {
text: 'Number of applications',
style:{
fontSize: '12px'
}
},
gridLineWidth:0,
minorGridLineWidth: 0,
tickLength: 5,
tickWidth: 1,
tickPosition: 'inside',
lineWidth:1
},
scrollbar: {
enabled: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'hi'
},
series: [{
name: Stats',
data: data,
color:'#2ecc71',
pointWidth: 25,
}],
Data format is :
[
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
],
]
The output is shown in the picture I want every bar is in a different color can you help me?
Referring to comments you can set a specific color to a single point by adding a color property programmatically to its object like that:
series: [{
data: [
["Qualcom", 17],
{
name: "The ram",
y: 12,
color: 'red'
},
["Aoperty", 8],
["Ob.", 8],
["Sugh", 8]
],
color: '#2ecc71'
}]
API reference:
https://api.highcharts.com/highcharts/series.column.data.color
Demo:
https://jsfiddle.net/BlackLabel/craqy1sv/1/
If you want to add a specific color to a point when a condition is matched you can loop through each series point in chart load event and update a matched point:
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
if (point.name === 'The ram') {
point.update({
color: 'red'
})
}
});
}
}
}
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/jmuoevz1/
You need to set colorByPoint :true to use different colors like that
series: [{
name: 'Stats',
data: [
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
]
],
colorByPoint: true,
pointWidth: 25,
}]
Fiddle
I have a working, simple highchart chart which plots 'score' against 'time'. There's a demo here: http://jsfiddle.net/akfwsq1e/.
The series data is in the form [time, score]:
"data": [
[1540398983, 3],
[1540398983, 2],
[1540398983, 3],
[1540398983, 2],
[1540398983, 4],
[1540485383, 3]
]
However, I need to append more meta-data as I'd like to extend the chart with filters etc in future. This means that the data from the API is returning named objects:
"data": [
{ 'dateCompleted': 1540398983, 'score': 3, 'category': 'A' },
{ 'dateCompleted': 1540398983, 'score': 2, 'category': 'C' },
{ 'dateCompleted': 1540398983, 'score': 3, 'category': 'A' },
{ 'dateCompleted': 1540398983, 'score': 2, 'category': 'B' },
{ 'dateCompleted': 1540398983, 'score': 4, 'category': 'A' },
{ 'dateCompleted': 1540485383, 'score': 3, 'category': 'C' }
]
For now I'm not too concerned with the filtering, I just need to get the chart to plot the same as it does when using simple object values. When I use named values though the chart silently fails to plot anything.
I can't seem to figure out from the documentation how Highcharts 'knows' which values from a named-object to plot.
Can anyone suggest how to get this working?
Many thanks.
If you won't change the structure of object recieved from server, you could implement your own data parse function, which takes the data with specific structure, and returns the data specially prepared for Highcharts.
Actually it's a bit piece of cake, so I wrote that function:
function mapData(data) {
let arr;
arr = data.map(point => {
return {
x: point.dateCompleted,
y: point.score,
category: point.category
}
})
return arr
}
Live example: http://jsfiddle.net/1jp8v6ns/
Apparently you need to call the values to plot 'x' and 'y' (https://api.highcharts.com/highcharts/series.column.data). So this works:
"data": [
{ 'x': 1540398983, 'y': 3, 'category': 'A' },
{ 'x': 1540398983, 'y': 2, 'category': 'C' },
{ 'x': 1540398983, 'y': 3, 'category': 'A' },
{ 'x': 1540398983, 'y': 2, 'category': 'B' },
{ 'x': 1540398983, 'y': 4, 'category': 'A' },
{ 'x': 1540485383, 'y': 3, 'category': 'C' }
]
I have used Column with drilldown highchart.
and its drilldown is
I am getting the right output in its drilldown but I don't want PlotLine to be visible in the first image. How do I solve this?
$(document).ready(function () { });
angular.module('myModule', []).service("AttendanceService", function ($http) {
this.getdata = function () {
return $http({
method: "post",
url: "GetAttendanceReport",
params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
dataType: "json"
});
};
}).controller('myController', function ($scope,AttendanceService) {
GetAlldata();
function GetAlldata() {
var getAttendanceData = AttendanceService.getdata();
getAttendanceData.then(function (Attendances) {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total Attendance Recorded'
},
plotLines: [{
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: { text: 'goal' },
}],
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
},
series: [{
name: 'Attendance',
colorByPoint: true,
data: [{
name: 'Jan',
y: Attendances.data.YearlyReport[0],
drilldown: 'Jan'
}, {
name: 'Feb',
y: Attendances.data.YearlyReport[1],
drilldown: 'Feb'
}, {
name: 'March',
y: Attendances.data.YearlyReport[2],
drilldown: 'March'
}, {
name: 'April',
y: Attendances.data.YearlyReport[3],
drilldown: 'April'
}, {
name: 'May',
y: Attendances.data.YearlyReport[4],
drilldown: 'May'
}, {
name: 'June',
y: Attendances.data.YearlyReport[5],
drilldown: 'June'
}, {
name: 'July',
y: Attendances.data.YearlyReport[6],
drilldown: 'July'
}, {
name: 'Aug',
y: Attendances.data.YearlyReport[7],
drilldown: 'Aug'
}, {
name: 'Sep',
y: Attendances.data.YearlyReport[8],
drilldown: 'Sep'
}, {
name: 'Oct',
y: Attendances.data.YearlyReport[9],
drilldown: 'Oct'
}, {
name: 'Nov',
y: Attendances.data.YearlyReport[10],
drilldown: 'Nov'
}, {
name: 'Dec',
y: Attendances.data.YearlyReport[11],
drilldown: 'Dec'
}]
}],
drilldown: {
series:
[{
name: 'Jan',
id: 'Jan',
data: [
[
'1',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])
],
[
'2',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
],
[
'3',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
],
[
'4',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
],
[
'5',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
],
[
'6',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
],
[
'7',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
],
[
'8',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
],
[
'9',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
],
[
'10',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
],
[
'11',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
],
[
'12',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
],
[
'13',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
],
[
'14',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
],
[
'15',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
],
[
'16',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
],
[
'17',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
],
[
'18',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
],
[
'19',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
],
[
'20',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
],
[
'21',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
],
[
'22',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
],
[
'23',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
],
[
'24',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
],
[
'25',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
],
[
'26',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
],
[
'27',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
],
[
'28',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
],
[
'29',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
],
[
'30',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
],
[
'31',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
]
]},and so on]
}
});
}, function () {
alert('Error in getting records');
});
} $("#btnLoad").click(function (event) {
GetAlldata();
});
$("#btnBack").click(function (event) {
window.location.href = "homepage";
});
});
This is the full code I have used.
You could remove and add plotLine dynamically when drilling down or up.
Example: http://jsfiddle.net/a5yzsarx/
$(function() {
$('#container').highcharts({
chart: {
events: {
drilldown: function() {
this.xAxis[0].removePlotLine('p1');
},
drillup: function() {
this.xAxis[0].addPlotLine({
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
});
}
}
},
series: [{
type: 'column',
data: [{
y: 42,
drilldown: 's2'
}]
}],
drilldown: {
series: [{
id: 's2',
data: [1, 2, 3]
}]
},
yAxis: {
plotLines: [{
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
}]
}
});
});
http://jsfiddle.net/ramon_ackermann/PhjX7/2/
$(function () {
$('#container').highcharts({
chart: {
type:'column'
},
xAxis: {
min:0,
max:0,
categories: ["test"]
},
series: [{
"name": "ABELO",
"data": [
0.73
]
},{
"name": "UAAU",
"data": [
0.77
]
},{
"name": "ANCB",
"data": [
1.72
]
},
{
"name": "avg",
"type": "line",
"color": "#ff0000",
"data": [
{
"x": -0.5,
"y": 1.5
},{
"y": 1.5,
"dataLabels": {
"enabled": true,
"align": "right",
"verticalAlign": "bottom",
"formatter": function(){
return 'avg: ' + this.y;
},
"style": {
"fontWeight": "normal"
},
"x": 0.5
}
}
]
}
]
});
});
Before updgrading to Highcharts 3, the code above would work properly, drawing the line from left to right, but since I'm trying to upgrade to v3, I can't get the line to draw all the way to the right.
I devised the above solution from my previous question / answers (highcharts line not fully plotted)
The above sample is a simplified version of what I need, unfortunately plotLines is not a solution for me.
Simple solution is to extend another point onto your avg line:
...,{"x": 1.5, "y": 1.5}]
Why is a plotLine not appropriate?
I advice to use plotLine or use renderer.
http://api.highcharts.com/highcharts#yAxis.plotLines
http://api.highcharts.com/highcharts#Renderer.path