Change in Highcharts values of x-axis with event onClick() - javascript

i would like a suggest...
i have Time series charts (without event to zoom it), my data is this:
data: [
[Date.UTC(2013, 5, 14), 0.7695],
[Date.UTC(2013, 5, 21), 0.7574],
[Date.UTC(2013, 5, 28), 0.7480],
[Date.UTC(2013, 6, 5), 0.7685],
[Date.UTC(2013, 6, 12), 0.7744],
[Date.UTC(2013, 6, 19), 0.7652],
[Date.UTC(2013, 6, 26), 0.7609],
[Date.UTC(2013, 7, 2), 0.7526],
[Date.UTC(2013, 7, 9), 0.7542],
[Date.UTC(2013, 7, 16), 0.7540],
[Date.UTC(2013, 7, 23), 0.7487],
[Date.UTC(2013, 7, 30), 0.7562],
[Date.UTC(2013, 8, 6), 0.7591],
[Date.UTC(2013, 8, 13), 0.7486],
[Date.UTC(2013, 8, 20), 0.7411],
[Date.UTC(2013, 8, 27), 0.7393]
]
These are the starts of weeks.
i enabled scrollbar of x-axis in my chart and i set range:
xAxis: {
type: 'datetime',
range: 28 * (24 * 3600000) // 4 weeks
},
in this way when the chart is ready, it show me last 4 week (and if i want to see other data, i will use the scrollbar)...
The problem is that the values of x-axis aren't my data :/
How i can to do ?
http://jsfiddle.net/k4ayprz4/
Besides i will insert a button under the chart with event onclick() that will reload the chart but with a new range
xAxis: {
type: 'datetime',
range: 3*(30 * (24 * 3600000)) // 3 months
},
the problem is that the values of x-axis in this case they should be names of months :/
Exist a way to do this ?
Thanks!
EDIT: I corrected the link jsfiddle and the array

Related

Highcharts - how to prevent xAxis redraw when using addSeries?

I have a highstocks scatter chart and after the series data is initialised I add a line of best fit (once I've calculated the endpoints) using addSeries.
The problem I am having is that when I add my new series the xAxis datetime labels all disappear (they are originally drawn correctly). It seems like because the new series only has two points, the chart redraws the xAxis to cater for the new series and draws it with only a single datetime label.
Looks very similar to this issue which was never solved
How can I avoid this happening?
I can't share my actual code as it's embedded in a Java widget on a proprietary framework but this Fiddle shows the same behaviour
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'x'
},
title: {
text: 'Random data'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
type: 'datetime' //,
// startOnTick: true,
// endOnTick: true,
// showLastLabel: true
},
exporting: {
buttons: {
customButton: {
text: 'Add Series',
onclick: function() {
var newRegressionLineSeries = {
type: 'line',
name: 'Line series',
data: [
[Date.UTC(2015, 2, 26), 0.8],
[Date.UTC(2015, 6, 28), 0.7]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
};
this.addSeries(newRegressionLineSeries);
}
}
}
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Data',
color: 'rgba(223, 83, 83, .5)',
data: [
[Date.UTC(2015, 2, 26), 0.9188],
[Date.UTC(2015, 2, 27), 0.9184],
[Date.UTC(2015, 2, 29), 0.9188],
[Date.UTC(2015, 2, 30), 0.9231],
[Date.UTC(2015, 2, 31), 0.9319],
[Date.UTC(2015, 3, 1), 0.9291],
[Date.UTC(2015, 3, 2), 0.9188],
[Date.UTC(2015, 3, 3), 0.9109],
[Date.UTC(2015, 3, 5), 0.9091],
[Date.UTC(2015, 3, 6), 0.9154],
[Date.UTC(2015, 3, 7), 0.9246],
[Date.UTC(2015, 3, 8), 0.9276],
[Date.UTC(2015, 3, 9), 0.9382],
[Date.UTC(2015, 3, 10), 0.9431],
[Date.UTC(2015, 3, 12), 0.9426],
[Date.UTC(2015, 3, 13), 0.9463],
[Date.UTC(2015, 3, 14), 0.9386],
[Date.UTC(2015, 3, 15), 0.9357],
[Date.UTC(2015, 3, 16), 0.9293],
[Date.UTC(2015, 3, 17), 0.9254],
[Date.UTC(2015, 3, 19), 0.9251],
[Date.UTC(2015, 3, 20), 0.9312],
[Date.UTC(2015, 3, 21), 0.9315],
[Date.UTC(2015, 3, 22), 0.9323],
[Date.UTC(2015, 3, 23), 0.9236],
[Date.UTC(2015, 3, 24), 0.9196],
[Date.UTC(2015, 3, 26), 0.9201],
[Date.UTC(2015, 3, 27), 0.9184],
[Date.UTC(2015, 3, 28), 0.9106],
[Date.UTC(2015, 3, 29), 0.8983],
[Date.UTC(2015, 3, 30), 0.8909],
[Date.UTC(2015, 4, 1), 0.8928],
[Date.UTC(2015, 4, 3), 0.8941],
[Date.UTC(2015, 4, 4), 0.8972],
[Date.UTC(2015, 4, 5), 0.8940],
[Date.UTC(2015, 4, 6), 0.8808],
[Date.UTC(2015, 4, 7), 0.8876],
[Date.UTC(2015, 4, 8), 0.8925],
[Date.UTC(2015, 4, 10), 0.8934],
[Date.UTC(2015, 4, 11), 0.8964],
[Date.UTC(2015, 4, 12), 0.8917],
[Date.UTC(2015, 4, 13), 0.8805],
[Date.UTC(2015, 4, 14), 0.8764],
[Date.UTC(2015, 4, 15), 0.8732],
[Date.UTC(2015, 4, 17), 0.8737],
[Date.UTC(2015, 4, 18), 0.8838],
[Date.UTC(2015, 4, 19), 0.8969],
[Date.UTC(2015, 4, 20), 0.9014],
[Date.UTC(2015, 4, 21), 0.8999],
[Date.UTC(2015, 4, 22), 0.9076],
[Date.UTC(2015, 4, 24), 0.9098],
[Date.UTC(2015, 4, 25), 0.9110],
[Date.UTC(2015, 4, 26), 0.9196],
[Date.UTC(2015, 4, 27), 0.9170],
[Date.UTC(2015, 4, 28), 0.9133],
[Date.UTC(2015, 4, 29), 0.9101],
[Date.UTC(2015, 4, 31), 0.9126],
[Date.UTC(2015, 5, 1), 0.9151],
[Date.UTC(2015, 5, 2), 0.8965],
[Date.UTC(2015, 5, 3), 0.8871],
[Date.UTC(2015, 5, 4), 0.8898],
[Date.UTC(2015, 5, 5), 0.8999],
[Date.UTC(2015, 5, 7), 0.9004],
[Date.UTC(2015, 5, 8), 0.8857],
[Date.UTC(2015, 5, 9), 0.8862],
[Date.UTC(2015, 5, 10), 0.8829],
[Date.UTC(2015, 5, 11), 0.8882],
[Date.UTC(2015, 5, 12), 0.8873],
[Date.UTC(2015, 5, 14), 0.8913],
[Date.UTC(2015, 5, 15), 0.8862],
[Date.UTC(2015, 5, 16), 0.8891],
[Date.UTC(2015, 5, 17), 0.8821],
[Date.UTC(2015, 5, 18), 0.8802],
[Date.UTC(2015, 5, 19), 0.8808],
[Date.UTC(2015, 5, 21), 0.8794],
[Date.UTC(2015, 5, 22), 0.8818],
[Date.UTC(2015, 5, 23), 0.8952],
[Date.UTC(2015, 5, 24), 0.8924],
[Date.UTC(2015, 5, 25), 0.8925],
[Date.UTC(2015, 5, 26), 0.8955],
[Date.UTC(2015, 5, 28), 0.9113],
[Date.UTC(2015, 5, 29), 0.8900],
[Date.UTC(2015, 5, 30), 0.8950],
[Date.UTC(2015, 6, 1), 0.8950],
[Date.UTC(2015, 6, 2), 0.8750],
[Date.UTC(2015, 6, 3), 0.8650],
[Date.UTC(2015, 6, 4), 0.8550],
[Date.UTC(2015, 6, 5), 0.8150],
[Date.UTC(2015, 6, 6), 0.8100],
[Date.UTC(2015, 6, 7), 0.8070],
[Date.UTC(2015, 6, 8), 0.8050],
[Date.UTC(2015, 6, 9), 0.7990],
[Date.UTC(2015, 6, 10), 0.7900],
[Date.UTC(2015, 6, 11), 0.7850],
[Date.UTC(2015, 6, 12), 0.7800],
[Date.UTC(2015, 6, 13), 0.7750],
[Date.UTC(2015, 6, 14), 0.7700],
[Date.UTC(2015, 6, 15), 0.7650],
[Date.UTC(2015, 6, 16), 0.7600],
[Date.UTC(2015, 6, 17), 0.7550],
[Date.UTC(2015, 6, 18), 0.7500],
[Date.UTC(2015, 6, 19), 0.7450],
[Date.UTC(2015, 6, 20), 0.7400],
[Date.UTC(2015, 6, 21), 0.7350],
[Date.UTC(2015, 6, 22), 0.7250],
[Date.UTC(2015, 6, 23), 0.7150],
[Date.UTC(2015, 6, 24), 0.7050],
[Date.UTC(2015, 6, 25), 0.6900],
[Date.UTC(2015, 6, 26), 0.6750],
[Date.UTC(2015, 6, 27), 0.6600],
[Date.UTC(2015, 6, 28), 0.6300],
]
}]
});

An easy workaround would be to create a new axis and put the lines with insufficient points on that axis.
I updated the fiddle you provided to achieve this in the following way:
Add new xAxis:
xAxis: [{
id: '0',
title: {
enabled: true,
text: 'Height (cm)'
},
type: 'datetime'
},{
id: '1', //new axis ID
type: 'datetime',
visible: false,
linkedTo: '0'
}],
New lines are added to the new xAxis:
var newRegressionLineSeries = {
xAxis: '1', //Added this
type: 'line',
...
}
Working example: https://jsfiddle.net/xs9toj13/9/

How to show all data in Highchart

How do I ensure that the data are close to each other & sorting by datetime. I want show all data with datetime
var charts = Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
type: 'area',
data: [
[Date.UTC(2015, 9, 25, 14, 13, 00), 3.500],
[Date.UTC(2015, 9, 25, 14, 13, 02), 3.501],
[Date.UTC(2015, 9, 25, 14, 13, 04), 3.502],
[Date.UTC(2015, 9, 25, 14, 13, 06), 3.505],
[Date.UTC(2015, 9, 25, 14, 13, 08), 3.509],
[Date.UTC(2015, 9, 25, 14, 13, 10), 3.507],
[Date.UTC(2015, 9, 25, 14, 13, 12), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 14), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 16), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 18), 3.575],
[Date.UTC(2015, 9, 25, 14, 13, 20), 3.595],
[Date.UTC(2015, 9, 25, 14, 13, 22), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 24), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 26), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 28), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 30), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 32), 3.523],
[Date.UTC(2015, 9, 25, 14, 13, 34), 3.596],
[Date.UTC(2015, 9, 26, 18, 13, 34), 4.596]
]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

In addition to what #Z. Bagley wrote, to resolve this problem you can use couple solutions. The first one would be concerning using Highstock chart. In Highstock chart there is a property called ordinal (true by default) which distributes points equally on xAxis. Secondly, you can use breaks along with setting a new xAxis extremes to decrease distance between the last two dates. You can also try to add a scrollbar.
API Reference:
http://api.highcharts.com/highstock/xAxis.ordinal
http://api.highcharts.com/highcharts/xAxis.breaks
http://api.highcharts.com/highstock/scrollbar
Examples:
http://jsfiddle.net/pbdor59x/ - using Highstock and ordinal property
http://jsfiddle.net/abwpqs19/ - using breaks
http://jsfiddle.net/4cc2n3sp/ - using scrollbar

highcharts.js how to force x-Axis label to display all months regardless of chart size

i am working on a area charts.
http://jsfiddle.net/b8eoszt0/
my example is a bit complex or different from the ones we usually see.
for the data structure, i have 4 weeks aggregated data for each month
eg: Sep1-7: 0, Sep8-15: 20 and so on.
the chart works fine, it displays all data points (5 points each month)
However, for the x-axis labels, what i wanted is to always display "Sep, Oct, Nov, Dec, Jan", regardless what chart size is, because right now, if you resize the broswer, the chart resize, and the a-axis labels are change. sometimes there is less items, sometimes there is more.
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
opposite: true,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: '%b %e',
week: '%b %e',
month: '%b'
},
lineWidth: 0,
startOnTick: false,
endOnTick: false,
tickWidth: 0
},
yAxis: {
gridLineWidth: 0
},
series:[
{
showInLegend: false,
data: [
[Date.UTC(2015, 8, 1), 0],
[Date.UTC(2015, 8, 8), 30],
[Date.UTC(2015, 8, 15), 20],
[Date.UTC(2015, 8, 22), 50],
[Date.UTC(2015, 8, 29), 20],
[Date.UTC(2015, 9, 1), 0],
[Date.UTC(2015, 9, 8), 30],
[Date.UTC(2015, 9, 15), 20],
[Date.UTC(2015, 9, 22), 50],
[Date.UTC(2015, 9, 29), 20],
[Date.UTC(2015, 10, 1), 0],
[Date.UTC(2015, 10, 8), 30],
[Date.UTC(2015, 10, 15), 20],
[Date.UTC(2015, 10, 22), 50],
[Date.UTC(2015, 10, 29), 20],
[Date.UTC(2015, 11, 1), 0],
[Date.UTC(2015, 11, 8), 30],
[Date.UTC(2015, 11, 15), 20],
[Date.UTC(2015, 11, 22), 50],
[Date.UTC(2015, 11, 29), 20],
[Date.UTC(2016, 0, 1), 0],
[Date.UTC(2016, 0, 8), 30],
[Date.UTC(2016, 0, 15), 20],
[Date.UTC(2016, 0, 22), 50],
[Date.UTC(2016, 0, 29), 20],
]
}
],
});
});
i have tried pointinterval, but it doesn't allow Month.
i have tried labels formatter, but it doesnt returns all labels, it seems hightcharts did some filtering before getting into formatter functions.

You can set type on the axis and define your unit.
Check fiddle. I have added the following code in your xAxis. Hope this helps.
type: 'datetime',
units: [
[
'month', [1, 3, 6]
]
]
The first number of the array defines the interval, so for every month I have set 1, you you were to display label only two months the first value would be 2. The next numbers on the array are for allowed multiples, for your requirement this is not needed, a simple 'month', [1] would do. Check the Api Reference for more information.

You can use tickPositioner, for example: http://jsfiddle.net/b8eoszt0/2/
tickPositioner: function(min, max) {
var ticks = this.tickPositions, // original ticks
newTicks = [], // container for a new ticks
start = new Date(ticks[0]); // first tick
// render tick in a first day of the month
start.setDate(1);
// add labels, one for every month:
while (min <= max) {
start.setMonth(start.getMonth() + 1);
min = start.getTime();
newTicks.push(min);
}
// store original info of labels:
newTicks.info = ticks.info;
return newTicks;
},

Fomatting the Highcharts date with correct month

I have a Json Data which i am retrieving from Database for populating the highcharts series
the series data retrieving from DB looks like this.
'series_data' => string '[
{name:'Hyderabad',data:[
[Date.UTC(2013, 05, 01),311328],[Date.UTC(2013, 05, 02),363780],
[Date.UTC(2013, 04, 03),364062],[Date.UTC(2013, 04, 04),283128],
[Date.UTC(2013, 04, 05),322608]] },
{name:'Vijayawada',data:[
[Date.UTC(2013, 06, 01),363216],[Date.UTC(2013, 06, 02),404670],
[Date.UTC(2013, 06, 03),370783],[Date.UTC(2013, 06, 04),459942],
[Date.UTC(2013, 07, 05),569499]] }]'
There is a problem with the javascript Date while showing in the chart, It is showing One month ahead.
I know javascipt Date will accept the month value 0 - 11... 0 is the january and 11 is the December,
So, here my question is, while showing in the highchart how to format the date to show the correct month. I cant format the date in DB side.

You don't have to format dates in database, but you can format it before sending to Highcharts.
Simple instead of:
Date.UTC(2013, 05, 01)
Use:
Date.UTC(2013, 04, 01)
Or even better:
Date.UTC(2013, 4, 1)
Solution in JS:
function subtractMonth(a) {
var date = new Date(a[0]),
month = date.getMonth();
date.setMonth(month - 1);
return [date.getTime(), a[1]];
}
function sorter(a, b) {
return a[0] - b[0];
}
var data = [{
name: 'Hyderabad',
data: [
[Date.UTC(2013, 05, 01), 311328],
[Date.UTC(2013, 05, 02), 363780],
[Date.UTC(2013, 04, 03), 364062],
[Date.UTC(2013, 04, 04), 283128],
[Date.UTC(2013, 04, 05), 322608]
]
}, {
name: 'Vijayawada',
data: [
[Date.UTC(2013, 06, 01), 363216],
[Date.UTC(2013, 06, 02), 404670],
[Date.UTC(2013, 06, 03), 370783],
[Date.UTC(2013, 06, 04), 459942],
[Date.UTC(2013, 07, 05), 569499]
]
}];
$.each(data, function (i, s) {
s.data = s.data.map(subtractMonth);
s.data.sort(sorter);
})
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: data
});
jsFiddle: http://jsfiddle.net/n9nR2/

Usually you do not need to format the date within the data itself. Highcharts has specific configurations for formatting the dates, called dateFormat. They have them for labels and tooltips. Then if you were doing something custom after the chart was created, you might need to do it yourself, but usually not they way you are doing it. Please see these Highcharts API links for examples:
http://api.highcharts.com/highcharts#plotOptions.area.tooltip.dateTimeLabelFormats
http://api.highcharts.com/highcharts#Highcharts.dateFormat

fullcalendar javascript issue - its not showing the events in IE?

On my team website: http://www.berzerkers.org, head over to the Schedule. The calendar is supposed to have a few events listed - it works fine in Firefox, Chrome and Safari - but not in IE...what is the issue? I don't know what to do. Any help would be greatly appreciated! :)

Wherever you data is being generated from, there's an empty array element at the end of the events array:
events: [{id: 1, title: "BT Big Game", start: new Date(2009, 7, 8, 8), end: new Date(2009, 7, 8)},{id: 2, title: "Team Meeting # Clubhouse", start: new Date(2009, 7, 2, 20), end: new Date(2009, 7, 2)},{id: 3, title: "Trip to Stingray", start: new Date(2009, 7, 7, 15), end: new Date(2009, 7, 7)},{id: 4, title: "Practice / Eazy's Going Away Party # Cousins SI", start: new Date(2009, 7, 16, 8), end: new Date(2009, 7, 16)},{id: 5, title: "Berzerkers Team Tryouts at NYCPB", start: new Date(2009, 7, 11, 20), end: new Date(2009, 7, 11)},]
Notice the ,] at the end.
This is causing IE to throw an error when it tries to parse it.

Categories