I am trying to create a chart using jqPlot where it shows the data for each hour.
This is working fine, but as you can see in the jsfiddle, it doesn't show the first and last data point correctly. It cuts some of the circle off.
I am using this code:
$(document).ready(function () {
var line1 = [
['08:00', 4],
['09:00', 10],
['10:00', 2],
['11:00', 12],
['12:00', 5],
['13:00', 3],
['14:00', 40],
['15:00', 2],
['16:00', 20],
['17:00', 7]
];
var plot1 = $.jqplot('chart1', [line1], {
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M'
},
tickInterval: '1 hour',
min: '08:00',
max: '17:00'
},
yaxis: {
min: 0
}
},
seriesColors: ["#996325"],
seriesDefaults: {
markerOptions: {
show: true,
style: 'circle', // circle, diamond, square, filledCircle. filledDiamond or filledSquare.
color: 'white',
lineWidth: 4,
size: 12,
shadow: true
}
},
grid: {
background: '#365463',
gridLineColor: 'grey'
}
});
});
jsFiddle
What am I doing wrong ? :(
You can modify your min and max values of your xaxis in order to see the full circle of your first and last points.
xaxis:{
min: '07:45',
max: '17:15'
}
See example here
Related
Actually, I was trying to create a heatmap which will show each task time taken to execute in a heatmap.
So basically x-axis will have time in datetime format.y-axis will have each task name and every point will have value which is the time taken to execute the task.
In simple i have formatted my json where data is coming in format
[{datetime,stage name,value}]
So my xCategory will look like
xCategory=[1527657415000,..some datetime]
my yCategory is
yCategories=["Stage"...]
and series.data=[[0,0,12],[0,1,12]..]
My chart
var chart = new Highcharts.Chart('chart', {
chart: {
type: 'heatmap'
},
xAxis: {
// categories: xCategories,
type: 'datetime',
dateTimeLabelFormats:
{
month: '%e. %b',
year: '%b'
},
},
yAxis: {
// categories: yCategories
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: series
});
But it is not coming up properly.
In heatmap chart type each point occupies the same space, so value data can be only represented by color or by label. If you use datetime xAxis type, you must remember to set right colsize property.
Highcharts.chart('container', {
chart: {
type: 'heatmap',
plotBorderWidth: 1
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
colsize: 60 * 60 * 1000,
data: [
[1527657415000, 0, 10],
[1527657415000, 1, 19],
[1527657415000, 2, 8],
[1527657415000, 3, 24],
[1527657415000, 4, 67],
[1527661015000, 0, 92],
[1527661015000, 1, 58],
[1527661015000, 2, 78],
[1527661015000, 3, 117],
[1527661015000, 4, 48],
[1527661015000, 0, 35],
[1527661015000, 1, 15],
[1527661015000, 2, 123],
[1527661015000, 3, 64],
[1527661015000, 4, 52],
[1527664615000, 0, 72],
[1527664615000, 1, 132],
[1527664615000, 2, 114],
[1527664615000, 3, 19],
[1527664615000, 4, 16]
],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Live demo: https://jsfiddle.net/BlackLabel/zhxyerd1/
API: https://api.highcharts.com/highcharts/series.heatmap.colsize
JS Fiddle: http://jsfiddle.net/yondaimehokage/nbxka08u/5/
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
},
yAxis: {
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], [1, 0, 19], [2,0, 8], [3, 0, 24], [4, 0, 67], [5, 0, 2], [6, 0, 16], [7, 0, 10], [8, 0, 5], [9, 0, 50]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Is there a way to have an X axis label span a region of the x axis that is dependent on the values?
In short, I have a heat map graph using HighCharts. I want to try to achieve something like this (sorry for the Windows Paint rendering):
So depending on the values, the X axis color would vary and the centering of the label would be relative to the span of the values that correspond to that data label.
Any thoughts how this could be done? Tick marks won't do, and this is not a regular interval that I would need to labels to appear either.
Edit: Based on a comment, I guess I need to figure out a way to calculate the pixel width that a range of X value "bars" take up. So how many pixels do the "bars" that the points that have X values of 1 to 10 take up, how many pixels do the "bars" that the points that have X values of 11 to 25 take up, and so on.
In highchart area chart, how could I set the area color above certain value to different color?
My target graph is like this:
However, what I see right now is like this:
http://jsfiddle.net/brianpchsu/0kwgocp4/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
min: 0,
max: 100,
pointRange:10,
title: {
text: 'Time'
}
},
yAxis: {
title: {
text: 'Power'
}
},
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 0,
marker: {
enabled: true,
symbol: 'circle',
radius: 0
}
}
},
series: [{
data: [
[0, 2500],
[10, 2600],
[20, 2700],
[30, 2800],
[40, 2900],
[50, 3000],
[60, 3100],
[70, 3200],
[80, 3300],
[90, 3400],
[100, 3500],
],
color: '#FF0000',
negativeColor: '#1B8753',
threshold: 3000
}]
});
});
You could use zones.
Example: http://jsfiddle.net/0kwgocp4/1/
zones: [{
color: '#1B8753',
value: 3000
},{
color: '#FF0000'
}]
Is there any way that this chart is not drawn to scale?
http://forum.highcharts.com/resources/image/4227
I need every point occupies a separate row and evenly.
That is, in this graph, it should appear one line for each of the first 2 points of each series and the vertical distance between each should be the same as the distance between the lines below.
The series are dynamically loaded and the number of points each serie is variable.
http://jsfiddle.net/fpanci/yL6mw/
$(function () {
$(document).ready(function() {
$("#container").highcharts({
chart: {
inverted: true,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ' ',
x: -20 //center
},
xAxis: {
minorGridLineColor: '#000000',
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 1,
tickInterval: 1,
labels: { enabled: true },
maxPadding: 0.05,
min: 0
},
yAxis: {
title: { text: ' ' },
plotLines: [{
value: 0,
width: 1,
color: '#C0C0C0'
}],
labels: { enabled: true },
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 20,
tickInterval: 20,
min: 0,
max: 100
},
exporting: { enabled: false },
tooltip: { enabled: false },
legend: { enabled: false },
series: [{
color: '#0000FF',
connectNulls: true,
data: [[0.2, 24.25], [0.5, 30.61], [1, 43.61], [2, 34.51], [3, 32.39], [4, 36.47], [5, 36.4], [6, null], [7, 24.68], [8, 37.79]]
},{
color: '#980000',
dashStyle: 'shortdot',
connectNulls: true,
data: [[0.2, 38], [0.5, 52], [1, 50], [2, null], [3, 32], [4, null], [5, 34], [6, null], [7, 25], [8, null]]
},{
color: '#38761D',
dashStyle: 'ShortDashDotDot',
connectNulls: true,
data: [[0.2, 20], [0.5, 27], [1, 35], [2, null], [3, 29], [4, null], [5, 30], [6, null], [7, 22], [8, null]]
}]
});
});
});
Thanks!
The data is plotting exactly where you've told it to.
Your first 2 x values in each data set are 0.2 and 0.5 - so that is where the points are plotted.
If you don't want them plotted that way, just remove the x values from the data, and they will plot in sequence.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/1/
If you want to have the 0.2 and 0.5 as axis labels, but want them evenly spaced still, you'll need to use categories for your x axis.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/2/
I have a graph with 4 different lines plotted using jqplot. I don't really want to create a legend so I wanted to label each line. I saw that there's a feature called pointLabels however, my labels aren't showing.
//function for the line graph
$(document).ready(function () {
var yticks = ['Early Definition', 'Pre Alpha', 'Alpha', 'Beta', 'PV', 'Sprint To Launch'];
var line1 = [[0, 1, null], [10.4, 2, null], [20.8, 3, null], [31.2, 4, null], [41.6, 5, 'FFD'], [52, 6, null]];
var line2 = [[0, 1, null], [10.4, 1, null], [20.8, 2, null], [31.2, 3, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var line3 = [[0, 1, null], [10.4, 2, null], [20.8, 4, null], [31.2, 5, null], [41.6, 6, 'Customer 1']];
var line4 = [[0, 1, null], [10.4, 1, null], [20.8, 1, null], [31.2, 1, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var plot3 = $.jqplot('linegraph', [line1, line2, line3, line4],
{
title: 'All Companies',
// Series options are specified as an array of objects, one object
// for each series.
series: [
{
// Change our line width and use a diamond shaped marker.
lineWidth: 4,
markerOptions: { style: 'dimaond' },
//color: '#FFFFFF'
},
{
// Don't show a line, just show markers.
// Make the markers 7 pixels with an 'x' style
lineWidth: 4,
markerOptions: { size: 7, style: "x" }
},
{
// Use (open) circlular markers.
lineWidth: 4,
markerOptions: { style: "filledCircle" }
},
{
// Use a thicker, 5 pixel line and 10 pixel
// filled square markers.
lineWidth: 4,
markerOptions: { style: "filledSquare", size: 10 }
},
{
pointLabels: { show: true, location: 's', ypadding: 3 }
},
],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
label: 'Work Weeks',
max: 55,
min: 0,
tickOptions: {
formatString: '%.0f',
},
},
yaxis: {
label: 'Phases',
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yticks
}
},
}
);
});
I've made sure that I've included the script for the pointLabels too:
<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
You should move the point label options outside of the series array and into a seriesDefaults section:
seriesDefaults: {
pointLabels: { show: true, location: 's', ypadding: 3 }
}
Updated fiddle here:
http://jsfiddle.net/R6sFn/3/