I am using Highcharts(Highstock) v4.2.5.
I have a linechart with irregular date values on xAxis, and float values on yaxis. My problem is that on hover, the tooltip shows a previous date for the values of next date.
E.g hovering on 06-Apr-2014 data point, shows tooltip with wrong date as 05-Apr-2016 but correct data values.
Why is the date in tooltip showing a previous day?
My JS code is below
{
"xAxis": {
"type": "linear"
},
"tooltip": {
"borderColor" : "red"
},
"credits" : {
"enabled" : true
},
"navigator" :{
"enabled": true
},
"scrollbar" :{
"enabled": true
},
"rangeSelector" : {
"allButtonsEnabled" : true
},
"legend" : {
"enabled" : true
},
"title" : {
"text" : ""
},
"series" : []
}
JSON returned from server is
{
"multilinedata": [{
"name": "BHIBOR O/N Rate",
"data": [
[1377637200000, 2.25], -> this is 28-AUG-2013
[1396731600000, 1] -> this is 06-APR-2014
]
}]
}
I fixed it, by passing the time 24:00:00 to my date conversion method. By passing the time, the date was not pushing back.
Thanks to #Sebastian Bochan and #jlbriggs
Related
Pulling data into Google Data Studio from a Google Sheet with dates stored in yyyy-mm-dd format. The dates look correct and calculate correctly with formulas and adjustments everywhere except in a Gantt chart using the Vega-Lite Community Visualization, which shows the date in a long-number format (e.g. 20210520), and is unable to display the data when using "type": "temporal" or using "timeUnit": "utcyearmonthdatehours".
I've ran various tests, including...
Changing the date format for the date columns to plain text, yyyyddmm, yymmdd, yyyy/mm/dd formats.
Replace the current date columns with new columns using the alternate formats in point 1 (above).
Changing the date field formats directly in Google Data Studio to the formats in point 1 (above).
Creating a secondary set of date columns in plain-text using an Arrayformula and Text() function to reformat the actual dates to plain-text.
So far, options 2 & 4 are the only way I've been able to get the gantt to render correctly, reading the data in date format. But option 2 renders the other charts in GDS as unusable, as the other charts cannot translate the plain-text to usable dates.
Option 4 does work, but isn't the ideal route, given the redundant data. I'd prefer to have just 1 column for the Start Date and another for the End Date, rather than 2 columns for both. Feels like I may be missing something obvious here. Is there a way to either properly format the dates in Google Sheets to work properly with both the GDS date fields and Vega-Lite, or is there a way to properly parse the date data in Vega-Lite without needing to use a second set of plain-text columns?
Report replicating the issue: Project Tracking (debug report)
Edit: below is the code for the Vega-lite visualizations using the date fields from Google Sheets, which Vega-lite is not interpreting as dates.
Without timeunit or temporal field type:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"config": {
"background": null,
"view": {
"stroke": "transparent"
}
},
"layer": [
{
"layer": [
{
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
}
],
"mark": {
"type": "bar",
"cursor": "pointer",
"tooltip": true,
"point": true,
"cornerRadiusEnd": 5,
"opacity": 0.8
},
"encoding": {
"color": {
"field": "$dimension3",
"title": "$dimension3.name"
}
}
}
],
"encoding": {
"x": {
"field": "$dimension0",
"axis": {
"title": null,
"grid": true
}
},
"y": {
"field": "$dimension1",
"title": "$dimension1.name",
"type": "nominal",
"sort": "x",
"axis": {
"title": null,
"grid": true,
"tickBand": "extent"
}
},
"x2": {
"field": "$dimension2"
},
"yOffset": {
"field": "$dimension3"
}
}
}
]
}
With timeunit and field type temporal:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"config": {
"background": null,
"view": {
"stroke": "transparent"
}
},
"layer": [
{
"layer": [
{
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
}
],
"mark": {
"type": "bar",
"cursor": "pointer",
"tooltip": true,
"point": true,
"cornerRadiusEnd": 5,
"opacity": 0.8
},
"encoding": {
"color": {
"field": "$dimension3",
"title": "$dimension3.name"
}
}
}
],
"encoding": {
"x": {
"field": "$dimension0",
"type": "temporal",
"timeUnit": "utcyearmonthdatehours",
"axis": {
"title": null,
"grid": true
}
},
"y": {
"field": "$dimension1",
"title": "$dimension1.name",
"type": "nominal",
"sort": "x",
"axis": {
"title": null,
"grid": true,
"tickBand": "extent"
}
},
"x2": {
"field": "$dimension2"
},
"yOffset": {
"field": "$dimension3"
}
}
}
]
}
I have highstocks set up to display two series of data.
When I zoom all the way the x-axis label for one of the series is always missing.
jsfiddle link
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.StockChart({
chart: {
"renderTo": "container"
},
plotOptions: {
"column": {
"stacking": "normal"
}
},
series: [{
"type": "column",
"name": "column 1",
"color": "#1d8ecd",
"data": [
[1296511200000, 974],
[1301605200000, 1618],
[1306875600000, 990],
[1312146000000, 1720],
[1317416400000, 516],
[1322690400000, 1472],
[1328047200000, 349],
[1333227600000, 1781],
[1338498000000, 649],
[1343768400000, 1124],
[1349038800000, 829],
[1354312800000, 1615],
[1359669600000, 1181]
]
}, {
"type": "column",
"name": "column 2",
"color": "#636466",
"data": [
[1293832800000, 1913],
[1298930400000, 1269],
[1304197200000, 567],
[1309467600000, 668],
[1314824400000, 722],
[1320098400000, 442],
[1325368800000, 1558],
[1330552800000, 1831],
[1335819600000, 373],
[1341090000000, 275],
[1346446800000, 1540],
[1351720800000, 998]
]
}],
});
});
Any ideas why is this happening and if I can force it to display all x-axis labels, at least when there is space for it?
I'm trying to use Highstock and am having a problem. When I have multiple series' on the chart, I want the points from the same day to match up, but currently they don't because Highstock takes the time into account.
Here is an example chart:
$('#chart').highcharts('StockChart', {
plotOptions: {
series: {
animation: {
duration: 0
}
}
},
yAxis: {
labels: {
align: 'right',
x: -4,
formatter: function() {
return '$' + Math.round(this.value);
},
},
tickPixelInterval: 40
},
series : [
{
"name": "Series 1",
"data": [
[
1389486123000,
200
],
[
1389578849000,
200
]
],
"tooltip": {
"valueDecimals": 2,
"valuePrefix": "$"
}
},
{
"name": "Series 2",
"data": [
[
1389486240000,
100
],
[
1389578849000,
100
]
],
"tooltip": {
"valueDecimals": 2,
"valuePrefix": "$"
}
}
]
});
JSFiddle: http://jsfiddle.net/EdvVW/
As you can see in JSFiddle, the second two points match up (and when you hover your mouse over them, they both show up in the tooltip, which is what I'm wanting), but even though the first two points are from the same day they don't match up because their timestamps are different.
Is there any way to decrease the accuracy of the rendered points so that data points from the same day match up regardless of time?
No, it's not possible. You need to have the same timestamp to match points.
You can preprocess your data: go over all points, create date from timestamp, then use Date.UTC(year, month, day); as x-value for a point.
I am having a strange response when I show/hide series clicking in the legend. When I hide a serie the other is incorrectly drawn.
Here is my fiddle:
http://jsfiddle.net/JorgeDuenasLerin/kkE8h/36/
This is the code of the initialization
$('#container').highcharts('StockChart', {
yAxis : [{
height : 180,
lineWidth : 2
}, {
top : 220,
height : 180,
lineWidth : 2
}],
rangeSelector : {
selected : 5
},
tooltip: {
shared: true
},
legend : {
enabled : true
},
title : {
text : 'AAPL Stock Price'
},
series : [
{
name : 'Click on Me!',
data : data,
yAxis: 0,
tooltip: {
valueDecimals: 2
}
},
{
name : 'Click on Me!',
data : data2,
yAxis: 1,
tooltip: {
valueDecimals: 2
}
}
]
});
Someone knows something about it?
Indeed it looks like a known bug reported here: https://github.com/highslide-software/highcharts.com/issues/2348
I'm using highcharts in GXT application.
There are 2 charts in GXT collapsible panel,
one is column chart, the other one is pie chart
And there always pop up an exception showing
(TypeError): c is undefined
fileName: http://127.0.0.1:8888/js/highcharts.js
lineNumber: 118
columnNumber: 0
when injecting the json data for pie chart(column chart works normally).
Does any one can help me to check this?
Here is the JSON data for pie chart
{
"title" : {
"text" : "pie chart"
},
"chart" : {
"type" : "pie",
"renderTo" : "container",
"events" : {
"load" : function(event) { this.id = 'chart320002'; $wnd.registerChart(this, true);}
}
},
"series" : [ {
"name" : "COUNT",
"data" : [ [ "A", 37 ], [ "B", 23 ], [ "C", 21 ], [ "D", 21 ], [ "E", 23 ], [ "F", 19 ], [ "G", 20 ] ]
} ],
"exporting" : {
"buttons" : {"printButton":{"enabled":false}},
"type" : "img/png",
"url" : "http://127.0.0.1:8888/export/hiChart"
},
"credits" : {
"enabled" : false
},
"plotOptions" : {
"pie" : {"dataLabels":{"formatter":function(){return this.point.name+': '+$wnd.Highcharts.numberFormat(this.percentage,2)+'%';}}}
},
"xAxis" : {
"title" : {
"text" : "Compliant"
}
},
"yAxis" : {
"title" : { }
}
}
UPDATE: Include the code from the Highcharts web site, i.e. http://code.highcharts.com/highcharts.js. When I do this, I get pie charts!! Woot!
I have the same issue using different data. All of the line based charts plot correctly.
I copied your JSON to jsfiddle and it runs. Then I pasted your JSON into my project, same error, "c is undefined".
The only difference I can see is that when I do this:
$('#chart').highcharts({...});
I get $(...).highcharts is not a function, so I am using:
var chart = Highcharts.Chart({...});
Code for my pie chart that generates the same error.
var piechart = new Highcharts.Chart({
chart: {
borderColor: '#000000',
borderWidth: 2,
margin: 32,
renderTo: 'piechart',
type: chartType
},
series: [{
name: 'Channel',
data: [{
name: 'Web',
y: 75.6
},{
name: 'Mail',
y: 24.4
}]
}],
title: {
text: 'Revenue'
},
});
Which also runs in jsfiddler as $('#piechart').highcharts ..., but not my web page.