I am not exactly new to highcharts, but I am not exactly a "power user" either.
I have these charts on a security report that will almost invariably always have at least 1 column that has no value displayed because the value is too low, compared to the others.
The design requirement is that these do not have tool tips, just the data being displayed.
Maybe I am being thick, but when I think i see the answer I try it and it doesn't work... for example I have tried setting the "min" attribute on the x axis etc, but no luck. Is this doable? I assume if it is, I am putting the attribute in the wrong place.
Here is an example, look at column one code sample is in there... but it is below as well
JSFiddle Link : http://jsfiddle.net/ur58nae5/
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: null,
style: {
fontFamily: 'helvetica, arial'
}
},
colors:['#F5A623'],
credits: false,
title: {
text: 'Attacks by Risk Score'
},
subtitle: {
text: 'Number of malicious IPs seen in this period based on maximum risk score'
},
xAxis: {
type: 'category',
title: {
text: "Risk Score"
},
labels: {
rotation: 0,
style: {
fontSize: '11px',
fontFamily: 'helvetica, arial, Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of IP Addresses'
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
name: 'IPS',
data: [
['1', 21],
['2', 109],
['3', 112],
['4', 125],
['5', 106],
['6', 112],
['7', 143],
['8', 207],
['9', 386],
['10', 908]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
y: 10, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'helvetica, arial, sans-serif',
textShadow: false,
fontWeight: 'normal'
}
}
}]
});
});
As I understand it, your problem is that sometimes the columns are too small to display the dataLabels. You have a couple of options:
You can use a logarithmic scale to make the data differences less pronounced.
http://jsfiddle.net/ur58nae5/1/
yAxis: {
type:'logarithmic',
title: {
text: 'Number of IP Addresses'
}
},
Or you can format points that are smaller than some threshold to move the label outside the column
series: [{
name: 'IPS',
data: [
{x:1, y:21, dataLabels: { color:'#000', y:-15}},
['2', 109],
['3', 112],
['4', 125],
['5', 106],
['6', 112],
['7', 143],
['8', 207],
['9', 386],
['10', 908]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
y: 10, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'helvetica, arial, sans-serif',
textShadow: false,
fontWeight: 'normal'
}
}
}]
http://jsfiddle.net/ur58nae5/2/
http://jsfiddle.net/ur58nae5/3/
Related
This chart worked for years with no issue and a few days ago I noticed the lines are not populating. Cannot find a fix here or on highcharts forums. Typically, when something is wrong with the javascript, nothing populates but in this case, everything populates but the lines and associated data.
Thank you in advance!
JSFiddle: https://jsfiddle.net/jstark/zf3ma5so/2/
$(function () {
$('#container101').highcharts({
chart: {
type: 'line',
spacingBottom: 5,
spacingTop: 15,
spacingLeft: 35,
spacingRight: 35
},
title: {
text: 'Graduation Diploma Types Awarded by Year',
style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "24px", "fontWeight":"bold"}
},
xAxis: {
categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
crosshair: true
},
yAxis: {
min: '40',
max: '60',
title: {
text: 'Percentage Awarded',
style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"},
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%',
borderColor: 'gray',
borderRadius: 10,
shadow: false
},
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
itemMarginBottom: 20,
itemStyle: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"}
},
series: [{
name: 'Advanced/CCR/Honors Diploma',
color: '#01a2d7',
data: [46, 45, 48, 49, 50, 50, 52, 47, 49, 49, 50, 49],
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#01a2d7'
}
}, {
name: 'Standard Diploma',
color: '#01519c',
data: [51, 52, 51, 50, 50, 50, 48, 53, 51, 51, 50, 51],
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#01519c'
}
}]
});
});
The min/max properties on yAxis should be numbers instead of strings.
min: 40,
max: 60,
instead of
min: '40',
max: '60',
I took the code from highcharts demo. The columns are in the color. I would like to modify colors, smt. like to assign blue to some of them and the rest in orange. I post here the code and the link in jsfiddle below. Here is the code:
html:
<script src="https://code.highcharts.com/highcharts.js"></script
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing ...
</p>
</figure>
js:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2017'
},
subtitle: {
text: 'Source: Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['Shanghai', 24.2],
['Beijing', 20.8],
['Karachi', 14.9],
['Shenzhen', 13.7],
['Guangzhou', 13.1],
['Istanbul', 19.7],
['Mumbai', 12.4],
['Moscow', 14.2],
['São Paulo', 12.0],
['Delhi', 18.7],
['Kinshasa', 15.5]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
https://jsfiddle.net/dcmpg1z2/1/
I would like to see "Delhi" and "Kinshasa" in orange color. And the rest in different color. How can I do it?
if you want each category to take different color, you should set colorByPoint to true
and explicitly specify the colors for the ones you want to set by passing an object with the name, y and the color property.
here is the fiddle
I am trying to create a chart that looks/functions like this with ZingChart.
I have tweaked a bar chart every way I can think of but I'm still not coming close.
Is this chart possible with ZingChart?
The following chart is mimicked from the cutout you have attached. If you have any questions about what I did, I can surely go into detail.
Note: For best viewing results look at the chart in the full page view.
var myConfig = {
type:'mixed',
title: {
text: 'Rank by MPH',
},
scaleX: {
offset: 0, // force line to start at scale
offsetEnd: 10, // force last bar away from end of the scale
maxItems: 2, // force display of first and last labels
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14,
rules: [ // adjust last label
{
rule: '%i == 16',
text: '129',
}
]
},
lineWidth:2,
lineColor: '#000',
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 50,
format: '%v%',
markers: [
{ // diagonal line
type: 'line',
range: [0,100],
lineWidth: 3,
lineColor: '#000',
}
],
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14
},
guide: {
visible: false,
},
lineWidth:2,
lineColor: '#000',
},
labels: [
{ // hook label to line marker to display rank
hook: 'node:plot=1,index=1',
backgroundColor: '#000',
fontColor: '#fff',
text: 'Rank 11 / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
offsetY: -50,
},
{ // hook label to scale to display mph
hook: 'scale:index=11',
text: '100 mph',
fontSize: 15,
offsetY: 15,
},
],
series: [
{
type: 'bar',
barWidth:20,
barSpacing:1,
borderRadius:'10 10 0 0',
backgroundColor: '#c0c0c0',
tooltip: {
backgroundColor: '#000',
text: 'Rank %i / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
placement: 'node:top',
offsetY: -20,
},
rules: [
{ // make one bar purple
rule: '%i == 11',
backgroundColor: 'purple',
}
],
values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
},
{
type: 'line',
lineColor: 'purple',
lineStyle: 'dotted',
valueBox: {
text: '%v%',
placement: 'left',
offsetX: -18,
fontSize: 12,
rules: [
{ // hide the valuebox at the node on the line
rule: '%i == 1',
visible: false,
}
],
},
marker: {
borderColor: 'purple',
borderWidth: 2,
backgroundColor: '#fff',
size: 9,
rules: [
{ // hide first marker of the line
rule: '%i == 0',
visible:false,
}
],
},
values: [[0,69], [11,69]], // array of arrays to better plot the line
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
I recently ran into a strange issue with Google Charts and loading Google web fonts asynchronously. I was using loader.js and loading the most current version of the charts via google.charts.load('current', { 'packages': ['corechart'] });. Specifically, I was trying to draw two line charts on the same page and at the same time and set their attributes as below:
var options = {
...,
...,
titleTextStyle: {
...,
fontName: 'Lato'
}
}
I then set some additional attributes and defined the data and proceeded to draw the charts like normal. The first chart would be drawn but the second one would never materialize. Nothing was working so I backtracked through the code deleting chunks until I found that deleting fontName: 'Lato' is what resolved the issue. I was asynchronously loading my web fonts with this script:
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Lato:300, 400, 900']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
Loading my fonts while using this script, I was able to draw one chart, but when I attempted to draw two charts, I was never able to complete it. Every time, the first chart would be populated and the second chart never loaded. I had defined Lato as my primary font, but I did have backups defined as well. This didn't seem to help. My final solution was to load the web font the standard way with:
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,900" rel="stylesheet">
This resolved the issue but I don't like the idea of not being able to load the font asynchronously. Has anyone run into this awkward issue before or am I just missing something really obvious?
*****EDIT*****
Full chart code attached:
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var fontSizeGraph = window.getComputedStyle(document.getElementById('graph_font_size_source'), null).getPropertyValue('font-size');
fontSizeGraph = parseFloat(fontSizeGraph);
var interactivityPermissive = true;
if ($(window).width() < 768) {
interactivityPermissive = false;
} else {
interactivityPermissive = true;
};
var data = google.visualization.arrayToDataTable([
['Accepted Variance', 'High/Low', 'HiHi/LoLo'],
['0', 0, 0],
['1', 38, 45],
['2', 60, 68],
['3', 67, 75],
['4', 76, 88],
['5', 80, 93],
['6', 90, 102],
['7', 98, 108],
['8', 100, 111],
['9', 105, 117],
['10', 111, 123],
['11', 114, 126],
['12', 118, 130],
['13', 120, 134],
['14', 124, 140],
['15', 127, 142],
['16', 130, 145],
['16', 131, 146],
['18', 134, 148],
['19', 137, 153],
['20', 138, 155]
]);
var options = {
enableInteractivity: interactivityPermissive,
title: 'Delay Tags Preserved',
titlePosition: 'out',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: fontSizeGraph,
bold: true
},
chartArea: {
//top: '7%',
width: '90%',
height: '70%'
},
//chartArea: {'top': 0, 'left': 0},
colors: ['#3D414D', '#4EDEC2'],
curveType: 'function',
fontName: "Lato",
legend: {
position: 'bottom',
textStyle: {
color: '#3D414D',
fontName: "Lato"
}
},
vAxis: {
title: 'Alarm Count Reduction',
viewWindow: {
max: 180,
min: -5,
format: '#',
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
showTextEvery: 20,
textPosition: 'in',
gridlines: {
color: '#EFECE7',
count: 5
}
},
hAxis: {
title: 'Accepted Variance (%)',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato"
},
viewWindow: {
max: 24,
min: 0,
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
format: '#',
showTextEvery: 2,
viewWindowMode: 'maximized'
},
lineWidth: 2,
tooltip: {
textStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: (fontSizeGraph * 0.5)
},
//isHtml: true,
ignoreBounds: true
},
animation: {
duration: 1000,
startup: true,
easing: 'out'
}
};
var chart1 = new google.visualization.LineChart(document.getElementById('results_graph_1'));
chart1.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Accepted Variance', 'High/Low', 'HiHi/LoLo'],
['0', 0, 0],
['1', 81, 88],
['2', 135, 142],
['3', 180, 189],
['4', 223, 237],
['5', 255, 270],
['6', 303, 317],
['7', 343, 354],
['8', 362, 373],
['9', 380, 392],
['10', 406, 419],
['11', 420, 432],
['12', 443, 456],
['13', 459, 473],
['14', 476, 493],
['15', 493, 510],
['16', 513, 530],
['16', 520, 537],
['18', 533, 548],
['19', 546, 563],
['20', 555, 572]
]);
var options = {
enableInteractivity: interactivityPermissive,
title: 'Delay Tags Modified',
titlePosition: 'out',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: fontSizeGraph,
bold: true
},
chartArea: {
//top: '7%',
width: '90%',
height: '70%'
},
//chartArea: {'top': 0, 'left': 0},
colors: ['#3D414D', '#4EDEC2'],
curveType: 'function',
fontName: "Lato",
legend: {
position: 'bottom',
textStyle: {
color: '#3D414D',
fontName: "Lato"
}
},
vAxis: {
title: 'Alarm Count Reduction',
viewWindow: {
max: 600,
min: -5,
format: '#',
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
showTextEvery: 20,
textPosition: 'in',
gridlines: {
color: '#EFECE7',
count: 5
}
},
hAxis: {
title: 'Accepted Variance (%)',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato"
},
viewWindow: {
max: 24,
min: 0,
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
format: '#',
showTextEvery: 2,
viewWindowMode: 'maximized'
},
lineWidth: 2,
tooltip: {
textStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: (fontSizeGraph * 0.5)
},
//isHtml: true,
ignoreBounds: true
},
animation: {
duration: 1000,
startup: true,
easing: 'out'
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('results_graph_2'));
chart2.draw(data2, options);
}
I ran into the same issue, having 4 charts on one page, together with async webfont loader. Some charts randomly did not display.
It seems that, if there is a font specified on chart options, on draw, code checks if there is window.WebFont object, if yes, use it to load the font(s). Even if this font(s) is already loaded by webfont loader. Each chart draw call, keeps requesting the same fonts, and they keep getting appended as <link>s in <head>. This seems buggy behavior.
The way i hack fixed it, is removing webfont object before calling first chart draw.
google.charts.load('current', { 'packages': ['corechart'], 'callback': {
window.WebFont = null;
var chart1 = someChart();
chart1.draw();
}});
I have been messing with this for a while now and have no clue why nothing will take when I try to format this data set for millions. Any insight please let me know, might just be that I am not seeing a really simple part. I went through the Highcharts docs and nothing I tried with formatter or anything else worked. So i stripped out my edits and added the code below as it was before I changed it.
Here is the fiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Industry $',
style: {
fontWeight: 'bold'
}
},
subtitle: {
text: 'By Year',
style: {
fontWeight: 'bold'
}
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Open Sans, sans-serif',
fontWeight: 'bold'
}
}
},
yAxis: {
min: 0,
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
},
rotation: 0,
style: {
fontWeight: 'bold'
}
},
title: {
text: 'Total $',
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Total $: <b>{point.y}</b>',
},
series: [{
name: 'Population',
data: [
['2005', 25,000],
['2006', 50,000],
['2007', 75,000],
['2008', 98,000],
['2009', 200,000],
['2010', 600,000],
['2011', 800,000],
['2012', 1,000,000]
],
dataLabels: {
enabled: true,
tooltip: {
valueSuffix: ''
},
rotation: 0,
color: '#FFFFFF',
align: 'center',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Take the commas out
e.g.
data: [
['2005', 25,000],
['2006', 50,000],
['2007', 75,000],
['2008', 98,000],
['2009', 200,000],
['2010', 600,000],
['2011', 800,000],
['2012', 1,000,000]
],
should be:
data: [
['2005', 25000],
['2006', 50000],
['2007', 75000],
['2008', 98000],
['2009', 200000],
['2010', 600000],
['2011', 800000],
['2012', 1000000]
],