I have a cal-heatmap that is displaying the last week of data. Each row is a day and each column is an hour. I have labels on the days but not the hours. How can I add these?
var cal = new CalHeatMap();
cal.init({
itemSelector: "#cal-heatmap",
domain: "day",
subDomain: "hour",
rowLimit: 1,
domainGutter: 0,
data: data,
start: new Date(_.keys(data)[0] * 1000),
cellSize: 15,
cellPadding: 5,
cellRadius: 3,
range: 7,
verticalOrientation: true,
displayLegend: false,
label: {
position: "left",
offset: {
x: 20,
y: 12
},
width: 110
},
legend: [40, 80, 120, 160, 200, 240, 280, 320],
legendColors: ["#f9eb49", "#d66938"]
});
According to the author, this is not yet possible so I've come up with a workaround that looks decent. I just made another div above my main cal-heatmap that shows a single row with an empty label so that it lines up with the table below. Then I populate it with the below code:
var labels = new CalHeatMap();
labels.init({
itemSelector: "#cal-heatmap-labels",
domain: "day",
subDomain: "hour",
rowLimit: 1,
domainGutter: 0,
data: {},
cellSize: 15,
cellPadding: 5,
cellRadius: 3,
range: 1,
verticalOrientation: true,
displayLegend: false,
tooltip: true,
subDomainTextFormat: "%-I",
subDomainDateFormat: "%-I%p",
domainLabelFormat: "",
label: {
position: "left",
offset: {
x: 20,
y: 12
},
width: 110
}
});
This is working for me and looks half decent. Hopefully this helps someone at least until this feature is developed.
Related
I want to count down from 60 to zero.
I use ng-circle-progress (Angular package) to do that.
The problem is something with my calculation not end up right.
I try to do it with those options - but the number is 100, 99, 98... (instead of 60, 59, 58..):
options = {
percent: 100,
radius: 60,
backgroundPadding: 7,
outerStrokeWidth: 2,
innerStrokeWidth: 2,
space: -2,
outerStrokeColor: "#808080",
innerStrokeColor: "#e7e8ea",
showBackground: true,
titleFontSize: 12,
subtitleFontSize: 20,
showUnits: false,
showSubtitle: false,
animationDuration: 60000,
startFromZero: true
};
I also try to set percent to 60 but the circle is not complete until the end and the countdown goes more to negative numbers:
options = {
percent: 60,
radius: 60,
backgroundPadding: 7,
outerStrokeWidth: 2,
innerStrokeWidth: 2,
space: -2,
outerStrokeColor: "#808080",
innerStrokeColor: "#e7e8ea",
showBackground: true,
titleFontSize: 12,
subtitleFontSize: 20,
showUnits: false,
showSubtitle: false,
animationDuration: 60000,
startFromZero: true,
titleFormat: (percent) => {
return `${60 - percent}`;
}
};
codesandbox.io
What could be the cause to this artifact? I have moved my code from my codepen https://codepen.io/mads10000/pen/vaBdBd
<div class="chartsContainer">
<div class="slaChart">
</div>
</div>
to my HTML boilerplate
Github - Commit with chart that has an artifact
It should not have these black spots as seen on image. It looks right on my codepen.
The solution was, showLine: false, fixed it.
var lineChart = new Chartist.Line('.slaChart', {
labels: ['January', '', 'February', '', 'March'],
series: [
// [0, 5, 8, 10, 7, 6, 5, 5, 4],
[0, 50, 35, 70, 50, 90],
[0 , 45, 25, 55, 35, 70]
]
}, {
low: 0,
high: 100,
showArea: true,
showLine: false, <-------- showLine false fixed it
showPoint: false,
fullWidth: true,
plugins: [
// Chartist.plugins.lineSelector()
],
axisY: {
onlyInteger: true,
offset: 20
},
axisX: { showGrid: false }
});
This is due to the CSS fill property. Something on your page might have set the default fill to be black. For a line path the fill doesn't make sense to clear it you just need to reset the fill to none.
.ct-line {
fill: none
}
I recently encountered a weird issue with HighStock.
Firstly here is my code http://jsfiddle.net/woon123/br0e8mkw/
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#analytics_line').highcharts('StockChart', {
credits: {
enabled: false
},
title: {
text: 'Analytics of Deals'
},
subtitle: {
text: 'View Count and Redemption Count'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [
['day', [1]]
]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [
['week', [1]]
]
}
}],
buttonTheme: {
width: 60
},
},
yAxis: {
floor: 0,
title: {
text: 'Number'
}
},
plotOptions: {
dataLabels: {
visible: true
},
series: {
compare: 'value'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: [{
id: "First Graph",
name: "First Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [20, 23, 23, 23, 23, 23, 23, 23, 23, 23],
}, {
id: "Second Graph",
name: "Second Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [9, 12, 16, 16, 16, 16, 16, 16, 16, 16],
}, ]
}, function (chart) {
// apply the date pickers
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker();
}, 0);
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function () {
this.onchange();
this.onblur();
}
});
});
In this case, First Graph is suppose to be above Second Graph according to the data. When you compare the series, First Graph values are always higher then Second Graph.
However, the graph plotted actually cause First Graph to be below Second graph although when you mouse over the lines, it gives the correct values.
Furthermore, First Graph is suppose to start at 20 but as you can see it starts at 0, and the Y-axis values are wrong as well (0-2.5-5)
However, all these errors can be solved by placing 0 at the start of the data.
For the case of First Graph it is [0, 20, 23, 23, 23, 23, 23, 23, 23, 23, 23] and Second Graph it is [0, 9, 12, 16, 16, 16, 16, 16, 16, 16, 16].
Can anyone advice why is this the case and perhaps provide a solution to allow my data to start with a positive integer rather then 0
Take out the compare on the plotOptions, series
series: {
compare: 'value'
}
Fiddle: http://jsfiddle.net/br0e8mkw/2/
From the API: http://api.highcharts.com/highstock#plotOptions.series.compare
Compare the values of the series against the first value in the visible range. The y axis will show percentage or absolute change depending on whether compare is set to "percent" or "value". When this is applied to multiple series, it allows comparing the development of the series against each other. Defaults to undefined.
I'm having problems with the formatting of the following flot chart:
I want my second series (gray) straight, just as square. It should start from 682 and end in 683. How to solve it?
Options for my flot:
var options = {
grid: {
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 0,
fillColor: { colors: [{opacity: 1 }, { opacity: 1}] },
},
},
colors: ["rgba(41, 150, 206, 0.9)", "rgba(67, 90, 110, 0.4)",],
crosshair: {
mode: "xy",
color: "#323232",
lineWidth: 1,
},
xaxis: {
mode: mode,
show: true,
position: "bottom",
color: "#323232",
font: {
size: 10,
lineHeight: 15,
},
labelHeight: 15,
},
yaxis: {
show: true,
position: "left",
color: "#323232",
labelWidth: 20,
font: {
size: 10,
},
max: 150,
min: 0,
},
pan: {
interactive: true,
cursor: "move",
frameRate: 60,
},
tooltip: true,
tooltipOpts: {
id: 'flotTip',
content: '%x : %y km/h',
shifts: {
x: 10,
y: 20,
},
defaultTheme: true,
lines: {
track: false,
threshold: 0.05,
},
}
};
If you have zero values outside the range where your data has non-zero values the graph will connect those (valid) datapoints with diagonal lines. If you want to end the graph at a specific point change the values after that point to null.
This is described in the documentation:
If a null is specified as a point or if one of the coordinates is null or couldn't be converted to a number, the point is ignored when drawing. As a special case, a null value for lines is interpreted as a line segment end, i.e. the points before and after the null value are not connected.
I am using flot chart for charts. Please find following...
js array
data_visits = [
[new Date('06/02/2014 01:00').getTime(), 100],
[new Date('06/05/2014 10:00').getTime(), 200],
[new Date('06/10/2014 13:00').getTime(), 300],
[new Date('06/15/2014 15:00').getTime(), 400],
];
chart code
if($('#flot_overview').length) {
var chart_placeholder = $('#flot_overview');
var options = {
grid: {
clickable: true,
hoverable: true,
autoHighlight: true,
backgroundColor: null,
borderWidth: 0,
color: "#666",
labelMargin: 10,
axisMargin: 0,
mouseActiveRadius: 10,
minBorderMargin: 5
},
series: {
lines: {
show: true,
lineWidth: 2,
steps: false,
fill: true
},
points: {
show:true,
radius: 4,
symbol: "circle",
fill: true
}
},
tooltip: true,
tooltipOpts: {
content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
xDateFormat: "%b %d, %Y %H:%M",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
timeformat: '%H:%M',
labelWidth: "40"
},
yaxis: { min: 0 },
legend: {
noColumns: 0,
position: "ne"
},
colors: ["#0892cd"],
shadowSize: 0
};
$.plot(chart_placeholder,[{
label: "Click / Visits",
data: data_visits,
points: {fillColor: '#fff'},
lines: {fillColor: 'rgba(8,146,205,.2)'}
}],options);
}
It generates chart properly and shows correct time in tooltip, but it does not show correct time in xAxis as per my settings, it always show 00:00 for all xaxis if i use timeformat: '%H:%M' it works fine if i format this as date.
Please help, thanks.
Since your data spans multiple days, flot is logically placing the tick marks at the start each day. This means that with a time format of '%H:%M', you then get 0:00.
In my mind something like this makes a lot more sense for you data.