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/
Related
I need to design the same below image chart example in Highchart.js which is built in excel. Can anyone please help me to develop this in highcharts.js only like the below image?
Image Preview
I already have implemented it in a similar way. But I need this in a different group of colors and combinations in the same chart. -
`https://jsfiddle.net/shwetapandey/rwmxoka5`
I suggest to add new series, with different xAxis, series.columnrange.xAxis. To styling you have options to adjust like xAxis.left and xAxis.top.
chart: {
type: 'columnrange',
},
xAxis: [{
width: '33%',
offset: 0,
}, {
left: '50%',
width: '33%',
offset: 0,
}],
plotOptions: {
xAxis: {
labels: {
enabled: true
}
},
columnrange: {
grouping: false,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Joe',
color: '#E5DDE3',
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
]
},
{
name: 'Jane',
color: '#BEA9BA',
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#A5879E',
name: 'John',
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
},
{
name: 'Joe1',
color: '#FFA500',
xAxis: 1,
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
].reverse()
},
{
name: 'Jane1',
color: '#FFA500',
xAxis: 1,
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#FFA500',
name: 'John1',
xAxis: 1,
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
}
]
Demo: https://jsfiddle.net/BlackLabel/cpjgvds9/
To control each series you need to write a custom legend control, for this you can use legend.labelFormatter, that give you callback function to format each of the series' labels.
EDIT ------
To control many group series I used callback function events.legendItemClick builded in series events. They give way to manage series at legend in that case I compare name of series and index of items to hide and show group of series with custom legend.
events: {
legendItemClick: function() {
let name = this.name.substring(this.name.length - 1, this.name.length);
let _i = this._i;
this.chart.series.forEach(function(p, i) {
console.log('p: ', p, 'i: ', i);
if (name === p.name.substring(p.name.length - 1, p.name.length) && _i !== p._i) {
(!p.visible) ? p.show(): p.hide()
}
})
}
}
Demo: https://jsfiddle.net/BlackLabel/v0kt5b14
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
I need to create a line chart like in the image:
What I have achieved till now is
var line_opt = {
series: {
lines: { show: true },
points: { show: true }
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: 0,
max: 6,
autoscaleMargin: .5,
labelWidth: -15,
tickLength: 0,
tickFormatter: function suffixFormatter(val, axis) {
return (val.toFixed(0));
}
},
xaxis: {
tickSize: 1
}
};
var lineData = [
[1, 5], [2, 4], [3, 4], [4, 4], [5, 3], [6, 4], [7, 4], [8, 3], [9, 4], [10, 3],
[11, 3], [12, 4], [13, 4], [14, 3], [15, 3], [16, 3], [17, 3], [18, 3], [19, 4], [20, 3],
[21, 3], [22, 3], [23, 3], [24, 2], [25, 2], [26, 3], [27, 2], [28, 2], [29, 2]
];
Is there any way that the X axis lines start from the bottom of the chart and end where the point is (like in the first image) and also hide the x axis labels without the lines?
This can be achieved with different options (removing the gridlines) and using markings to fake the gridline only up to the chart:
Code (see this fiddle for the working demo):
var line_opt = {
series: {
lines: {
show: true
},
points: {
show: false
}
},
grid: {
backgroundColor: { colors: ["#fff", "#ddd"] },
hoverable: true,
clickable: true,
borderWidth: 0,
markings: []
},
yaxis: {
min: 0,
max: 6,
autoscaleMargin: .5,
//labelWidth: -15,
tickLength: 0,
tickFormatter: function suffixFormatter(val, axis) {
return (val.toFixed(0));
}
},
xaxis: {
ticks: false,
autoscaleMargin: .01,
tickSize: 1,
tickLength: 0 // only needed if ticks is not false
}
};
var lineData = [ ... ];
for (var i=0; i < lineData.length; i++){
line_opt.grid.markings.push({
xaxis: { from: lineData[i][0], to: lineData[i][0] },
yaxis: { from: 0, to: lineData[i][1] },
lineWidth: 1,
color: "#aaaaaa"
});
}
Reading the API documentation, it should be possible.
For the lines ending where the point is, use the grid options, the aboveData:
grid: {
show: boolean
aboveData: boolean
color: color
backgroundColor: color/gradient or null
labelMargin: number
axisMargin: number
markings: array of markings or (fn: axes -> array of markings)
borderWidth: number
borderColor: color or null
minBorderMargin: number or null
clickable: boolean
hoverable: boolean
autoHighlight: boolean
mouseActiveRadius: number
}
You shouldn't need an xaxis for anything at that point, you can just hide it:
xaxis, yaxis: {
show: null or true/false
I'm new to json and flot. But I ve been asked to create a chart. Could someone explain to me why my code will not work?
$.getJSON('chart.json', function(graphData){
alert(graphData);
$.plot($('#graph-lines'), graphData, {
series: {
points: {
show: true,
radius: 15,
},
lines: {
show: true,
lineWidth: 6
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true,
highlightColor: "transparent"
},
xaxis: {
tickColor: 'transparent',
ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']]
},
yaxis: {
min: 0,
max: 1000,
tickSize: 500
}
});
// Bars
$.plot($('#graph-bars'), graphData, {
series: {
bars: {
show: true,
barWidth: .9,
align: 'center'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
tickDecimals: 2
},
yaxis: {
tickSize: 1000
}
});
});
From what I ve learned so far is that jquery $.getJSON('chart.json', function(graphData) should retrieve the json file. and $.plot($('#graph-lines'), graphData,{}) should parse it.
This is my JSON file:
{
data: [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
color: '#F02626',
points: { fillColor: '#F02626', radius: 6 },
lines: { fillColor: '#CCF8FF'}
}, {
data: [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
color: '#26F041',
points: { radius: 10, fillColor: '#26F041' }
}, {
data: [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
color: '#20AEFA',
points: { radius: 6, fillColor: '#20AEFA'}
}
So, I need all the properties in JSON (data, color and point) as they will override the default and give each line or bar a different color.
I got it working before. I had the json written inside .js but I want to call it from an external JSON file.
Im not looking for an answer "Try this". I would like to understand what I'm doing wrong and why, so I can learn why it works the way it does.
Thank you in advance.
it's simple your json file is not valid
it should be like this
[
{
"data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
"color": "#F02626",
"points": { "fillColor": "#F02626", "radius": 6 },
"lines": { "fillColor": "#CCF8FF"}
},
{
"data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
"color": "#26F041",
"points": { "radius": 10, "fillColor": "#26F041" }
},
{
"data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
"color": "#20AEFA",
"points": { "radius": 6, "fillColor": "#20AEFA"}
}
]
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