I would like to be able to toggle between my groupings, (time/priority). I have a stacked column chart. there is a option to do this example. But it appears that it may only work with data already in a table, and I am bringing in my data as JSON.
my javascript is:
var chart_ops_support_times = new Highcharts.Chart({
chart: {
renderTo: 'chart_ops_support_times',
type: 'column'
},
title: {
text: '',
align: 'left'
},
subtitle: {
text: ' '
},
xAxis: {
categories: [
'one hour','2 hours','4 hours',
'8 hours','one day','2 days',
'one week','> one week'
]
},
yAxis: {
min: 0,
title: {
text: 'counts'
}
},
legend: {
align: 'left',
verticalAlign: 'top',
floating: true,
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
symbolHeight: 10,
symbolWidth: 10
},
tooltip: {
formatter: function () {
return "<b>" + this.x + "</b><br/>" +
this.series.name + ': ' + this.y + "<br/>" +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: data
});
Data module won't work with JSON.
The Data module provides options for loading data from external sources, like CSV files, HTML tables or Google Spreadsheets, in a convenient way, using a declarative options set.
(http://www.highcharts.com/docs/working-with-data/data-module)
Instead of using data module for this, you could parse your data from JSON to be used one way or another.
Other option is to create hidden HTML table with data from JSON and later use Highcharts with data module and use table.
Related
I have created Highchart form php table. Right now Y-axis max. and interval values are fixed. How can I make them dynamic using last four records. Say max. value is 20 from query then intervals will be 5. For max value I got query which returns max. value from 2 column and last 4 records.
Mysql query:
SELECT GREATEST(MAX(step1), MAX(step2)) FROM workflow1 ORDER BY id DESC LIMIT 4
Highchart script:
<script>
Highcharts.chart('container', {
data: {
table: 'datatable'
},
credits: {
enabled: false
},
chart: {
type: 'column'
},
title: {
text: 'Results',
style: {
color: '#FF00FF',
fontWeight: 'bold'
}
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'top',
y: 50,
padding: 3,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
lineHeight: '14px'
}
},
yAxis: {
min: 0,
max: 100,
tickInterval: 20,
allowDecimals: false,
title: {
text: 'Time in Sec.'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
If you don't define specific values for min, max, or tickInterval, Highcharts will automatically adjust the axis' maximum value and tick intervals based on the current data available.
The dynamic update Highcharts demo shows how this works (though you may have to wait a bit before it goes above 1 in the example): https://www.highcharts.com/demo/dynamic-update
Glad this was helpful for you!
I have a site where I have used highcharts for some years with no problem. Original version was 4.2.0.
I tried to update to version 5.0.7 by downloading directly from highcharts site. Then, I replaced the corresponding script tags to reflect the change. However, with that change, I only get a black box where the graph should be.
This is how the highchart is initialized:
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor: null
},
title: {
text: 'Resumen Comparativo Inter-Zonas País (' + meses[periodo % 100 - 1] + '-' + Math.floor(periodo / 100) + ')',
style: {
"fontSize": "14px"
}
},
credits: {
enabled: false
},
xAxis: {
categories: zonas
},
yAxis: [{
min: 0,
title: {
text: 'Totales por Zonas y País'
}
}, {
min: -1000000000,
title: {
text: 'No Encontrados',
style: {
color: '#B2455E'
}
},
labels: {
style: {
color: '#B2455E'
}
},
opposite: true,
reversed: false
}],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Repetidos',
type: 'column',
data: getMontosPorCondicion(inventarios, 'REPETIDO', null)
}, {
name: 'Resellados',
type: 'column',
data: getMontosPorCondicion(inventarios, 'RESELLADO', null)
}, {
name: 'Abiertos',
type: 'column',
data: getMontosPorCondicion(inventarios, 'ABIERTO', '#8BBC22')
}, {
color: '#B2455E',
name: 'No Encontrados',
type: 'spline',
yAxis: 1,
marker: {
fillColor: '#FFFFFF',
lineColor: null,
lineWidth: 2
},
data: getMontosPorCondicion(inventarios, 'NO ENCONTRADO', '#B2455E')
}]
});
Any help?
Your copy of highcharts.js might be different from the cdn https://code.highcharts.com/highcharts.js. Replace the codes in your copy with that of the cdn. This should work fine.
You additionally need to add highcharts.css to your page.
As per the highcharts site:
"If you are styling your charts using CSS, load the javascript files from the /js/ directory. For these files, presentational code is removed, and CSS is required to style the chart."
We import a CSV File into Highcharts. The first Row holds the names of the series.
Now we need to display our charts also for another language.
How can we get the serie names and translate them? Or is there another way naming the series when importing from CSV?
We import the csv like following code:
$.get('data.csv', function(csv) {
Highcharts.setOptions({
colors: ['#ffd800']
});
$('.loadDiv1').hide();
$('#chart_1').highcharts({
chart: {
type: 'area'
},
data: {
csv: csv,
itemDelimiter: ';',
lineDelimiter: '\n',
decimalPoint: ','
},
title: {
text: '<?php echo $lang['79']; ?>',
style: {
color: '#68666b',
fontWeight: 'bold',
fontSize: '14px'
}
},
yAxis: {
min: 1,
max: 10,
tickInterval: 1,
title: {
text: ''
},
labels: {
format: '{value} kW'
}
},
legend:{
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
credits: {
enabled: false
}
});
});
The CSV FIle looks like this:
row;Serienname 1;Serienname 2;Serienname 3;Serienname 4;Serienname 5
00:00;0,00;0,00;0,00;0,00;0,00
00:02;0,00;0,00;0,00;0,00;0,00
We need the "Serienname 1 -5" (the names are only examples, we use other german words) translated in different languages.
Thank you for help
Neil
There is an example here you can do custom preprocessing csv custom preprocessing
And you can probably use this jquery plugin to translate translate.js
Adding classes to series
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 50,
marginBottom: 175,
events: {
load: function () {
var chart = this;
$(chart.series).each(function (i, serie) {
$('<li style="color: ' + serie.color + '">' + serie.name + '</li>').click(function () {
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend');
});
}
}
}
I am trying to prepare a Tornado Chart using the column chart in Highcharts. Here is my fiddle.
My current code is:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Net Sales'
},
subtitle: {
text: 'MM $'
},
xAxis: {
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs']
},
yAxis: {
title: {
text: 'MM $'
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y;
}
}
},
scatter:{
marker:{
symbol:'line',
lineWidth:11,
radius:8,
lineColor:'#f00'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[12.15, 46.86],
[15.45, 42.28],
[27.77, 31.24]
]
},
{
name:'Base',type: 'scatter',data:[120],
}]
});
The problem is that the last series (Annual Costs) does not show, as it is in reversed order. Also, I'd like the Tornado Chart to look more like this:
Note that the labels in this chart are different from the actual values plotted. Also note that the bar in the center - in the example code, there would be a vertical line at 29.5. I would also like to support a combined uncertainty bar like the one at the bottom. Any suggestions would be greatly appreciated.
Your last bat is not showing, because first number is lower than second, see: http://jsfiddle.net/kErPt/1/
If you want to display another values at labels, then add that info first. Example:
data: [{
low: 12,
high: 15,
lowLabel: 35,
highLabel: 46
}, {
low: 2,
high: 35,
lowLabel: 15,
highLabel: 26
} ... ]
And then use dataLabels.formatter for series.
To add vertical line use plotLines.
I'm not sure what is the last bar called 'combined uncertainty'.
I've used Highcharts with separate series (thanks jlbriggs) to create a Tornado Chart: http://jsfiddle.net/uRjBp/
var baseValue = 29.5;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//type:'column'
//type:'area'
//type:'scatter'
//type:'bubble'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
tooltip: {
formatter: function() {
var msg = "";
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
var low = round(this.series.chart.series[0].data[index].y+baseValue);
var high = round(this.series.chart.series[1].data[index].y+baseValue);
if (this.x === "Combined Uncertainty") {
msg = "Combined Uncertainty in "+outputTitle+": "+low+" to "+high;
} else {
var lowLabel = this.series.chart.series[0].data[index].label;
var highLabel = this.series.chart.series[1].data[index].label;
msg = '<b>'+outputTitle+'</b> goes from '+ low +' to '+ high+'<br/> when '+this.x +
' goes from <br/> '+lowLabel+" to "+highLabel;
}
return msg;
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y+baseValue;
}
return this.key === "Combined Uncertainty" ? "":this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals:false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty']
},
yAxis: {
title: {
text: 'MM $'
},
labels: {
formatter:function() {
return this.value+baseValue;
}
}
},
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[{y:12.15-baseValue, label:10},{y:15.45-baseValue, label:1},{y:31.25-baseValue, label:2},{y:12.15-baseValue, color:'#99CCFF', label: ""}],
labels:[10,1,2,]
},{
name: 'High',
grouping:false,
type:'bar',
data:[{y:46.86-baseValue, label:30},{y:42.28-baseValue, label:3},{y:27.77-baseValue, label:4},{y:46.86-baseValue, color:'#99CCFF', label:""}],
labels:[30,3,4,]
},
{
name: 'Median',
type: 'scatter',
data: [null,null, null,27-baseValue],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
function round(num) {
return Math.round(num*100)/100;
}
usually, this kind of chart is done using a separate series for the left and right portions
One way to do this is by setting one set of data as negative numbers, and then using the formatters to make the axis labels, datalabels, and tooltips display the absolute values
example:
http://jsfiddle.net/jlbriggs/yPLVP/68/
UPDATE:
to show a line as in your original chart, you can extend the marker symbols to include a line type, and use a scatter series to draw that point:
http://jsfiddle.net/jlbriggs/yPLVP/69/
If you don't want to have the extra code for the line marker type, you could use any of the other existing marker symbols for the scatter series.
When I create a stacking bar chart, the rightmost 'box' doesn't have the border drawn on the right hand side.
Is there an option or something that I can set in Highcharts to force the white border line to be drawn around the 75% box in the image seen below?
Here is a link to the jsfiddle I used for testing:
http://jsfiddle.net/zKgsF/
Please note: Setting the borderWidth property to higher than 1 works in displaying, but the rightmost border is much thinner than the others. See the image below.
Here is the javascript for the chart:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'rgba(0,0,0,.3)',
margin: [15,6,15,15],
},
xAxis: {
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
gridLineColor: "#FF0000",
labels:
{
align: 'right',
formatter: function()
{
return this.value + "%";
}
},
},
tooltip: {
formatter: function()
{
return "<b>" + this.series.name + '</b>: ' + this.y + ' (' + Math.round(this.percentage,1) + "%)";
}
},
plotOptions: {
bar: {
animation: false,
stacking: 'percent',
borderWidth: '1',
dataLabels: {
enabled: true,
color: 'white',
formatter: function() {
if (this.percentage < 10)
{
return ""
}
else
{
return Math.round(this.percentage,1) + "%";
}
},
style: {
fontSize: '18px'
}
}
}
},
series: [{
data: [30]
},{
data: [10]
}]
});
});
EDIT:
Looks like it's not related to the bar chart being "stackable". It might just be related to the fact that the chart goes to the max 'y' value axis... as seen here in another example: http://jsfiddle.net/zKgsF/1/
As suggested by Cubbuk, you can tweak it with by adding the max value of yAxis.
In addition, you can specify a endOnTick property too.
max: 100.1,
endOnTick: false
For API navigate here and for here is an example.