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/
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"
}
}
}
]
}
Creating a column chart with some dynamically populated drilldowns. For the surface level, I'm returning the top ten results of my search, some of which share a common name.
Names display as categories just fine for both the surface and drill downs when specifying xAxis type: 'category'. However, since the surface level can have duplicate names, it's stacking them be default. Is there a setting to prevent this?
Thanks!
Perhaps the solution to this issue will be to add the same category data in two separate series. I guess you add it as one series? Check demo I posted you below.
Two series:
"series": [{
"name": "Browsers",
"colorByPoint": true,
"data": [{
"name": "Chrome",
"y": 62.74,
"drilldown": "Chrome2"
},
{
"name": "Internet Explorer",
"y": 7.23,
"drilldown": "Internet Explorer"
}
]
}, {
"data": [{
"name": "Chrome",
"y": 10.57,
"drilldown": "Chrome1"
}]
}]
One series:
"series": [{
"name": "Browsers",
"colorByPoint": true,
"data": [{
"name": "Chrome",
"y": 62.74,
"drilldown": "Chrome2"
},
{
"name": "Internet Explorer",
"y": 7.23,
"drilldown": "Internet Explorer"
},
{
"name": "Chrome",
"y": 10.57,
"drilldown": "Chrome1"
}
]
}]
Demo:
two series - https://jsfiddle.net/wchmiel/h04egdu7/3/
one series - https://jsfiddle.net/wchmiel/pnj3etd4/
I have this simple bubble chart https://jsfiddle.net/zengoric/4qyqokgj/
Highcharts.chart('container', {
chart: {
type: 'bubble',
},
series: [{
"name": "First data set",
"data": [{
"x": 0,
"y": 2,
"z": 4.61,
}],
"sizeByAbsoluteValue": true,
}, {
"name": "Second data set",
"data": [{
"x": -1,
"y": -3,
"z": 4.6,
}],
"sizeByAbsoluteValue": true
}]
});
but it display nothing. Something is wrong with data or it's a bug in highcharts library?
You have to initialize zMin or/and zMax properties to make bubbles visible.
Live demo: https://jsfiddle.net/BlackLabel/gs2dr565/
Bubbles are too small to be drawn in the example that you provided.
API references:
https://api.highcharts.com/highcharts/series.bubble.zMin
https://api.highcharts.com/highcharts/series.bubble.zMax
I have created a spline chart in highcharts, where the x-axis is datetime values, which do not necessarily align between series. Tooltips only appear to snap based on the horizontal position of the mouse, making it extremely awkward to see tooltips for certain points. Code below + fiddle link
$('#container').highcharts({
chart: {
type: 'spline'
},
xAxis: {
type: "datetime"
},
series: [{
"name": "series 1",
"data": [
[Date.parse("2014-12-16T10:41:30.000Z"), 62],
[Date.parse("2015-01-16T10:41:30.000Z"), 64]
]
}, {
"name": "series 2",
"data": [
[Date.parse("2014-12-16T10:44:10.000Z"), 26],
[Date.parse("2015-01-16T10:44:10.000Z"), 26]
]
}, {
"name": "series 3",
"data": [
[Date.parse("2014-12-16T10:44:17.000Z"), 104],
[Date.parse("2015-01-16T10:44:17.000Z"), 104]
]
}]
});
fiddle
It is almost impossible to view the tooltips for 'series 2' with this data.
How can I make the tooltips snap based on distance to the points?
This issue is fixed in the newest master-branch
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}