I noticed that when I render a data a line graph, some of the data points are rendered higher or lower than the actual data values. This occurs when the chart width is smaller than normal (in my case, it occurs at a width of 358px).
This example demonstrates the problem using highcharts-ng:
$scope.chartConfig = {
"useHighStocks": true,
"options": {
},
"credits": {
"enabled": false
},
"series": [
{
"type": "line",
"data": seriesData,
"threshold": null,
"id": "series-1"
},
{
"type": "bar",
"data": seriesData,
"threshold": null,
"id": "series-2"
}
]};
It renders the same series twice (once as a line, and the second time as a bar graph) to illustrate the discrepancy.
The solution is to turn off the dataGrouping feature in Highcharts:
dataGrouping:{enabled: false}
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 2 spline charts that I want to compare on a singe graph. The first should take up the top 25% of the plot area and the second should take up the bottom 75% of the plot area. To achieve this, I tried the following:
"yAxis": [{
"height": "25%",
"id": "blue",
"labels": {
"enabled": false
},
"title": {
"text": ""
},
"min": 267.15,
"max": 289.15,
"index": 0
},{
"id": "red",
"height":"75%",
"top": "25%",
"min": 265,
"max": 290,
"plotLines": [{
"color": "#fff8df",
"value": 285.15
}, {
"color": "#fff8df",
"value": 279.15
}, {
"color": "#c5eded",
"value": 273.15
}],
"index": 1
}],
The problem with this is that I have a min/max set (the graph is showing temperatures and we only care about a certain range). Because of these combined things, the graph is drawing right over the xAxis and outside of the expected plot area.
see: https://jsfiddle.net/06f9huam/
What I would like to see is the red line to be cut off if it goes below 265, just like it gets cut off when it goes over 290.
You can cut the unnecessary parts of lines by using clip-path attribute, example:
chart: {
animation: false,
events: {
load: function() {
const series1 = this.series[0];
const series2 = this.series[1];
const clipRect1 = this.renderer.clipRect(
series1.yAxis.left - series1.group.translateX,
series1.yAxis.top - series1.group.translateY,
series1.yAxis.width,
series1.yAxis.height
);
const clipRect2 = this.renderer.clipRect(
series2.yAxis.left - series2.group.translateX,
series2.yAxis.top - series2.group.translateY,
series2.yAxis.width,
series2.yAxis.height
);
series1.graph.clip(clipRect1);
series2.graph.clip(clipRect2);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/15e3g78w/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#clipRect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#clip
Issue
We are currently implementing a highcharts graph for large datasets that will require the boost module for performance reasons. However, on enabling the boost module we have encountered an intermittent issue that is proving challenging to consistently reproduce and isolate.
Because I am not able to replicate this I cannot create a jsfiddle as of yet. Does anyone have any idea how to isolate and fix this?
The graph should look like this:
Expected graph
But occasionally does this:
Actual graph
This has also happened on another occasion whilst manually testing with different data:
With different data
It has been observed on
Chrome 70.0.3538.67
IE 11.345.17134.0
Highcharts JS & Boost module v6.1.4
Input data
Sample of the type of data:
{
"label": "2018-04-19T15:17:02",
"value": "1"
}, {
"label": "2018-04-19T15:17:05",
"value": "9620035.36877074"
}, {
"label": "2018-04-19T15:17:59",
"value": "9583104.14689662"
}, {
"label": "2018-04-19T15:18:46",
"value": "9604094.84064805"
}, {
"label": "2018-04-19T15:20:17",
"value": "9571679.9536289"
}, {
"label": "2018-04-20T08:18:24",
"value": "7902991.39771514"
}
Or:
{
"label": "2018-04-19T15:17:59",
"value": "1.4132e-007"
}, {
"label": "2018-04-19T15:18:46",
"value": "1.41434e-007"
}, {
"label": "2018-04-19T15:20:17",
"value": "1.41355e-007"
}, {
"label": "2018-04-20T08:18:24",
"value": "1.40532e-007"
}, {
"label": "2018-04-20T08:20:35",
"value": "1.40928e-007"
}, {
"label": "2018-04-20T08:23:51",
"value": "1.4078e-007"
}, {
"label": "2018-04-20T08:24:39",
"value": "1.40901e-007"
}
Graph config
{
"chart": {
"type": "line",
"zoomType": "x",
"panning": true,
"panKey": "shift"
},
"boost": {
"usePreallocated": false
},
...
y-axis label customisation
title
exporting
etc
...
"series": [{
"showInLegend": false,
"name": "",
"data": []
}],
}
Update mechanism
When the HTTP response comes back the following is called on the graph instance:
graphToUpdate.series[0].setData(parsedData, true, true, false);
Is there any way in High Charts to get the exact data which was used to render a chart?
I have already tried using "options" but it returns the whole JSON structure. I only need the data with which the chart was rendered.
{
"chart": {
"marginRight": 80
},
"xAxis": {
"categories": [
"Jan",
"Feb"
],
"title": {
"text": "xAxisName"
}
},
"series": [
{
"data": [
29.9,
71.5
]
},
{
"data": [
144,
176
]
}
]
}
For example, if I had rendered a chart using the above object, I need to retrieve the same object after the chart has rendered.
You can get those options via chart.userOptions.
http://jsfiddle.net/zd3q8t2L/
If you try to combine stacked series with a flag series there is an odd behaviour where only the flag series gets drawn. If you toggle it in the legend everything gets drawn properly.
http://jsfiddle.net/x9gaca75/
$("#container").highcharts({plotOptions: {series: {stacking: "normal"}}, ...});
What configuration am I missing to make this behave properly?
There is a bug in Highstock, where setting plotOptions.series.stacking will set the same for flags. Of course, stacking won't work for flags since those don't have values. In other words, workaround is to set stacking = false for flags:
options.series.push({
"stacking": false, // disable stacking
"show_in_legend": false,
"name": "Flags",
"type": "flags",
"data": [{
"x": 1432215000000.0,
"title": "AM"
}, {
"x": 1432229400000.0,
"title": "Midday"
}, {
"x": 1432245600000.0,
"title": "Peak Hour"
}, {
"x": 1432247400000.0,
"title": "Rolling, PM"
}]
});
Demo: http://jsfiddle.net/x9gaca75/1/