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();
}
Related
In a project, I want to work with Highcharts, but instead of putting the options code directly on to the website I rather would like to see it in an extra file, e.g. charts.js. Is it possible?
What I have done so far:
I created the general chart and it works. I tried to put the options code as shown on Highcharts in a file called charts.js and include it into the header. But it doesn't work, shows an error #13.
The code I used was
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
Is there a way to put the code into a fail and let it work as it would if code, CDN and Co. are on one page? Or is there anything I do wrong?
Highcharts error #13 means that Highcharts is unable to find the HTML element to render the chart in. From your description it looks like your script is fired before DOM is fully loaded. As a solution put all your code from chart.js file into DOMContentLoaded event callback function:
window.addEventListener('DOMContentLoaded', (event) => {
// chart.js
});
Or just put your script before the closing </body>:
<html>
....
<body>
....
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
I wan't to create a heatmap for different days and months, but i run into a problem that xAxis doesn't change when i add aditional element in array it can have only 10 elements but i need 12.
The same problem with yAxis that is only 5 elements, but i need to add 7 in total.
After adding another element to X or Y axis - nothing happening.
JSFiddle included - https://jsfiddle.net/nw6ux40e/
JS below.
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura', 'Michi']
},
yAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
}); ```
If you want to use categories you will need to add the new values to the category array.
Next, you will need to add wanted points. Notice that array looks like this: [x, y, value], so if you want to increase the yAxis labels you will need to add an additional point for each category.
Demo: https://jsfiddle.net/BlackLabel/8pts76bn/
Data example:
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[0, 5, 67],
API: https://api.highcharts.com/highcharts/series.heatmap.data
I have Highcharts 7.0.1 installed in my Angular 6 app via npm and already have a lot of basic charts running (line, spline, bar, etc). When trying to follow the Highcharts docs on initialising the heatmap lib, I get the following error set:
ERROR in src/app/modal-chart.service.ts(224,69): error TS2345: Argument of type '{ chart: { type: "heatmap"; marginTop: number; marginBottom: number; plotBorderWidth: number; }; ...' is not assignable to parameter of type 'Options'.
Types of property 'series' are incompatible.
Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'.
Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | ...'.
Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type 'SeriesZigzagOptions'.
Property 'type' is missing in type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...'.
src/app/modal-chart.service.ts(256,48): error TS2339: Property 'categories' does not exist on type 'Axis'.
src/app/modal-chart.service.ts(257,30): error TS2339: Property 'value' does not exist on type 'Point'.
src/app/modal-chart.service.ts(257,82): error TS2339: Property 'categories' does not exist on type 'Axis'.
Ive tried the solution from a highcharts support thread - https://www.highcharts.com/forum/viewtopic.php?t=35781
but this produces the same error.
Ive removed other charts to reduce the noise. Any and all help is greatly appreciated
import { Injectable } from '#angular/core';
import { DataApiService } from './data-api.service';
import * as Highcharts from 'highcharts';
import { MetricFilter } from "./models/metricFilter.model";
import Heatmap from 'highcharts/modules/heatmap.js';
Heatmap(Highcharts);
declare let $:any;
#Injectable({
providedIn: 'root'
})
export class ModalChartService {
charts = new Array(); //rendered charts
chartsData; //use to reload original chart data
chartBaseName = "chart-id";
currentMetric;
modalContentElement = "#modal-launch .overlay-content";
constructor(private dataApiService : DataApiService) { }
/**
* Load charts from metric payload
*
* #param {Object} metric metric payload
*/
loadCharts (metric, filter = new MetricFilter) {
let _self = this;
_self.currentMetric = metric;
//get chart data with metric ID
_self.dataApiService.getCharts(metric.metricId, filter)
.subscribe( payload => {
_self.chartsData = payload.charts;
$(_self.modalContentElement).html('');
$.each(_self.chartsData, function(index, chart){
switch(chart.chartType) {
case 'double':
_self.charts.push(_self.createDoubleChart(chart));
break;
case 'heat-map':
_self.charts.push(_self.createHeatMapChart(chart));
break;
case 'horizontal-bar':
_self.charts.push(_self.createHorizontalBarChart(chart));
break;
case 'line':
_self.charts.push(_self.createLineChart(chart));
break;
case 'spline':
_self.charts.push(_self.createSplineChart(chart));
break;
case 'tabular':
_self.charts.push(_self.createTabularChart(chart));
break;
case 'vertical-bar':
_self.charts.push(_self.createVerticalBarChart(chart));
break;
}
});
$('.highcharts-xaxis-grid path:last').remove();
$('#modal-launch').modal('show');
}, error => {
console.error(error);
});
}
/**
* Build and display Highcharts chart from payload data
*
* #param {Object} metric metric payload
* #return {Object} highcharts highcharts object
*/
private createHeatMapChart(chart){
$(this.modalContentElement).append("<div id='" + this.chartBaseName + chart.chartId + "' class='chart-heat-map chart'></div>");
return new Highcharts.Chart(this.chartBaseName + chart.chartId, {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
}
}
Chart Type needed to be defined in the series:
{
chart: {
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
type: 'heatmap',
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
}
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 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();
}
}