I'm creating a line chart with chart.js. My x-axis is time-based and displays months.
Each "month column" should be clickable/selectable, but I cannot find a way to manage this. Methods like getElementAtEvent() return data, so I can find out which month is selected. But they only work if the user clicks right on a point, and not anywhere in the "column".
How can I do that? Or is there already a plugin for this?
I was able to get this working using an undocumented time scale prototype method called .getValueForPixel(), which returns the scale value of the scale region that was clicked.
This method returns a moment object that was used to generate the scale tick label, so you can use the same format string configured for your time scale when displaying this value (if you want them to be visually equal). I coupled this with the generic onClick option config property for a pretty simple approach for what you are wanting to do.
Here is how to do it. In your options object, add an onClick property using this function.
onClick: function(e) {
var xLabel = this.scales['x-axis-0'].getValueForPixel(e.x);
console.log(xLabel.format('MMM YYYY'));
alert("clicked x-axis area: " + xLabel.format('MMM YYYY'));
},
Here is a codepen example to see it in action.
Related
I know that I can create additional Y axis by using the c3.generate(...) as shown in this example.
My question is: can I achieve the same in another moment (e.g. on a click event)?
My application already uses user inputs (e.g. clicks) to dynamically add new columns, by directly by using the load() function and providing the data series (without using generate).
Does something similar exist for dynamically showing other Y axis?
Thank you
If you want to change only the column which are used as reference for the axis, then you can just load it with the load() function:
chart.load({
axis:{
colA:'y',
colB: 'y2
}
})
When you want to switch the visibility of the y2 axis, then you cannot use the load function since it has only limited access (see reference at the API-part).
The only way I see is manipulating the chart configuration on the fly by using chart.internal.config, you can just give it a try.
I currently have a chart which I place in my page by calling
function myChart(aParameter) {
// here is some code which queries data based on aParameter
// and sets a variable later used for series: [...] in the chart below
$("#mychartid").highcharts({...})
}
This function is then called when a choice on some radio buttons is done:
$('#productselect input[type=radio]').change(function(){
myChart($(this).val())
})
It works fine, but is not effective: the complete redrawing of the chart moves the page and I need to scroll back on the chart.
When searching for a solution, I found a good question and answers which gives some details on how to correctly update a chart (which I hope will fix my issue). It suggests to first create a chart (chart = new Highcharts.Chart(chartOptions)) and then use incantations of chart.series[0].setData(data,true); to update the data.
The point I am missing is how to initially position such a chart on my page (using jQuery), similar to my $("#mychartid").highcharts({...}) above?
You can still create the chart exactly as you are, except that you assign it to a variable. So
$("#mychartid").highcharts(chartOptions);
var chart = $("#mychartid").highcharts();
Then you can perform whatever actions you want on chart, including the
chart.series[0].setData(data,true);
Example:
http://jsfiddle.net/3d3fuhbb/111/
** UPDATED to correct code **
I have a chart that has a range selector on the upper left corner which allows the user to select from 1M, 3M, 6M, 1Y, 3Y, 5Y, All. This same chart also allows the user to input specific dates using date input boxes which are located on the top right of the chart.
When the user selects a range from the rangeSelector, the date in the input boxes change to match the range selected, which is pretty default behavior.
My objective:
I need to save the range selection so that when the user comes back to the chart, i can set the same range selection he had before leaving. Right now the chart defaults to 1Y.
What i've tried:
If the user clicks on the range selector options specifically, i know i can also access what has been clicked on by using the x-axis events (below). This does not help me because i need to know what is selected from an event that takes place outside of the chart. I won't have access to that rangeSelector event.
if (typeof (e.rangeSelectorButton) !== 'undefined') {
alert('count: ' + e.rangeSelectorButton.count + 'text: ' +
e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
}
I know there is a way to get the inputs from the date input boxes, so i believe i can reset those dates when re-rendering the chart. If i do this, the rangeSelector will not have the highlighted option (1M, 3M, 6M, etc..) as it would if it was clicked on, but the chart will still render for the right dates. If there's no better alternative, i might use this solution.
var minDate = $('input.highcharts-range-selector:eq(0)').val();
var maxDate = $('input.highcharts-range-selector:eq(1)').val();
However, i'm still wondering if there is a way for me to get the currently selected rangeSelected option without interacting with the chart. In other words, is there a way for me to get this information without having to click on the rangeSelector?
Thanks,
TS
You need to catch afterSetExtremes then get values (min,max) and set cookie. When you load the page, check a cookie and call setExtremes
I'm using Highstock on a project and want to allow for dynamically adding more data to the beginning or end of a series by changing the rangeInputs.
The problem is that out of the box, HighStock doesn't seem to validate rangeInput inputs that are beyond the chart's current max/min.
Here's a link to one of their jsfiddles: jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/events-setextremes/
In this example, I would want to type "2011-05-11" into the "To" field and fire an event to go get data. However, typing "2011-05-11" doesn't ever fire the "setExtremes" event or do anything.
Any ideas?
EDIT
Based on the answer I marked as accepted, I created a Highcharts plugin that overwrites the current functionality. https://github.com/d-nation/highstock-beyond-extremes.
Yes, Highstock checks if input date is beyond extremes, and overwrites to min/max value of data. Possible solution is to add two null points and the end and beginning of data, for example:
data: [ [timestamp0, null] , [timestamp1, x] .... [timestampN, xN], [timestampN+1, xN] ]
Live example: http://jsfiddle.net/MCLXV/
Another solution is to edit sources to prevent that.
Setting xAxis.ordinal = false does the trick. See documentation: http://api.highcharts.com/highstock/xAxis.ordinal
Taken from this answer: Highstock - Set extremes beyond the data range
I have requirement where in need to switch between different charts using options from drop down or radio button. The chart i click must overwrite previous chart and show different chart with same data.
I have simulated similar kind of code but finding it difficult to overwrite with previous.
Here is the jsfiddle reference in my comments:
Any help appreciated.
Thanks,
Sohan
You can also use update() function, which allows to update type of serie, so data will be the same, but line can be replaced with column or other types.
http://api.highcharts.com/highcharts#Series.update()
EDIT:
$.each(chart.series,function(i,serie){
serie.update({
type:'column'
});
});
Couple of series:
http://jsfiddle.net/GGvmM