I have grouped data by year and want to show only 2 bars (2014 + 2015).
Any ideas why highchart also includes months between the bars?
"chart": {
"type": "column"
},
"plotOptions": {
"column": {
"stacking": "normal"
},
},
"series": [
{
"data": [
[1388534400000,88]
],
"name": "First",
"id": "series-8"
},
{
"data": [
[1388534400000,39]
],
"name": "2nd",
"id": "series-9"
},
{
"data": [
[1420070400000,34]
],
"name": "3rd",
"id": "series-10"
}
],
"xAxis": {
"type": "datetime",
"dateTimeLabelFormats": {
"year": "%Y"
}
}
jsfiddle: http://jsfiddle.net/747hs83s/
I would like to have only 2014 and 2015 labels on x-axis.
You can define a pointRange as 1 year (365 * 24 * 3600 * 1000, time in miliseconds) and set tickInterval with the same value.
"plotOptions": {
"column": {
pointRange: 365 * 24 * 3600 * 1000,
"stacking": "normal"
},
},
"xAxis": {
tickInterval: 365 * 24 * 3600 * 1000,
"type": "datetime",
"dateTimeLabelFormats": {
"year": "%Y"
}
}
Example: http://jsfiddle.net/3d3jzywq/
The answer to "why does the chart show months" is simply that there are months between your data points to be shown, and the chart has no way of knowing that you don't want it to show them.
There are probably numerous solutions, but the one I would use is the pointRange property - tell the chart that each column represents a year, and it will display it accordingly:
pointRange:86400000 * 365//one year
Example:
http://jsfiddle.net/jlbriggs/747hs83s/2/
By default, it will show the years as labels. If you show/hide series, that may change. There are a number of ways to format the label as well.
Label formatting references:
http://api.highcharts.com/highcharts#xAxis.labels.format
http://api.highcharts.com/highcharts#xAxis.labels.formatter
http://api.highcharts.com/highcharts#Highcharts.dateFormat
http://api.highcharts.com/highcharts#Highcharts.dateFormats
http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats
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"
}
}
}
]
}
The image speaks by itself, I want to display a duration in hours on the yAxis. but everytime the value reaches 24h, the yAxis resets to 0. the actual value of the blue bar in the image is 28:19:15 but it shows only 4 hours because it has been resetted (4th value of yAxis shows 0)
my current config:
{
"chart": {
"type": "column"
},
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
}
}
},
"series": [
{
"data": [
101955467,
0,
0
],
"dataLabels": {
"enabled": true,
"format": "{y:%H:%M:%S}"
},
"name": "duration",
"stack": null,
"yAxis": "1"
}
],
"xAxis": [
{
"categories": [
"cat 1",
"cat 2",
"cat 3"
]
}
],
"yAxis": [
{
"allow_decimals": false,
"dateTimeLabelFormats": {
"day": "%H:%M",
"hour": "%H:%M",
"minute": "%H:%M",
"month": "%H:%M",
"second": "%H:%M",
"week": "%H:%M",
"year": "%H:%M"
},
"id": "1",
"labels": {
"format": "{value:%H:%M:%S}"
},
"max": 101955467,
"min": 0,
"opposite": false,
"title": {
"text": "duration"
},
"type": "datetime"
}
]
}
In fact, you want to get a total time instead of DateTime. In this case, you'll need to create your own label formatter that will convert milliseconds to a number of hours, minutes and seconds.
Example code:
dataLabels: {
enabled: true,
formatter: function() {
let s, m, h;
s = this.y / 1000;
h = parseInt(s / 3600);
s = s % 3600;
m = parseInt(s / 60);
s = (s % 60).toFixed(0);
let number = (h + ":" + m + ":" + s);
return number;
}
}
API Reference:
https://api.highcharts.com/highcharts/series.column.dataLabels.formatter
Demo:
https://jsfiddle.net/BlackLabel/Lcjewr2o/
I'm working with chart-ios library and i manage to show data in graph like below image.
My Json data is like below. i showing field1+field2+field3 in X and created_at in y axis. this data is for 1 day.
[
{
"created_at": "2020-05-10T00:01:09Z",
"field1": 17.57,
"field2": 56.37,
"field3": 44.06,
"equipment": 3
},
{
"created_at": "2020-05-10T00:01:55Z",
"field1": 17.57,
"field2": 54.52,
"field3": 44.62,
"equipment": 3
},
{
"created_at": "2020-05-10T00:02:40Z",
"field1": 21.63,
"field2": 52.7,
"field3": 51.27,
"equipment": 3
},
{
"created_at": "2020-05-10T00:03:26Z",
"field1": 17.15,
"field2": 54.95,
"field3": 44.21,
"equipment": 3
},
{
"created_at": "2020-05-10T00:04:12Z",
"field1": 15.97,
"field2": 54.69,
"field3": 41.36,
"equipment": 3
},
{
"created_at": "2020-05-10T00:04:57Z",
"field1": 15.86,
"field2": 38.58,
"field3": 36.59,
"equipment": 3
},
{
"created_at": "2020-05-10T00:05:43Z",
"field1": 7.66,
"field2": 51.6,
"field3": 45.46,
"equipment": 3
}
..... 1000 more...
]
What i want is to show x axis label in 1-hour interval. like 11:00, 12:00 and 13:00 , so on. its like fixed 24 hours i want to show, not more than that. but x value count is more than 1000 records.
so how do i do this? can any one point me out in right direction?
Thanks
X value need to be Double -> usually I use timeIntervalSince1970
you need a CustomValueFormatter
set xAxis minimum to date with 00:00
set xAxis maximum to date with 00:00 + 1 day
xAxis.granularity = 3600 -> only show label for every hour
chart.setVisibleXRange(minXRange: 5 * 3600, maxXRange: 5 * 3600) -> show only 5 hour range with scroll
check this project: https://github.com/aiwiguna/ExampleCharts/tree/feature/hourly-charts
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
I am trying to display to my users the number of videos recorded per day with each one of their cameras. To do so I would like to use a stacked back (each stack showing the # of videos recorded with a given camera). Here are the options I am passing in:
var options = {
"title": {
"text": null
},
"legend": {
"layout": "vertical",
"style": { },
"enabled": false
},
"xAxis": {
"type": "datetime",
"minTickInterval": 86400000
},
"yAxis": {
"stackLabels": { "enabled": true },
"title": { "text": null }
},
"tooltip": { "enabled": true },
"credits": { "enabled": false },
"plotOptions": {
"column": { "stacking": "normal" }
},
"chart": {
"defaultSeriesType": "column",
"height": 200,
"borderRadius": 0,
"renderTo": "monthy_chart"
},
"subtitle": { },
"colors": [ "#c7084b","#089fbf","#00d047","#d300d1","#f48400","#f6f400" ],
"series": [
{
"name": "Camera",
"data": [ [ 1362614400000,6 ],[ 1362528000000,2 ] ]
},
{
"name": "NewCamera2",
"data": [ [ 1362614400000,1 ] ]
}
]
};
The graph displays the data correctly but is rendering the columns extremely narrowly even when there are only 2 days of data (image below). Is there a way for me to deine the scale of the x-axis so the widths of the columns will display a bit better?
http://i.stack.imgur.com/NSSYg.png
You can set pointWidth and startOnTick / endOfTick
http://jsfiddle.net/bLrah/
"xAxis": {
startOnTick:true,
endOnTick:true,
"type": "datetime",
"minTickInterval": 86400000
http://api.highcharts.com/highcharts#xAxis.startOnTick
http://api.highcharts.com/highcharts#xAxis.endOnTick
http://api.highcharts.com/highcharts#plotOptions.column.pointWidth