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>
Related
When displaying two separate bar graph charts, the xaxis labels disappear but when only 1 graph is displayed, the labels are displayed fine.
Do you have an idea about this?
Displaying two graphs:
Displaying one graph:
Below is the javascript used:
<script>
var statement = [
[gd(2018, 2, 1), 44578],
[gd(2018, 2, 2), 550],
[gd(2018, 2, 3), 600],
[gd(2018, 2, 4), 500],
[gd(2018, 2, 5), 700],
[gd(2018, 2, 6), 38339],
[gd(2018, 2, 7), 28518],
[gd(2018, 2, 8), 21629],
[gd(2018, 2, 9), 50716],
[gd(2018, 2, 10), 29774],
[gd(2018, 2, 11), 24562],
[gd(2018, 2, 12), 63659],
[gd(2018, 2, 13), 29186],
[gd(2018, 2, 14), 62470],
[gd(2018, 2, 15), 82143],
[gd(2018, 2, 16), 12774],
[gd(2018, 2, 17), 13607],
[gd(2018, 2, 18), 7058],
[gd(2018, 2, 19), 32801],
[gd(2018, 2, 20), 25184],
[gd(2018, 2, 21), 22912],
[gd(2018, 2, 22), 35300],
[gd(2018, 2, 23), 20038],
[gd(2018, 2, 24), 21566],
[gd(2018, 2, 25), 73290],
[gd(2018, 2, 26), 43411],
[gd(2018, 2, 27), 36330],
[gd(2018, 2, 28), 40766]
];
var dataset = [{
label: "Consumption",
data: statement,
color: "#ffa500",
bars: {
show: true,
align: "center",
barWidth: 24 * 60 * 60 * 600,
lineWidth: 2,
fill: 1
}
}];
var options = {
xaxis: {
mode: "time",
tickSize: [3, "day"],
timeformat: "%e %b",
tickLength: 0,
rotateTicks: 135,
axisLabel: "",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 1,
axisLabelFontFamily: "Calibri",
axisLabelPadding: 1,
color: "black"
},
yaxes: [{
position: "left",
color: "black",
axisLabel: "'000 kWh",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Calibri",
axisLabelPadding: 15,
align: "center",
tickFormatter: function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
}],
legend: {
container: $("#legendContainer"),
noColumns: 2,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 1,
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
}
};
$(document).ready(function() {
$.plot($("#graph-placeholder"), dataset, options);
});
function gd(year, month, day) {
return Date.UTC(year, month - 1, day);
}
<script>
var statementMonthly = [
[gdMonthly(2018, 1, 1), 0],
[gdMonthly(2018, 2, 1), 2351.8],
[gdMonthly(2018, 3, 1), 1209.6],
[gdMonthly(2018, 4, 1), 1205.6],
[gdMonthly(2018, 5, 1), 0],
[gdMonthly(2018, 6, 1), 515.382],
[gdMonthly(2018, 7, 1), 621.921],
[gdMonthly(2018, 8, 1), 0],
[gdMonthly(2018, 9, 1), 0],
[gdMonthly(2018, 10, 1), 551.3],
[gdMonthly(2018, 11, 1), 0],
[gdMonthly(2018, 12, 1), 0]
];
var datasetMonthly = [{
data: statementMonthly,
color: "#526270",
bars: {
show: true,
align: "center",
barWidth: 800 * 65 * 60 * 700,
lineWidth: 2,
fill: 1
}
}];
var optionsMonthly = {
xaxis: {
mode: "time",
tickSize: [1, "month"],
timeformat: " %b",
monthNames: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
tickLength: 0,
rotateTicks: 179,
axisLabel: "",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 1,
axisLabelFontFamily: "Calibri",
axisLabelPadding: 1,
color: "black"
},
yaxes: [{
position: "left",
color: "black",
axisLabel: "'000 kWh",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Calibri",
axisLabelPadding: 15,
align: "center",
tickFormatter: function numberWithCommasMonthly(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
}],
legend: {
container: $("#legendContainerMonthly"),
noColumns: 2,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 1,
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
}
}
};
$(document).ready(function() {
$.plot($("#graph-placeholderMonthly"), datasetMonthly, optionsMonthly);
});
function gdMonthly(year, month, day) {
return Date.UTC(year, month - 1, day);
}
I don't understand why the xaxis labels disappear.
What did I miss?
Hope you can help me.
Found the cause of the problem.
The problem is caused by this plugin:
jquery.flot.tickrotor.js
I just removed the plugin on the second graph and the label is now working.
This is my modal
This is 1st series query
function student_reports(){
$this->db->select('monthname(a.view_date) as name, count(a.report_id) as
data');
$this->db->from('report_view_track a');
$this->db->where('a.user_id', 1);
$this->db->where('a.preview_mode', "report");
$this->db->group_by('monthname(view_date)');
$this->db->order_by('a.id', 'ASC');
$query = $this->db->get();
}
This is the result:
----------------------
|date | count |
----------------------
|2018-01-12 | 80 |
|2018-02-12 | 100 |
|2018-03-12 | 20 |
|2018-04-12 | 60 |
|2018-05-12 | 50 |
|2018-06-12 | 50 |
|2018-07-12 | 50 |
Second Query result is same format different count
second series query
function parents_reports(){
$this->db->select('monthname(a.view_date) as name, count(a.report_id) as
data');
$this->db->from('report_view_track a');
$this->db->where('a.user_id', 2);
$this->db->where('a.preview_mode', "report");
$this->db->group_by('monthname(view_date)');
$this->db->order_by('a.id', 'ASC');
}
this is controller
public function get_mainarray() {
$this->load->model('admin_model');
$main_array = $this->admin_model->student_reports();
echo json_encode($main_array,JSON_NUMERIC_CHECK);
}
public function get_mainarray1() {
$this->load->model('admin_model');
$main_array= $this->admin_model->parents_reports();
echo json_encode($main_array,JSON_NUMERIC_CHECK);
}
this is view
<script>
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart : {
renderTo : 'chart-contents',
type : 'spline',
animation: Highcharts.svg,
marginTop: 100,
style: {
fontFamily: 'Open Sans'
},
backgroundColor : {
}
},
title : {
text : 'Number of Report views',
align: 'left',
style: {
fontFamily: 'Poppins',
fontSize: '15',
fontWeight: '600'
},
x: 0,
y: 5
},
subtitle : {
text : 'An example of irregular time data in Highcharts JS',
align: 'left',
x: 0,
y: 30
},
legend: {
align: 'right',
verticalAlign: 'top',
y: -60
},
xAxis : {
type : 'datetime',
dateTimeLabelFormats : { // don't display the dummy year
month : ' %b',
year : '%b'
}
},
yAxis : {
title : {
text : 'Views '
},
min : 0
},
tooltip : {
formatter : function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e. %b', this.x) + ' | ' + this.y + ' Views';
}
},
plotOptions : {
area : {
lineWidth : 1,
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
},
shadow : false,
states : {
hover : {
lineWidth : 1
}
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
},
series : [{
name : 'Student',
legendColor: '4F43E4',
type : "area",
color: '#4F43E4',
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(79, 67, 228, 0)']
]
},
// 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, 27), 0],
[Date.UTC(1970, 10, 10), 0.6],
[Date.UTC(1970, 10, 18), 0.7],
[Date.UTC(1970, 11, 2), 0.8],
[Date.UTC(1970, 11, 9), 0.6],
[Date.UTC(1970, 11, 16), 0.6],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 12), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8],
[Date.UTC(1971, 4, 3), 2.1],
[Date.UTC(1971, 4, 26), 1.1],
[Date.UTC(1971, 5, 9), 0.25],
[Date.UTC(1971, 5, 12), 0]
]
}, {
name : 'Teacher',
type : "area",
color: '#2F80ED',
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(47, 128, 237, 0)']
]
},
data : [
[Date.UTC(1970, 9, 18), 0],
[Date.UTC(1970, 9, 26), 0.2],
[Date.UTC(1970, 11, 1), 0.47],
[Date.UTC(1970, 11, 11), 0.55],
[Date.UTC(1970, 11, 25), 1.38],
[Date.UTC(1971, 0, 8), 1.38],
[Date.UTC(1971, 0, 15), 1.38],
[Date.UTC(1971, 1, 1), 1.38],
[Date.UTC(1971, 1, 8), 1.48],
[Date.UTC(1971, 1, 21), 1.5],
[Date.UTC(1971, 2, 12), 1.89],
[Date.UTC(1971, 2, 25), 2.0],
[Date.UTC(1971, 3, 4), 1.94],
[Date.UTC(1971, 3, 9), 1.91],
[Date.UTC(1971, 3, 13), 1.75],
[Date.UTC(1971, 3, 19), 1.6],
[Date.UTC(1971, 4, 25), 0.6],
[Date.UTC(1971, 4, 31), 0.35],
[Date.UTC(1971, 5, 7), 0]
]
}
]
});
});
$('.octo-report-slider').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:3,
nav:true,
loop:false
}
}
})
});
How to show that result in highcharts area spline chart this format
=> { data: [Date.UTC(2017,02,15), 50 }
I tried to many ways to get that how to do that please help immediately for exam purpose.
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/
I have the code to display two data on line chart :
$(function () {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth atasfsa Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
tickInterval: 24 * 3600 * 1000,
day: '%a'
},
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: {
pointInterval: 10,
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'A',
// Define the data points. All series have a dummy year
// of 2016/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(2016, 11, 1), 0],
[Date.UTC(2016, 11, 2), 0.28],
[Date.UTC(2016, 11, 3), 0.25],
[Date.UTC(2016, 11, 4), 0.2],
[Date.UTC(2016, 11, 5), 0.28],
[Date.UTC(2016, 11, 6), 0.28],
[Date.UTC(2016, 11, 7), 0.47],
[Date.UTC(2016, 11, 8), 0.47],
[Date.UTC(2016, 11, 9), 0.47],
[Date.UTC(2016, 11, 10), 0.47],
[Date.UTC(2016, 11, 11), 0.47],
[Date.UTC(2016, 11, 12), 0.47]
]
}, {
name: 'B',
data: [
[Date.UTC(2017, 0, 1), 0],
[Date.UTC(2017, 0, 2), 0.4],
[Date.UTC(2017, 0, 3), 0.25],
[Date.UTC(2017, 0, 4), 1.66],
[Date.UTC(2017, 0, 5), 1.8],
[Date.UTC(2017, 0, 6), 1.76],
[Date.UTC(2017, 0, 7), 2.62],
[Date.UTC(2017, 0, 8), 2.41],
[Date.UTC(2017, 0, 9), 2.05],
[Date.UTC(2017, 0, 10), 1.7],
[Date.UTC(2017, 0, 11), 1.1],
[Date.UTC(2017, 0, 12), 0]
]
}]
});
});
output:
i wonder how to make B xAxis start from 'sun' at A xAxis ?
i have been googling but a can't found anything and I do not know what to look for....
I have to fill a chart with two series: timeseries area and column. both series are filled with date Date values with irregualr intervals, I need to keep the values on xAxis of the area series, while reprsenting bot series.
here's the code:
Highcharts.setOptions({
lang: {
months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio',
'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
weekdays: ['Lunedì', 'Martedì', 'Martedì', 'Giovedì', 'Venerdì', 'Sabato', 'Domenica'],
shortMonths: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
downloadJPEG : "Scarica come JPEG",
downloadPDF: "Scarica come PDF",
downloadPNG: "Scarica come PNG",
downloadSVG: "Scarica come SVG",
printChart: "Stampa grafico",
contextButtonTitle: "Opzioni"
}
});
$(function () {
$('#chart1').highcharts({
chart: {
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Entrate/Uscite'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
title: {
text: null
}
//tickInterval: 31 * 24 * 3600 * 1000
},
yAxis: {
title: {
text: 'Euro(€)'
}
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[9]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
//lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
type: 'column',
name: "Entrate mensili",
pointStart: Date.UTC(2014, 0, 01),
data: [[Date.UTC(2014, 0, 31), 4830.55], [Date.UTC(2014, 1, 28), 8429.28],
[Date.UTC(2014, 2, 31), 515.6], ]
},
{
type: 'area',
name: "Entrate",
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2014, 0, 01),
data: [[Date.UTC(2014, 0, 9), 494.8], [Date.UTC(2014, 0, 20), 137.2], [Date.UTC(2014, 0, 22), 210.0],
[Date.UTC(2014, 0, 23), 220.4], [Date.UTC(2014, 0, 24), 871.0], [Date.UTC(2014, 0, 28), 420.0],
[Date.UTC(2014, 0, 30), 420.0], [Date.UTC(2014, 0, 31), 2057.15], [Date.UTC(2014, 1, 5), 191.2],
[Date.UTC(2014, 1, 6), 81.6], [Date.UTC(2014, 1, 7), 295.2], [Date.UTC(2014, 1, 11), 135.12],
[Date.UTC(2014, 1, 12), 189.2], [Date.UTC(2014, 1, 13), 210.0], [Date.UTC(2014, 1, 14), 315.2],
[Date.UTC(2014, 1, 17), 462.8], [Date.UTC(2014, 1, 18), 544.4], [Date.UTC(2014, 1, 19), 715.44],
[Date.UTC(2014, 1, 20), 971.2], [Date.UTC(2014, 1, 21), 418.0], [Date.UTC(2014, 1, 24), 1122.0],
[Date.UTC(2014, 1, 25), 151.76], [Date.UTC(2014, 1, 26), 851.12], [Date.UTC(2014, 1, 27), 670.8],
[Date.UTC(2014, 1, 28), 1104.24], [Date.UTC(2014, 2, 3), 305.6], [Date.UTC(2014, 2, 6), 210.0], ]
}
]
});
});
It seems that the column series mess up the chart. Here's the code on jsfiddle. If I comment out the column series, I obtain the expected behaviour: I need to represent both series with the time interval of the first (area).
Some suggestion for that?