I am using Highcharts 4.2.5.
The Range Selector is partially displayed. The from & to date boxes are not displayed, but sometimes if i enlarge the page , i see the date fields, but the date field is readonly. One more observation, i see the date field if the chart width is big. But with multiple line charts the date does not come.
Below is my options
{
"tooltip" : {
"useHTML": "true",
"headerFormat" : "{point.key}<br>"
},
"credits" : {
"enabled" : true
},
"navigator" :{
"enabled": true
},
"scrollbar" :{
"enabled": true
},
"rangeSelector" : {
"allButtonsEnabled" : true
},
"legend" : {
"enabled" : true
},
"title" : {
"text" : ""
},
"series" : []
}
Input shows when the chart has enough space, otherwise the input hides. If you want to force input to be always enabled, you need to set it in options.
rangeSelector: {
enabled: true,
inputEnabled: true
},
Example: http://jsfiddle.net/bnmb05eu/
Related
I have an grid with date column in which I applied a filterable option and i did not get any results when I filter.
My grid:
var element = $("#grid").kendoGrid({
dataSource: {
data: gridDataSource,
schema: {
model: {
fields: {
Date: { type: "date", editable: false },
}
}
}
},
scrollable: true,
filterable : true,
columns: [
{
"field": "Date", "title": "Date", "format": "{0:MM/dd/yyyy}", filterable : {ui: function (e) {e.kendoDatePicker({format: "MM/dd/yyyy"})}}, width: "100px" }],
});
Probably is missing .data("kendoGrid"); in end of kendogrid() declaration.
For convinience I did an working example.
Hope this help
ps: Filter by 1966/01/27 in example to check.
I created a highstock spline graph with half an hour interval data. The graph displays on "1 month,3 month" selectors, disappear on "all" selector. There are too many data points which could be the problem; but my other hourly dataset has even more data and works just fine.
See all the code in jsFiddle:https://jsfiddle.net/gbr1v9yu/8/
Here is my code for highchart:
$('#chart-A').highcharts('StockChart', {
rangeSelector : {
selected : 0
},
title : {
text : 'Water Level'
},
// xAxis: {
// ordinal: false
// },
yAxis: {
title:{text:'Water Level(m)'},
labels: {
align:'left',
formatter: function () {
return this.value + ' m';
}
}
},
navigator : {
enabled : false
},
colors: ['#0000FF'],
series : [{
type: 'spline',
name : 'Water Level',
data : tsData,
tooltip: {
valueDecimals: 2,
valueSuffix: 'm'
}
}]
});
Can anyone help me out? Thanks a lot.
I need to get inline editing in datatable columns and following is my code.
Contact.DataTable = $('#otable').DataTable( {
"ajax": {
"url" : '/Contact/' + Contact.id,
"dataSrc": function(json) {
return json.data;
},
},
"responsive": true,
"columns": [
{ "data": "id"},
{ "data": "Course", "sClass": "course" },
{ "data": "Category", "sClass": "category" },
{ "data": "name" },
{
"render": function ( data, type, method, meta ) {
return Contact.saveContact(method);
}
},
]
} );
I need to get inline editing for the fields
Course - dropdown box showing as inline
Category - text field showing as inline
There will be a 'save' button each row - This will save the changes after editing dropdown and text.
Please help me to get inline editing and save without using editor plug-in.
I've got a working Highstock graph that breaks with a data series of about 140 points. I know Highstock can take over 50,000 points so I'm not sure what is happening with mine.
The JSON is fine. I tested it line by line and watched the chart break around the 140th entry.
$(function() {
$.getJSON('stock2.json', function(data) {
$('#container1').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled : $('#container').width() > 480
},
title : {
text : 'Turnover and Spread Comparison with TSE for N225'
},
yAxis : [{
title : {
text :'Spread (BPS)'
},
opposite : false,
},
{
title : {
text :'Average Daily Turnover (Billion JPY)'
},
}],
legend : {
enabled : true,
floating : true,
align : 'left',
shadow : true,
layout : 'vertical',
x : 100,
y : -332,
borderWidth : 2,
borderColor : '#8BCAFF',
backgroundColor : '#FFFFFF'
},
colors : ['#8BCAFF','#BC0000', '#030060', '#BC0000', '#030060' ], // Line colours
series : [{
name : 'Turnover',
data : data.d1,
pointStart: Date.UTC(2010, 10, 4),
pointInterval: 3600 * 1000 * 24 * 7,
type : 'column',
yAxis : 1,
tooltip : {
valueDecimals : 2,
valueSuffix : ' JPY'
}
}]
});
});
});
The API doesn't show a proper example how to use connectNulls property. I had a few attempts but no luck. Here is what I have:
Attempt 1:
plotOptions :
{
line: { connectNulls : true}
},
This results in: TypeError: Cannot read property 'x' of undefined
Attempt 2:
plotOptions :
{
series:
{
gapSize: null,
line: { connectNulls : true}
}
},
This doesn't give me any errors, so I assume this is closest to be the correct way, however nothing changes: the points from either side of null points are not connected.
Can anyone share a code snipped that shows the correct way of doing it?
The highcharts API has two examples for the connectNulls property: one for true, and one for false.
http://api.highcharts.com/highcharts#series.connectNulls
The true example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-true/
A snippet from the true example:
plotOptions: {
series: {
connectNulls: true
}
},
The false example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-false/
A snippet from the false the example:
plotOptions: {
series: {
// connectNulls: false // by default
}
},
The default of false is a thoughtful choice, because when you connect values when there is no data, the results can lead to false assumptions on the part of the viewer of the chart.
UPDATE
Here's a Highstock example:
$(function() {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
connectNulls: true,
data : [
[1112832000000,43.56],
[1112918400000,43.74],
[1113177600000,41.92],
[1113264000000,null],
[1113350400000,null],
[1113436800000,37.26],
[1113523200000,35.35],
[1113782400000,35.62],
[1113868800000,37.09],
[1113955200000,35.51],
[1114041600000,37.18],
[1114128000000,35.50],
[1114387200000,36.98],
[1114473600000,36.19],
[1114560000000,35.95],
[1114646400000,35.54],
[1114732800000,36.06]
],
tooltip: {
valueDecimals: 2
}
}]
});
});