create highcharts multiseries areaspline chart using codeigniter mysql 2

create highcharts multiseries areaspline chart using codeigniter mysql 2 - javascript

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.

Related

Flot xaxis labels disappears on multiple charts

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.

How to connect null values with dotted lines in highcharts

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>

How can I add both plotLines and plotBands to a HighStocks graph using HighChart?

I've been trying to add my plotLines to this graph and I've followed the syntax online; however, the plotLine will not appear.
The plotBands appear just fine, so I am just trying to see what I may be missing to get it to work.
Below is a link to my jsFiddle:
https://jsfiddle.net/fbmoju7f/75/
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
Highcharts.stockChart('container', {
title: {
text: 'Morphine'
},
xAxis: {
type: 'datetime',
floor: Date.UTC(2017, 2, 2),
ceiling: Date.UTC(2017, 2, 9),
plotLine: {
value: Date.UTC(2017, 2, 8),
color: '#3A1231', //Purple
width: 2,
dashStyle: 'solid'
}
},
yAxis: { //Keep yAxis ----------------------------------------
floor: 0,
ceiling: 100,
plotBands: [{
color: '#F9F98E', //Yellow
from: 0,
to: 10
}, {
color: '#9DF98E', //Green
from: 10,
to: 30
}, {
color: '#F9958E', //Red
from: 30,
to: 100
}]
},
rangeSelector: {
buttons: [{
type: 'day',
count: 8,
text: '-7d'
}, {
type: 'day',
count: 4,
text: '-3d'
}, {
type: 'day',
count: 3,
text: '-2d'
}, {
type: 'day',
count: 2,
text: '-1d'
}],
selected: 2 //Initial view upon opening application
},
series: [{
type: 'spline',
color: '#4C91FA',
data: [ //Test data set
[Date.UTC(2017, 2, 1), 5.7],
[Date.UTC(2017, 2, 2), 7.3],
[Date.UTC(2017, 2, 3), 10.3],
[Date.UTC(2017, 2, 3), 15.6],
[Date.UTC(2017, 2, 4), 12.7],
[Date.UTC(2017, 2, 4), 14.0],
[Date.UTC(2017, 2, 4), 17.8],
[Date.UTC(2017, 2, 5), 19.1],
[Date.UTC(2017, 2, 5), 18.4],
[Date.UTC(2017, 2, 6), 19.5],
[Date.UTC(2017, 2, 6), 22.7],
[Date.UTC(2017, 2, 6), 25.1],
[Date.UTC(2017, 2, 7), 28.2],
[Date.UTC(2017, 2, 7), 30.4],
[Date.UTC(2017, 2, 8), 29.6],
[Date.UTC(2017, 2, 9), 29.0],
[Date.UTC(2017, 2, 10), 27.8]
]
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/stock/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

You have the wrong property name and you are not enclosing the plotLines in brackets. It should be like:
xAxis: {
type: 'datetime',
floor: Date.UTC(2017, 2, 2),
ceiling: Date.UTC(2017, 2, 9),
plotLines: [{
value: Date.UTC(2017, 2, 8),
color: '#3A1231', //Purple
width: 2,
dashStyle: 'solid'
}]
},

hightchart tickinterval between two xaxis

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

HighCharts - timeseries area and column series on same chart - irregular datetime on xAxis

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?

We Keep Coding

JavaScript is the programming language of the Web.

create highcharts multiseries areaspline chart using codeigniter mysql 2 - javascript

Related

Flot xaxis labels disappears on multiple charts

How to connect null values with dotted lines in highcharts

How can I add both plotLines and plotBands to a HighStocks graph using HighChart?

hightchart tickinterval between two xaxis

HighCharts - timeseries area and column series on same chart - irregular datetime on xAxis

Categories

Resources