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.
Related
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 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 to make use of flot.js to create a attendance chart with it? something similar to the image linked.attendance chart
The date axis shows perfectly. the problem lies in the time axis! how do I format the time, to pass it to the flot?
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
function gt(year, month, day, hour, minute){
return new Date(year, month - 1, day, hour, minute).getTime();
}
function init_attendace_chart(){
if( typeof ($.plot) === 'undefined'){ return; }
console.log('attendance plotting');
var attendance_data = [
[gd(2017, 3, 1), gt(2017, 3, 1, 8, 45)], [gd(2017, 3, 2), gt(2017, 3, 1, 7, 48)], [gd(2017, 3, 3), gt(2017, 3, 1, 7, 50)],
[gd(2017, 3, 4), gt(2017, 3, 1, 7, 45)], [gd(2017, 3, 5), gt(2017, 3, 1, 7, 55)], [gd(2017, 3, 6), gt(2017, 3, 1, 7, 45)],
[gd(2017, 3, 7), gt(2017, 3, 1, 7, 45)], [gd(2017, 3, 8), gt(2017, 3, 1, 7, 45)], [gd(2017, 3, 9), gt(2017, 3, 1, 7, 45)]
];
var attendance_chart_settings = {
series: {
curvedLines: {
apply: true,
active: true,
monotonicFit: true
},
shadowSize: 5
},
xaxes: [{ //Edit this
mode: "time",
tickSize: [1, "day"]
}],
yaxes:[{
mode:"time",
tickSize: [1, "hour"]
}],
colors: ["#26B99A"],
lines: { show: true },
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1,
hoverable: true
},
borderColor: {
bottom: "#7F8790",
left: "#7F8790"
}
}
};
if ($("#attendance_chart").length){
$.plot($("#attendance_chart"), [{
label: " Your Clock-In Times",
data: attendance_data,
lines: {
fillColor: "rgba(150, 202, 89, 0.12)"
},
points: {
fillColor: "#fff"
}
}], attendance_chart_settings);
// $.plot($("#attendance_chart"), dataset, options);
$("#attendance_chart").UseTooltip();
}
}
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'
}]
},
I have a chart (image bellow), where the green line has a reference to the year 2014, and the purple line will be 2013.
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
[gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
[gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]];
This is the dataset, but look that I put both dataset in 2014 year because if I put 2014 in one dataset and 2013 in another, I miss the overlap effect and I need that effect for comparsion.
This is what happens if a put the 2013 year in one dataset and 2014 in another (image below)
How can I do the same chart, but with this overlap effect, using the 2013 year in one dataset?
This also will fix my hover functionallity.
Code
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
[gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
[gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), 2], [gd(2014, 12, 1), 1]];
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data1, data2
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: null,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 10,
color: "#838383",
timeformat: "%b/%y"
},
yaxis: {
ticks: 4
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
You use the concept of multiple axes, but just hide the second axis.
To do this you create two data sets, each with their own axis:
var data2014 = {
label: "2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "2013",
data: data2,
xaxis: 2
};
and then in the axes option setting, set ticks to false to hide one axis.
The max setting for the 2014 data is important, otherwise the data set will scale to fill the whole graph:
xaxes: [{
mode: "time",
tickSize: [1, "month"],
tickLength: null,
color: "#838383",
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
},{
ticks: false
}],
JS Fiddle here.
Full code below:
var data1 = [
[gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
[gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];
var data2 = [
[gd(2013, 1, 1), 1], [gd(2013, 2, 1), 0], [gd(2013, 3, 1), 2], [gd(2013, 4, 1), 0],
[gd(2013, 5, 1), 1], [gd(2013, 6, 1), 3], [gd(2013, 7, 1), 1], [gd(2013, 8, 1), 5],
[gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];
var data2014 = {
label: "2014",
data: data1,
xaxis: 1
};
var data2013 = {
label: "2013",
data: data2,
xaxis: 2
};
$("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
data2014, data2013
],
{
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 2,
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
labelMargin: 17,
margin: {
top: 8,
bottom: 10,
left: 20
},
minBorderMargin: 25,
color: '#d5d5d5'
},
colors: ["#1ab394", "#464f88"],
xaxes: [{
mode: "time",
tickSize: [1, "month"],
color: "#838383",
timeformat: "%b",
max: (new Date("2014/12/1")).getTime()
},{
ticks: false,
}],
yaxis: {
ticks: 5
},
legend: {
backgroundOpacity: 0.5,
noColumns: 0,
position: "ne",
color: "#838383",
}
}
);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}