I'm able to have some output with highstocks timeline chart, but when I hover on the chart, for every inch that my cursor moves, I get a javascript error:symbol is undefiend,
is is the url to image from my error
this is my markup:
<div style="padding: 10px">
<style>
.highcharts-container {
direction: ltr;
}
</style>
<div id="widget47"></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
window.chart = new Highcharts.StockChart({
'chart': {
'renderTo': 'widget47'
},
'exporting': {
'enabled': true
},
'title': {
'text': 'sale report in time period'
},
'yAxis': {
'plotLines': [{
'value': 1,
'width': 2,
'color': 'silver'
}]
},
'credits': {
'enabled': false
},
'rangeSelector': {
'selected': 4
},
'plotOptions': {
'series': {
'compare': 'value'
}
},
'series': [{
'name': 'M1POS',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 2100000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 0,
'_symbolIndex': 0,
'marker': {
'enabled': true
}
}, {
'name': 'Cipherlab PDA CP50',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 2100000.],
[Date.UTC(2013, 11, 03, 11, 07, 19), 6300000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 1,
'_symbolIndex': 1,
'marker': {
'enabled': true
}
}, {
'name': 'Cipherlab PDA CP 60',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 2100000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 2,
'_symbolIndex': 2,
'marker': {
'enabled': true
}
}, {
'name': 'Cipherlab PDA CP30',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 4200000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 3,
'_symbolIndex': 3,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA M3T(WiFi.Bluetooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 4500000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 4,
'_symbolIndex': 4,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA 6200(Wifi.Scanner.Bluthooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 7700000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 5,
'_symbolIndex': 5,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA 6500(Gsm.Wifi.Scaner.Camera.Bluthooth.Gps)',
'data': [
[Date.UTC(2013, 09, 11, 10, 48, 02), 1800000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 6,
'_symbolIndex': 6,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA B8000',
'data': [
[Date.UTC(2013, 09, 11, 10, 48, 39), 1700000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 7,
'_symbolIndex': 7,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA MM3(WiFi.Scanner.Bluetooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 48, 39), 1800000.]
],
'_colorIndex': 8,
'_symbolIndex': 8,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Orange stylus pen',
'data': [
[Date.UTC(2013, 09, 11, 10, 51, 08), 3500000.]
],
'_colorIndex': 9,
'_symbolIndex': 9,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Orange(GSM.Wifi.Scaner.Camera.Bluthooth.GPS.RFID)',
'data': [
[Date.UTC(2013, 09, 11, 10, 51, 44), 500000.]
],
'_colorIndex': 10,
'_symbolIndex': 10,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA M3T (WiFi Scaner Bluetooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 51, 44), 500000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 11,
'_symbolIndex': 11,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Sky(GSM.Wifi.Scaner.Camera.Bluthooth.GPS.RFID)',
'data': [
[Date.UTC(2013, 09, 11, 10, 53, 02), 1100000.]
],
'_colorIndex': 12,
'_symbolIndex': 12,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Sky(Gsm.Wifi.Scaner.Camera.Bluthooth.Gps)',
'data': [
[Date.UTC(2013, 09, 11, 10, 53, 02), 1100000.]
],
'_colorIndex': 13,
'_symbolIndex': 13,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Sky(Wifi.Bluthooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 53, 02), 1100000.]
],
'_colorIndex': 14,
'_symbolIndex': 14,
'marker': {
'enabled': true
}
}, {
'name': 'Pars تبلت صنعتی پی دی ای صنعتی',
'data': [
[Date.UTC(2014, 01, 15, 08, 35, 03), 90000.],
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.],
[Date.UTC(2014, 02, 18, 09, 16, 19), 20000.],
[Date.UTC(2014, 02, 19, 09, 15, 34), 30000.],
[Date.UTC(2014, 02, 20, 10, 37, 38), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 15,
'_symbolIndex': 15,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 9',
'data': [
[Date.UTC(2014, 01, 15, 08, 35, 03), 187300.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.],
[Date.UTC(2014, 02, 19, 09, 15, 34), 30000.],
[Date.UTC(2014, 02, 20, 10, 38, 14), 0.],
[Date.UTC(2014, 02, 22, 12, 08, 31), 0.]
],
'_colorIndex': 16,
'_symbolIndex': 16,
'marker': {
'enabled': true
}
}, {
'name': 'Test Pack',
'data': [
[Date.UTC(2014, 01, 15, 11, 10, 52), 192000.]
],
'_colorIndex': 17,
'_symbolIndex': 17,
'marker': {
'enabled': true
}
}, {
'name': 'dsssffsdf',
'data': [
[Date.UTC(2014, 01, 15, 11, 11, 14), 96000.]
],
'_colorIndex': 18,
'_symbolIndex': 18,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 10',
'data': [
[Date.UTC(2014, 01, 15, 11, 14, 32), 52500.],
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.],
[Date.UTC(2014, 02, 01, 09, 14, 53), 24500.],
[Date.UTC(2014, 02, 18, 09, 16, 19), 30000.],
[Date.UTC(2014, 02, 20, 10, 37, 38), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 19,
'_symbolIndex': 19,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 6',
'data': [
[Date.UTC(2014, 01, 15, 11, 27, 33), 7500.],
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.],
[Date.UTC(2014, 02, 20, 10, 38, 47), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 20,
'_symbolIndex': 20,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 7',
'data': [
[Date.UTC(2014, 01, 15, 11, 28, 25), 1300.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.],
[Date.UTC(2014, 02, 20, 10, 38, 14), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 21,
'_symbolIndex': 21,
'marker': {
'enabled': true
}
}, {
'name': 'Woosim Mobile Printer PortiW40',
'data': [
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.]
],
'_colorIndex': 22,
'_symbolIndex': 22,
'marker': {
'enabled': true
}
}, {
'name': 'Woosim Mobile Printer WSP-i250',
'data': [
[Date.UTC(2014, 02, 18, 09, 16, 19), 20000.]
],
'_colorIndex': 23,
'_symbolIndex': 23,
'marker': {
'enabled': true
}
}]
});
/*]]>*/
</script>
as you can see my data is ordered by date in ascending format, but I get error #15??
any help is appreciated.
The undefined symbol error appears when you specify a value of 5 or above for _symbolIndex. I'm not sure what your _symbolIndex settings are meant to be doing, they're not part of the API docs, but if you take them out, the problem goes away.
The error 15 is being caused by a misordered date. The Date.UTC function (confusingly) expects a zero-based month parameter but you're giving it one-based months, so where you've got:
Date.UTC(2014, 01, 29, 10, 30, 12)
you haven't set January 29th as you might expect, you've set February 29th (in a non leap year) which JavaScript interprets as March 1st.
Related
So as seen in the code snippet below, I'm just trying to create a chart/control combination dashboard via Google Charts and I'm having some difficulties with datetime fields, despite following the reference material on that.
My areas of confusion are as follows:
1. Why do the dates shown on the chart appear to be off by one month? I've entered dates for August & September, yet September & October are showing up on the chart.
2. Why does the chart displayed for the ChartRangeFilter appear to jump back to older dates (around the October 2 mark)?
google.charts.load('current', {
packages: ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
[{
"type": "datetime",
"label": "date"
}, {
"type": "number",
"label": "presence"
}],
["Date(2017, 08, 29, 12, 17, 25)", 1],
["Date(2017, 08, 29, 15, 06, 39)", 0],
["Date(2017, 08, 29, 17, 28, 27)", 1],
["Date(2017, 08, 30, 09, 14, 33)", 0],
["Date(2017, 08, 30, 13, 17, 28)", 1],
["Date(2017, 08, 30, 14, 03, 52)", 0],
["Date(2017, 08, 30, 17, 31, 12)", 1],
["Date(2017, 08, 30, 22, 14, 45)", 0],
["Date(2017, 08, 30, 22, 15, 48)", 1],
["Date(2017, 08, 31, 08, 41, 30)", 0],
["Date(2017, 08, 31, 13, 22, 06)", 1],
["Date(2017, 08, 31, 13, 33, 33)", 0],
["Date(2017, 08, 31, 15, 23, 41)", 1],
["Date(2017, 08, 31, 15, 48, 11)", 0],
["Date(2017, 08, 31, 22, 15, 45)", 1],
["Date(2017, 09, 01, 09, 18, 40)", 0],
["Date(2017, 09, 01, 19, 29, 50)", 1],
["Date(2017, 09, 02, 11, 24, 07)", 0],
["Date(2017, 09, 02, 14, 13, 04)", 1],
["Date(2017, 09, 03, 09, 48, 48)", 0],
["Date(2017, 09, 03, 13, 27, 42)", 1],
["Date(2017, 09, 03, 13, 51, 46)", 0],
["Date(2017, 09, 03, 15, 44, 59)", 1],
["Date(2017, 09, 04, 10, 02, 20)", 0]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var chart_options = {
"legend": { "position": "none" },
"vAxis": {
"ticks": [{
"f": "Not Present",
"v": 0
}, {
"f": "Present",
"v": 1
}],
"maxValue": 1,
"minValue": 0
},
"title": "Chart"
};
var chart = new google.visualization.ChartWrapper({
'chartType': 'SteppedAreaChart',
'containerId': 'chart',
'options': chart_options
});
var control_options = {
"filterColumnLabel": "date"
};
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': control_options,
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart" style="width: 100%; height: 100%"></div>
<div id="control" style="width: 100%; height: 100%"></div>
</div>
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
I am trying to manually set the length of a category axis. In detail I want the length of the x axis equal to the length of the y axis. So far I tried diverse layout settings from plotly manual without results.
var layout = {
width: 400,
height: 300,
plot_bgcolor: '#98ff6d',
};
var data = [{
z: [
[1, 20, 10, 12, 1, 1, 20, 10, 12, 1],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 20, 12, 0],
[1, 20, 10, 12, 1, 13, 20, 0, 12, 21],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 1, 12],
[1, 20, 10, 12, 1, 1, 20, 10, 12, 14],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 13, 4, 12, 16, 1, 21, 20, 0, 18],
[1, 20, 0, 12, 1, 21, 65, 10, 12, 1],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 15, 0],
[1, 20, 10, 12, 1, 1, 30, 10, 12, 14],
[24, 13, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 29, 1, 19, 31],
[1, 20, 10, 12, 1, 31, 0, 10, 12, 19],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 11, 21],
[1, 0, 10, 12, 1, 1, 10, 10, 12, 21],
[24, 1, 0, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 1, 19, 36],
[1, 20, 10, 12, 1, 21, 21, 10, 12, 31],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 12, 4, 12, 16, 1, 21, 43, 12, 18],
[1, 20, 10, 12, 1, 1, 39, 10, 12, 13],
[24, 1, 12, 19, 0, 1, 20, 12, 2, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 1, 11],
[1, 20, 10, 12, 1, 19, 38, 10, 12, 16],
[24, 12, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 29, 4, 12, 3],
[1, 20, 0, 12, 1, 1, 23, 10, 12, 11],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 19, 4, 12, 16, 1, 20, 10, 12, 19],
[1, 20, 10, 12, 1, 1, 24, 10, 12, 0],
[24, 1, 12, 19, 023, 1, 22, 10, 12, 1],
[8, 1, 41, 12, 16, 1, 20, 10, 12, 11]
],
x: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10'],
y: ['Messung 1', 'Messung 2', 'Messung 3',
'Messung 4', 'Messung 5', 'Messung 6',
'Messung 7', 'Messung 8', 'Messung 9',
'Messung 10', 'Messung 11', 'Messung 12',
'Messung 13', 'Messung 14', 'Messung 15',
'Messung 16', 'Messung 17', 'Messung 18',
'Messung 19', 'Messung 20', 'Messung 21',
'Messung 22', 'Messung 23', 'Messung 24',
'Messung 25', 'Messung 26', 'Messung 27',
'Messung 28', 'Messung 29', 'Messung 30',
'Messung 31', 'Messung 32', 'Messung 33',
'Messung 34', 'Messung 35', 'Messung 36'
],
type: 'surface'
}];
Plotly.newPlot('plot', data, layout, {
displayModeBar: true,
displaylogo: false
});
#plot {
height: 100vh, width:100vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"></div>
Give your layout Object a scene, and set your desired range on its axis, yaxis, and (if you like) zaxis properties. E.g.
var MIN_VAL = -100, MAX_VAL = 100;
var layout = {
scene:{
axis: {
nticks: 10,
range: [ MIN_VAL, MAX_VAL ]
},
yaxis: {
nticks: 10,
range: [ MIN_VAL, MAX_VAL ]
},
zaxis: {
nticks: 7,
range: [ MIN_VAL, MAX_VAL ]
},
aspectmode: "manual",
aspectratio: { x: 1, y: 1, z: 0.7 },
bgcolor : '#98ff6d'
},
autosize: false,
width: 400,
height: 300,
margin: { l: 0, r: 0, b: 50, t: 50, pad: 4 }
};
Plotly.newPlot('plot', data, layout);
Plotly has a working example (that shows the use of even more layout options) on CodePen.
I want to connect null values with dotted lines in the chart.
Below is the url to JS fiddle where my code resides -
data: [
[Date.UTC(2016, 1, 1),null],
[Date.UTC(2016, 2, 1),null],
[Date.UTC(2016, 3, 1),500],
[Date.UTC(2016, 4, 1),600],
[Date.UTC(2016, 5, 1),null],
[Date.UTC(2016, 6, 1),700],
[Date.UTC(2016, 7, 1),null],
[Date.UTC(2016, 8, 1),null],
[Date.UTC(2016, 9, 1),null],
[Date.UTC(2016, 10, 1),null],
[Date.UTC(2016, 11, 1),null],
[Date.UTC(2017, 0, 1),500]
],
http://jsfiddle.net/Ashish_developer/ue0wb8w0/
You can use series.zones to define which part of the graph will be dashed.
Based on your data, the algorithm for building the zones array could be sth like this (feel free to adjust it the way you want):
function buildZones(data) {
var zones = [],
i = -1, len = data.length, current, previous, dashStyle, value;
while (data[++i] === null);
zones.push({
value: i
});
while (++i < len) {
previous = data[i - 1];
current = data[i];
dashStyle = '';
if (previous !== null && current === null) {
dashStyle = 'solid';
value = i - 1;
} else if (previous === null && current !== null) {
dashStyle = 'dot';
value = i;
}
if (dashStyle) {
zones.push({
dashStyle: dashStyle,
value: value
});
}
}
return zones;
}
Series config:
series: [{
zones: buildZones(data),
zoneAxis: 'x',
data: data,
connectNulls: true
}]
example: http://jsfiddle.net/asf52ft8/
I Think Its Fine For You.. This Graph Suitable For Irregular Intervals
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Kerala, India'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2017',
data: [
[Date.UTC(2017,01,01), 0],
[Date.UTC(2017,04,01), 6],
[Date.UTC(2017,05,01), 3],
[Date.UTC(2017,06,01), 7],
[Date.UTC(2017,07,01), 5],
[Date.UTC(2017,12,01), 6],
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Try this One too
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: 'Winter 2013-2014',
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: 'Winter 2014-2015',
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
<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>
I want the time interval to be half month for x-axis. I figured out I can use pointInterval, but I am not sure why it doesn't work as expected
http://jsfiddle.net/nizsu/otatsrbq/
I expect the x-axis value to be: Aug 26, Sep 11, Sep 26
html
<div class="module" id="changelist">
<div id="chart1" style="min-width: 90%; height: 400px; margin: 0 auto"></div>
</div>
js
$(function () {
$('#chart1').highcharts({
xAxis: {
type: 'datetime',
pointInterval: 13 * 24 * 3600 * 1000, //half month interval
pointStart: Date.UTC(2014, 7, 26),
dateTimeLabelFormats: {
month: '%b %e',
year: '%b'
}
},
series: [{
name: 'New Visits',
data: [
[Date.UTC(2014, 7, 26), 50],
[Date.UTC(2014, 7, 27), 60],
[Date.UTC(2014, 7, 28), 65],
[Date.UTC(2014, 7, 29), 70],
[Date.UTC(2014, 7, 30), 20],
[Date.UTC(2014, 7, 31), 10],
[Date.UTC(2014, 8, 1), 75],
[Date.UTC(2014, 8, 2), 80],
[Date.UTC(2014, 8, 3), 85],
[Date.UTC(2014, 8, 4), 77],
[Date.UTC(2014, 8, 5), 70],
[Date.UTC(2014, 8, 6), 20],
[Date.UTC(2014, 8, 7), 17],
[Date.UTC(2014, 8, 8), 80],
[Date.UTC(2014, 8, 9), 75],
[Date.UTC(2014, 8, 10), 73],
[Date.UTC(2014, 8, 11), 78],
[Date.UTC(2014, 8, 12), 82],
[Date.UTC(2014, 8, 13), 15],
[Date.UTC(2014, 8, 14), 18],
[Date.UTC(2014, 8, 15), 65],
[Date.UTC(2014, 8, 16), 70],
[Date.UTC(2014, 8, 17), 67],
[Date.UTC(2014, 8, 18), 73],
[Date.UTC(2014, 8, 19), 80],
[Date.UTC(2014, 8, 20), 17],
[Date.UTC(2014, 8, 21), 22],
[Date.UTC(2014, 8, 22), 65],
[Date.UTC(2014, 8, 23), 63],
[Date.UTC(2014, 8, 24), 68],
[Date.UTC(2014, 8, 25), 65],
[Date.UTC(2014, 8, 26), 70]
]
}, {
name: 'Total Visits',
data: [
[Date.UTC(2014, 7, 26), 75],
[Date.UTC(2014, 7, 27), 78],
[Date.UTC(2014, 7, 28), 80],
[Date.UTC(2014, 7, 29), 85],
[Date.UTC(2014, 7, 30), 35],
[Date.UTC(2014, 7, 31), 30],
[Date.UTC(2014, 8, 1), 90],
[Date.UTC(2014, 8, 2), 95],
[Date.UTC(2014, 8, 3), 95],
[Date.UTC(2014, 8, 4), 97],
[Date.UTC(2014, 8, 5), 93],
[Date.UTC(2014, 8, 6), 30],
[Date.UTC(2014, 8, 7), 25],
[Date.UTC(2014, 8, 8), 90],
[Date.UTC(2014, 8, 9), 95],
[Date.UTC(2014, 8, 10), 93],
[Date.UTC(2014, 8, 11), 99],
[Date.UTC(2014, 8, 12), 95],
[Date.UTC(2014, 8, 13), 35],
[Date.UTC(2014, 8, 14), 30],
[Date.UTC(2014, 8, 15), 95],
[Date.UTC(2014, 8, 16), 94],
[Date.UTC(2014, 8, 17), 92],
[Date.UTC(2014, 8, 18), 95],
[Date.UTC(2014, 8, 19), 100],
[Date.UTC(2014, 8, 20), 30],
[Date.UTC(2014, 8, 21), 33],
[Date.UTC(2014, 8, 22), 95],
[Date.UTC(2014, 8, 23), 91],
[Date.UTC(2014, 8, 24), 90],
[Date.UTC(2014, 8, 25), 94],
[Date.UTC(2014, 8, 26), 95]
]
}]
});
});
The setting you want is tickInterval, not point interval. You also need to specify startOnTick: true to make it start on your first point.
xAxis: {
type: 'datetime',
tickInterval: 13 * 24 * 3600 * 1000, //half month interval
pointStart: Date.UTC(2014, 7, 26),
startOnTick: true,
dateTimeLabelFormats: {
month: '%b %e',
year: '%b'
}
},
http://jsfiddle.net/pdy4deew/