Develop Reference

Make months on x-axis clickable on chart.js line chart

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.

C3: Adding y2 axis on the fly

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.

How to use jQuery when redrawing a chart?

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 **

Toggle between charts using highcharts

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

KendoUI grid cells trim the data values

Hi I'm experiencing some issues with the kendoui grid.
It looks like it is trimming the data value that is passed to the grid.
For example 'chai chai' will be trimmed to 'chai chai'.
This would be ok if only I didn't need to display the exact data that is in the database.
How to ignore this default behavior?
Issues code sample

The issue is not with the Kendo Grid. Its default HTML behavior to remove more than one space. To resolve this you just need to replace space with in your Product Name while creating the products variable.

Try looking at the CSS property to preserve white space here http://www.w3schools.com/CSSref/pr_text_white-space.asp