Related
I have 4 axis in a Highstock chart:
var p0 = [
[1538341200000,110.91],
[1538427600000,126.01],
[1538514000000,129.54],
[1538600400000,125.54]];
var p1 = [
[1538341200000,113.14],
[1538427600000,129.48],
[1538514000000,132.28],
[1538600400000,129.53],];
var t0 = [
[1538341200000,29.25],
[1538427600000,37.28],
[1538514000000,36.1],
[1538600400000,36.17],];
var t1 = [
[1538341200000,29.67],
[1538427600000,37.53],
[1538514000000,37.26],
[1538600400000,37.9],];
Highcharts.stockChart('container', {
chart: {
renderTo: "container"
},
title: {
text: "Sample test",
align: "center",
y: 14
},
legend: {
enabled: true,
align: "center",
verticalAlign: "top",
y: 40
},
xAxis: {
ordinal: false
},
yAxis: [
{
left: "-100%",
height: "18%",
top: "7%"
},
{
left: "-100%",
height: "18%",
top: "32%"
},
{
left: "-100%",
height: "18%",
top: "57%"
},
{
left: "-100%",
height: "18%",
top: "82%"
}
],
series: [
{
name: "Pressure 3",
data: p0,
yAxis: 0
},
{
name: "Pressure 4",
data: p1,
yAxis: 1
},
{
name: "Temperature 3",
data: t0,
yAxis: 2
},
{
name: "Temperature 4",
data: t1,
yAxis: 3
}
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>
Now, I want to add titles to every axis on the top left corner, like this:
var p0 = [
[1538341200000,110.91],
[1538427600000,126.01],
[1538514000000,129.54],
[1538600400000,125.54]];
var p1 = [
[1538341200000,113.14],
[1538427600000,129.48],
[1538514000000,132.28],
[1538600400000,129.53],];
var t0 = [
[1538341200000,29.25],
[1538427600000,37.28],
[1538514000000,36.1],
[1538600400000,36.17],];
var t1 = [
[1538341200000,29.67],
[1538427600000,37.53],
[1538514000000,37.26],
[1538600400000,37.9],];
Highcharts.stockChart('container', {
chart: {
renderTo: "container"
},
title: {
text: "Sample test",
align: "center",
y: 14
},
legend: {
enabled: true,
align: "center",
verticalAlign: "top",
y: 40
},
xAxis: {
ordinal: false
},
yAxis: [
{
title: {
text: "Pressure 3",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "7%"
},
{
title: {
text: "Pressure 4",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "32%"
},
{
title: {
text: "Temperature 3",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "57%"
},
{
title: {
text: "Temperature 4",
rotation: 0,
y: -10
},
left: "-101%",
height: "18%",
top: "82%"
}
],
series: [
{
name: "Pressure 3",
data: p0,
yAxis: 0
},
{
name: "Pressure 4",
data: p1,
yAxis: 1
},
{
name: "Temperature 3",
data: t0,
yAxis: 2
},
{
name: "Temperature 4",
data: t1,
yAxis: 3
}
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 400px; height: 600px;"></div>
As you can see every title breaks the next one adding some margin and "pushing" them to the right.
This is the expected result:
I tried many highstock properties and css styles to make them float to avoid them to push themselves, but nothing is working.
How to avoid this problem?
What you're trying to achieve is not a default behavior for axis title. The easiest way to plot titles as you expect is to make custom titles using Highcharts SVG renderer.
Each yAxis has properties top and left that we can use to plot custom titles at proper positions. Notice, that navigator is just an additional series so yAxis array will have one more element than you defined. Titles created by renderer are Highcharts.SVGElement. Each time the chart will be rendered you have to destroy the old ones and rendered them again (in new positions):
var titlesColl = [],
titles = [
"Pressure 3",
"Pressure 4",
"Temperature 3",
"Temperature 4"
];
chart: {
events: {
render: function() {
var chart = this,
yaxisColl = chart.yAxis,
offsetY = -4,
axis,
title,
i;
if (titlesColl.length) {
titlesColl.forEach(function(elem) {
elem.destroy();
});
titlesColl.length = 0;
}
for (i = 0; i < yaxisColl.length - 1; i++) {
axis = yaxisColl[i];
title = chart.renderer
.text(titles[i], axis.left, axis.top + offsetY)
.css({
'font-size': '10px'
})
.add();
titlesColl.push(title);
}
}
}
}
chart.events.render documentation
Demo:
https://jsfiddle.net/wchmiel/sxnyLhfb/
I'm trying to recreate a linear gauge chart of fusionchart in highcharts. This is the example that I am trying to recreate.
Head:
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
Body:
FusionCharts.ready(function () {
var cpuGauge = new FusionCharts({
type: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '190',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "-1.9",
"upperLimit": "4.4",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"pointerBgColor": "#000000",
"baseFontColor": "#000000",
"decimalSeparator": ",",
"forceDecimals": "1",
"decimals": "1",
"valueFontBold": "0"
},
"colorRange": {
"color": [
{
"minValue": "-1.9",
"maxValue": "-0.1",
"label": "",
"code": "#e51b1b",
},
{
"minValue": "-0.1",
"maxValue": "1.0",
"label": "",
"code": "#fa7921",
},
{
"minValue": "1.0",
"maxValue": "1.5",
"label": "",
"code": "#fde74c",
},
{
"minValue": "1.5",
"maxValue": "4.4",
"label": "",
"code": "#9bc53d",
}
]
},
"pointers": {
"pointer": [
{
"value": "2"
}
]
},
}
})
.render();
});
The highcharts chart must take over the following properties:
Negative values
At least 4 groups (colors)
Pointer (indication marker) with number at top
In addition, I would really appreciate if there is an animation where you can see the pointer moving.
The bullet graph from highcharts comes closest to the fusionchart. I have made a first step (example) with this graph
Head:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>
Body:
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '200%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container1', {
chart: {
marginTop: 40
},
title: {
text: ''
},
xAxis: {
categories: "P"
},
yAxis: {
plotBands: [{
from: -1.9,
to: -0.1,
color: '#e51b1b'
}, {
from: -0.1,
to: 1,
color: '#fa7921'
}, {
from: 1,
to: 1.5,
color: '#fde74c'
}, {
from: 1.5,
to: 4.4,
color: '#9bc53d'
}],
labels: {
format: '{value}%'
},
title: null
},
series: [{
data: [{
y: 0,
target: 2
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
CSS:
#container1 {
max-width: 800px;
height: 115px;
margin: 1em auto;
}
But encounter a number of problems:
Negative numbers are not working
Pointer
Maximum is not shown (stops before 4.4)
With reference to this post. I have modified this chart with yAxis.tickPositioner and min, max property of yAxis
$(function () {
/**
* Highcharts Linear-Gauge series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
wrap = H.wrap,
each = H.each;
defaultPlotOptions.lineargauge = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.lineargauge = H.extendClass(columnType, {
type: 'lineargauge',
//inverted: true,
setVisible: function () {
columnType.prototype.setVisible.apply(this, arguments);
if (this.markLine) {
this.markLine[this.visible ? 'show' : 'hide']();
}
},
drawPoints: function () {
// Draw the Column like always
columnType.prototype.drawPoints.apply(this, arguments);
// Add a Marker
var series = this,
chart = this.chart,
inverted = chart.inverted,
xAxis = this.xAxis,
yAxis = this.yAxis,
point = this.points[0], // we know there is only 1 point
markLine = this.markLine,
ani = markLine ? 'animate' : 'attr';
// Hide column
point.graphic.hide();
if (!markLine) {
var path = inverted ? ['M', 0, 0, 'L', -5, -5, 'L', 5, -5, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -5, -5, 'L', -5, 5,'L', 0, 0, 'L', xAxis.len, 0];
markLine = this.markLine = chart.renderer.path(path)
.attr({
fill: series.color,
stroke: series.color,
'stroke-width': 1
}).add();
}
markLine[ani]({
translateX: inverted ? xAxis.left + yAxis.translate(point.y) : xAxis.left,
translateY: inverted ? xAxis.top : yAxis.top + yAxis.len - yAxis.translate(point.y)
});
}
});
})(Highcharts);
$('#container').highcharts({
chart: {
type: 'lineargauge',
inverted: true
},
title: {
text: 'A Horizontal Linear Gauge'
},
xAxis: {
lineColor: '#C0C0C0',
labels: {
enabled: false
},
tickLength: 0,
},
yAxis: {
min: -1.9,
max: 4.4,
tickPositions: [-1.9, -0.1,1,1.5 ,4.4],
tickLength: 1,
tickWidth: 1,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 1,
minorTickInterval: 5,
minorTickWidth: 1,
minorTickLength: 5,
minorGridLineWidth: 0,
startOnTick: true,
endOnTick: true,
title: null,
labels: {
format: '{value}%'
},
plotBands: [{
from:-1.9,
to: -0.1,
color: 'rgba(229, 27, 27, 1)'
}, {
from: -0.1,
to: 1.0,
color: 'rgba(250, 121, 33, 1)'
}, {
from: 1.0,
to: 1.5,
color: 'rgba(253, 231, 76, 1)'
},
{
from: 1.5,
to: 4.4,
color: 'rgba(155, 197, 61, 1)'
}]
},
legend: {
enabled: false
},
series: [{
data: [1.1],
color: '#000000',
dataLabels: {
enabled: true,
align: 'center',
format: '{point.y}%',
y: 10,
}
}]
}, // Add some life
function (chart) {
setInterval(function () {
Highcharts.each(chart.series, function (serie) {
var point = serie.points[0],
newVal,
inc = (Math.random() - 0.5) *10;
newVal = point.y + inc;
if (newVal < -1.9 || newVal > 4.4) {
newVal = point.y - inc;
}
point.update(Math.floor(newVal));
});
}, 2000);
});
});
Fiddle demo
i have a problem, i use this control is a jqxGrid, this is:
function initGridUsuarios() {
// campos y adaptador
var fields = [
{ name: "NoEmpleado", type: "int" },
{ name: "Nombre", type: "string" },
{ name: "Departamento", type: "string" }
],
dataAdapter = utils.generateGridAdapter(gridEmpleados, "GestionPaqueteInfo", "ObtenerGridUsuarios", fields, getGridFilters);
gridEmpleados.jqxGrid({
width: 900,
height: 400,
theme: tema,
columnsresize: true,
pageable: true,
altrows: true,
virtualmode: true,
rendergridrows: function () {
return dataAdapter.records;
},
localization: utils.getIdiomaGrid(),
source: dataAdapter,
columns: [
{ text: "Id", dataField: "Id", columngroup: "Titulo", width: 100, hidden: true },
{ text: "Número de Empleado", dataField: "NoEmpleado", columngroup: "Titulo", width: 150 },
{ text: "Nombre", dataField: "Nombre", columngroup: "Titulo", width: 250 },
{ text: "Departamento", dataField: "Departamento", columngroup: "Titulo", width: 350 },
{
text: "Crear paquete info", datafield: "Crear", columngroup: "Titulo", columntype: "button", width: 150, cellsrenderer: function () {
return "Crear";
}, buttonclick: function (clickRow) {
crear();
}
},
],
columngroups: [
{ text: "Busqueda de Empleados para creación de paquete inventario informática", align: "center", name: "Titulo" }
]
});
}
actually it loose the filter, when i change the page, what can i do to not lose the filter?
:$ sorry my english is not really good :$:$
I'm having problems in the integration of Solid Gauge in Highcharts with Google Sheets. I manage lines, bars and others, but this could not pull data.
Has anyone done something like that in Highcharts?
..............................................................................................................................................................
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
// RPM
chart = $('#container-rpm').highcharts();
if (chart) {
point = chart.series[0].points[0];
inc = Math.random() - 0.5;
newVal = point.y + inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
Looks like possibly bug, reported here: https://github.com/highslide-software/highcharts.com/issues/4427
Work, but, i use JS from Highchart cloud.
function parseData(completeHandler, chartOptions) {
try {
var dataOptions = {
"googleSpreadsheetWorksheet": "3",
"endColumn": null,
"seriesMapping": [
{
"x": 0
}
],
"googleSpreadsheetKey": "1u0vGMYJM-iAP04NMARJuB875Y3xOj8gDGPbfzEf1FL8",
"startRow": null,
"startColumn": null,
"endRow": null
};
dataOptions.sort = true
dataOptions.complete = completeHandler;
Highcharts.data(dataOptions, chartOptions);
} catch (error) {
console.log(error);
completeHandler(undefined);
}
}
var template = {
chart: {
renderTo: 'container'
},
navigation: {
menuItemStyle: {
fontFamily: Highcharts.SVGRenderer.prototype.getStyle().fontFamily,
padding: '2px 10px'
}
},
};
var chartOptions = {
"plotOptions": {
"solidgauge": {
"dataLabels": {
"useHTML": true,
"borderWidth": 0,
"y": 10
}
}
},
"yAxis": {
"tickPixelInterval": 50,
"tickWidth": 0,
"minorTickInterval": null,
"min": 0,
"max": 16,
"stops": [
[
0.1,
"#55BF3B"
],
[
0.5,
"#DDDF0D"
],
[
0.9,
"#DF5353"
]
],
"title": {
"y": -70,
"style": {
"fontSize": 20
},
"text": null
},
"lineWidth": 0,
"labels": {
"y": 16
}
},
"xAxis": {
"labels": {
"format": null
}
},
"credits": {
"enabled": false
},
"series": [
{
"dataLabels": {
"format": "\u003cdiv style\u003d\"text-align:center\"\u003e\u003cspan style\u003d\"font-size:25px;color:#000000\"\u003e{y}\u003c/span\u003e\u003c/div\u003e"
},
"index": 0
}
],
"subtitle": {
"text": null
},
"tooltip": {
"enabled": false
},
"title": {
"text": "METAS MÊS"
},
"pane": {
"startAngle": "-90",
"size": "140%",
"background": {
"backgroundColor": "#EEE",
"innerRadius": "60%",
"outerRadius": "100%",
"shape": "arc"
},
"center": [
"50%",
"85%"
],
"endAngle": "90"
},
"chart": {
"type": "solidgauge"
}
};
parseData(function (dataOptions) {
// Merge series configs
if (chartOptions.series && dataOptions) {
Highcharts.each(chartOptions.series, function (series, i) {
chartOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]);
});
}
var options = Highcharts.merge(dataOptions, chartOptions, template);
var chart = new Highcharts['Chart'](options);
}, chartOptions);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://akasicuro.com/plataforma/highstock-cloud.js"></script>
<div id="container" style="width:100%; height:100%;max-width:1000px;margin: 0 auto"></div>
Is it possible to do two pies in one graphic and merge legends?
I did this : http://jsfiddle.net/Adysone/YpfBs/
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: "Pie Charts",
align: 'center'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
tooltip: {
formatter: function () {
return this.key + ': ' + this.y + ' (' + Math.round(this.percentage) + '%)';
}
},
plotOptions: {
pie: {
showInLegend: true,
size: 200
}
},
series: [
{
name: "2011",
data: [
{
name: "Apple",
color: "#FF3333",
y: 8
},
{
name: "Banana",
color: "#FFF55C",
y: 11
},
{
name: "Grape",
color: "#90007B",
y: 9
},
{
name: "Pear",
color: "#F1FFB8",
y: 3
}
],
center: [150,100],
size: 150
},
{
name: "2012",
data: [
{
name: "Apple",
color: "#FF3333",
y: 5
},
{
name: "Banana",
color: "#FFF55C",
y: 15
},
{
name: "Pear",
color: "#F1FFB8",
y: 8
}
],
center: [450,100],
size: 150
}
]
});
But legend items are duplicated since they are common in the two pies, how can I do to make these unique?
If it's not possible, can I make two legends separate?
Thanks!
Please take look at example http://jsfiddle.net/u7FQS/15/ which used 3 pie charts and has common legend
$(chart.series[0].data).each(function(i, e) {
e.legendItem.on('click', function(event) {
var legendItem=e.name;
event.stopPropagation();
$(chart.series).each(function(j,f){
$(this.data).each(function(k,z){
if(z.name==legendItem)
{
if(z.visible)
{
z.setVisible(false);
}
else
{
z.setVisible(true);
}
}
});
});
});
});