HighCharts - X axis labels spanning a range pending values - javascript

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.

Related

Remove space on bar ZingChart

I'm making a chart here and I have a little problem with removing the distance between the boxes
var myConfig = {
type: 'bar',
legend: {
layout: "x4",
overflow : "page",
shadow : false,
align : "left",
alpha :0.05,
"adjust-layout": true,
marker : {
type : "circle",
size : "7px",
"border-color" :"none"
}
},
scaleX: {
// convert text on scale indices
labels: ['Automotive', 'Retail', 'Wholesale']
},
plot: {
barWidth:"50%",
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_NODE',
speed: 275,
}
},
series: [
{
// plot 1 values, linear data
values: [23, 20, 27],
text: 'Sum of target Premi',
backgroundColor: '#fa6383',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [35, 42, 33],
text: 'Sum of premi Leads',
backgroundColor: '#fb9f40',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Activity',
backgroundColor: '#fdcd55',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Booking',
backgroundColor: '#4bc0c1',
borderRadius: 5,
}
]
};
for my settings like this. there are suggestions so there can be no space ?
i have try documentation but does not work.
https://www.zingchart.com/docs/chart-types/bar
I'm not sure that I correctly understood your problem but probably you can try to use "barsOverlap" in "plot" configuration to achieve the desired result.
var myConfig = {
type: 'bar',
legend: {
layout: "x4",
overflow : "page",
shadow : false,
align : "left",
alpha :0.05,
"adjust-layout": true,
marker : {
type : "circle",
size : "7px",
"border-color" :"none"
}
},
scaleX: {
// convert text on scale indices
labels: ['Automotive', 'Retail', 'Wholesale']
},
plot: {
barWidth:"50%",
barsOverlap: '50%',
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_NODE',
speed: 275,
}
},
series: [
{
// plot 1 values, linear data
values: [23, 20, 27],
text: 'Sum of target Premi',
backgroundColor: '#fa6383',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [35, 42, 33],
text: 'Sum of premi Leads',
backgroundColor: '#fb9f40',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Activity',
backgroundColor: '#fdcd55',
borderRadius: 5,
},
{
// plot 2 values, linear data
values: [15, 22, 13],
text: 'Sum of premi Booking',
backgroundColor: '#4bc0c1',
borderRadius: 5,
}
]
};

Using Highcharts with Rails 6

I have a Rails 6 app in which I am using Highcharts. I'm using plain JavaScript at the moment, then I'll transition to the highchart gem when I have the chart exactly how I want it. I have the chart almost exactly how I want it to render except for two things:
How can I use two different colors for a scatter chart?
How can I have just two lines bisecting my chart?
My data, at the moment is just a hard-coded array of arrays, something like this: [[3, 5], [7, 3], [22, 10], [35, 35], [10, 5], [10, 7]]. I would like to split the array in two and use two different colors for the points on the scatter chart.
For the lines, I would only like to show a line on the 'y' axis at point 50 (my y axis goes from 0 to 100) and one line on the 'x' axis at point 100 (my x axis goes from 0 to 200). Currently, I have both the lines on point 0.
Split your data into two series and set individual color for them.
Set gridLineWidth to 0 for both axes and add the lines by plotLines.
chart: {
type: 'scatter',
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0,
plotLines: [{
value: 50
}]
},
xAxis: {
min: 0,
max: 200,
gridLineWidth: 0,
plotLines: [{
value: 100
}]
},
series: [{
color: 'red',
data: [
[3, 5],
[7, 3],
[22, 10]
]
}, {
color: 'blue',
data: [
[35, 35],
[10, 5],
[10, 7]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/vm9Lrgds/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines

How to add text to the bottom of a Highchart, but above the legend?

I want to add some text or image under a Highchart, but it must appear above the Highchart legend.
My code:
$(function () {
Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'drawPoints', function (proceed) {
proceed.apply(this);
for (i in this.data) {
if(this.data[i].options.x > 90)
this.data[i].graphic.dashstyleSetter(this.options.dashStyle || 'solid');
}
});
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: 'Highcharts Bubbles'
},
series: [{
dashStyle: 'dash',
data: [
[97, 36, 79],
[94, 74, 60],
[68, 76, 58],
[64, 87, 56],
[68, 27, 73],
[74, 99, 42],
[7, 93, 87],
[51, 69, 40],
[38, 23, 33],
[57, 86, 31]
],
marker: {
lineColor: 'red'
}
}]
});
});
Here's my JsFiddle: http://jsfiddle.net/qebxk6ty/6/
I want to add a static image or text underneath the chart, but above the legend to indicate what the dashed bubbles mean.
This answer shows how to add it below the legend:
How do you add text to the bottom center of legend and bottom center of chart under legend?
I am at a loss as to how to modify it.
Thanks in advance.
You can do this,
$('#container').highcharts({
xAxis: {
title: {
text: "DISPLAY WHATEVER YOU WANT TO"
}
},
DEMO
EDIT
chart: {
events: {
load: function () {
var label = this.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
.css({
width: '450px',
color: '#222',
fontSize: '16px'
})
.attr({
'stroke': 'silver',
'stroke-width': 2,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0, // offset
verticalAlign: 'bottom',
y: 50 // offset
}), null, 'spacingBox');
}
},
DEMO
Increase chart.spacingBottom and legend.y properties.
chart: {
spacingBottom: 100,
},
legend: {
y: 100
},
Render label/image, align it and set its y property.
function renderLabel() {
var label = this.renderer.label("How do I move this center and under the legend.")
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0, // offset
verticalAlign: 'bottom',
y: 60 // offset
}), null, 'spacingBox');
}
Values are mostly hardcoded but if you want to do it in a dynamic way then you need to set the values based on label/img height.
example: http://jsfiddle.net/qebxk6ty/7/
Was dealing with same issue but with Pie Chart as xAxis title doesn't work with PIE chart I solved it with positioning legend and subtitle both.
// Data retrieved from https://netmarketshare.com
Highcharts.chart('container', {
chart: {
type: 'pie',
marginBottom: 100 // Increase the margin to make room for the subtitle and legend
},
title:{
text: 'Browser market shares at a specific website, 2014'
},
subtitle: {
text: 'Source: Wikipedia.org',
align: 'center',
verticalAlign: 'bottom',
style: {
fontSize: 20,
},
y: -20 // Adjust the y position of the subtitle
},
legend: {
align: 'center',
verticalAlign: 'bottom',
y: 50 // Adjust the y position of the legend
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}],
});

Line chart not drawn to scale

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/

jqPlot data point gets cut off

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

Categories