I looked up Highcharts' API references and couldn't find a particular function to select a time range.
My purpose is to bind a function to an input button. When I click on it, it will choose a range.
I found that in Highstock there's a range selector with built-in buttons.
Is there any existing function to do that in Highcharts? Or how can I do it with custom javascript?
If you want something simple, like a preset range requiring no interaction from user by selecting over the graph area, you can use what is explained in this link.
Improving a bit, the idea is that your button handles the values needed for the range and supply them to the function below. When it runs, the graph gets redrawn, reflecting the new range.
function renderGraph(xmin, xmax, ymin, ymax){
var chart = new Highcharts.Chart({
xAxis: {
min: xmin,
max: xmax
},
yAxis: {
min: ymin,
max: ymax
},
chart: {
renderTo: "graph-container",
},
title: { text: null },
credits: { enabled: false}
});
}
Hope it helps.
if you're able to use the built-in range selector, try specifying the selected option (api reference), like this:
rangeSelector: {
enabled:true,
buttons: [
{type: 'week', count: 6, text: '6w'},
{type: 'week', count: 12, text: '12w'}
],
selected: 1 // uses a zero-based index
},
if this doesn't suit your needs, and if you're reading the chart data from json, then you could try something like the following:
$('#button_id_value').click(function() {
buildChart(some_hardcoded_time_value_selection); // you will have to specify a value that matches your json data
});
function buildChart(selected_time_value){
d3.json("/path/to/your/data.json", function(error, json_data) {
if (error) return console.warn(error);
chart_series = json_data.filter(function(d, i){
return (selected_time_value == d["time_value"]);
});
$('#container').highcharts({
chart: {type: 'column'},
// ... more chart options ...
series: chart_series,
// ... more chart options ...
});
});
});
fyi - this last solution requires d3 and jquery.
Related
I know the ApexCharts can help to display data using timeline chart.
but the example(vue) only shown how to display the date like
new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime() ```
how can I change the value to display time? like 08:00-09:00
You can create your own x-axis labels in the dataset using the chart's xaxis categories option.
For example:
options: {
chart: {
id: 'mychart'
},
xaxis: {
categories: ['8:00','9:00','10:00','11:00','12:00','1:00','2:00','3:00']
}
}
Use the formatter on the axis: https://apexcharts.com/docs/options/xaxis/. It isn't exactly the format you asked for, but will set you in the right direction. There are getMinutes() getSeconds() and GetHours() among other functions that can be used to then construct a format you want.
xaxis: {
type: 'datetime',
labels: {
formatter: function (val: number) {
return new Date(val).toLocaleTimeString()
}
}
},
I have a highcharts chart that is dynamically updated. I add the values to the series using the "AddPoint" function on the series. Here is how I am initializing the chart.
var _trendToolChart = null;
var _trendSeries = null;
function createTrendTool() {
_trendToolChart = Highcharts.chart('trendToolContainer', {
chart: {
type: 'spline',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: 'Trending Signals'
},
yAxis: {
title: {
text: 'Values'
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
responsive: {
rules: [{
condition: {
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
_trendToolChart.showLoading("Loading...");
}
I keep the _trendToolChart variable as a global reference for later. On the regular I query our API to get a value. The value return is an x value of a datetime and a y value of a decimal. Since I have a multi line series, I have a WebId associated with each line on the chart itself. I find the series by this GUID, then add a point to the series.
Here's inside the function when I call it on the second:
var xValue = Date.UTC(apiResponse.DateString); // convert str to date
var yValue = apiResponse.Value; // decimal value
var point = [xValue, yValue];
// add to series & graph
var chartSeries = $.grep(_trendToolChart.series, function (e) { return e.userOptions.WebId == apiResponse.elemId; })[0];
chartSeries.addPoint(point);
_trendToolChart.redraw();
When I add these values to the chart, highcharts instead adds the x value as integer counts, not as a date. Here's the check inside the response function on chrome's developer side:
So instead of a series of ["11/27/2017",22] I get [0, 22] in my x values. And it shows on my chart, my xaxis labels has a "0" or 1 and not a Date.
Here's what I tried, instead of addPoint([Date,number]);, I've done addPoint ({x:Date, y:number}); Now that showed in the points on the highchart series with a date value, but then on my chart visually I saw, ZERO points added after the redraw.
What am I doing wrong?
Alright, it seems that the object being put in the x value was not a date, despite what it seems. It was actually a string.
So this returns a string:
Date("2017-11-27")
As a result, highcharts didn't know how to interpret that as a datetime, since I told it to do datetime in the options. The solution was this:
moment("2017-11-27").ToDate()
This returned a proper date object, and highcharts was able to interpret.
Is it possible to use a Highcharts navigator with a given data set and time range to trigger an event to filter the data set displayed in a regular HTML table below? I dont want the main chart at all, just want to use the navigator functionality.
Basically, I'm visualizing a time picker, say for the past 7 days, with a data plot for the last 7 days - with the last "24" hours selected, and a HTML table below this highcharts navigator.
As the user changes his time range selection in the navigator, my event listener would trigger a change in the rows displayed below in the HTML table.
Anyone have suggestions on how to do this?
Thanks in advance!
Just set small height for a chart and add sepcific series for navigator. Something like that: http://jsfiddle.net/Yrygy/137/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 120
},
yAxis: {
height: 1
},
xAxis: {
min: 2,
max: 4,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}
},
navigator: {
series: {
data: [1,2,3,4,2,3,4,2,33,4,4,3,2,3,2,3,3,2,2,3,4]
}
},
series: [{
data: [null]
}]
});
I have a chart made with highcharts.js.
The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.
BEFORE:
AFTER:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'graph',
type: 'area',
},
xAxis: {
title: {
text: ''
},
startOnTick: false,
endOnTick: false,
tickmarkPlacement: 'on',
},
series: [{
data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
}],
});
// the button handler
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);
});
});
See this JsFiddle:
http://jsfiddle.net/MaurizioPiccini/d746v/3/
It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).
Is it possible to have named categories to start and end at the graph extremes?
You can use workaround which, updatse your axis with defined min/max value.
chart.xAxis[0].update({
categories: ['bb', 'bb', 'cc', 'dd'],
min: 0.5,
max: 2.5
});
http://jsfiddle.net/d746v/6/
I found a solution that is also reporteed here:
http://forum.highcharts.com/highcharts-usage/highchart-ticks-start-point-change-when-categories-names-are-t29052/
The solution is not to use categorized xAxis but linear or datetime with label formatter like this:
xAxis: {
labels: {
formatter: function(){
return categories[this.value];
}
}
}
where categories is an array of categories.
It looks like that is the only way to make the chart behave this way.
I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?
I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.
If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data