Related
Below is my code for a Yii 1 highcharts combination graph which includes a pie chart, bar graph and a line graph. For the line graph I want to display the point after doing a simple division by 10 (ie, if the point value is 60 it should display 6 when cursor placed above that point ). But with my below code it is showing as 60/10 instead of 6. Also, I want this division to be done only for the line graph and not for other two graphs. Please help me solve this issue.
<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=<?php echo json_encode(array_values($subjectList));?>;
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: <?php echo json_encode($passedMarkList);?>//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: <?php echo json_encode($failedMarkList);?>
},
{
type: 'line',
tooltip: {
pointFormat: '<span>{point.name}</span>: <b>{point.y}/10</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
},
{
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: <?php echo json_encode($semesterPassStudents);?>,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: <?php echo json_encode($semesterFailStudents);?>,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: <?php echo json_encode($resultUnPublished);?>,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->
Below is my parsed view page source
<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=["MA101 - CALCULUS","PH100 - ENGG. PHYSICS","BE100 - ENGG. MECHANICS","BE101-05 - INTRODUCTION TO COMPUTING & PROBLEM SOLVING","BE103 - INTRODUCTION TO SUSTAINABLE ENGG.","EC100 - BASICS OF ELECTRONICS ENGG.","PH110 - ENGG. PHYSICS LAB","EC110 - ELECTRONICS ENGG. WORKSHOP","CS110 - COMPUTER SCIENCE WORKSHOP","U100-2 - MICROPROJECT"];
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: [60,59,61,62,61,62,62,53,59,62]//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: [2,3,1,0,1,0,0,9,3,0] },{
type: 'line',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}/10 %</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: 46,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: 16,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: 2,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->
I want to format my values on the y-axis using HighCharts. Suppose I pass 14000, it should print "14K" on the y-axis. How can I do that? I've benn trying using numeral.js, but to no avail.
<!DOCTYPE html>
<html>
<head>
<title>Charts demo </title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://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.src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script >
$(function () {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom : 50,
marginTop : 150,
height : 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y : 40,
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.5'
},
formatter: function() {
return "$"+ this.value ;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter: function() {
return "$"+ this.total ;
}
}
},
legend:{
enabled:false,
width: 600,
floating: false,
x:50,
align: 'left',
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular',
opacity : '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
credits : {
enabled : false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'FTE-OpEx ',
data: [5000, 30000, 40000, 700000],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [20000, 20000, 30000, 20000],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [30000, 40000, 4000, 2000],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}, {
name: 'HW/SW',
data: [3000, 4000, 4000, 20000],
pointWidth: 30
}, {
name: 'Other',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}]
});
});
</script>
</head>
<body id="body">
<div id="container" style="height: 100%; width: 100%; position: center; margin-left: 5%; "></div>
</body>
</html>
}
It's problem with your formatter which returns default value, see API. If you want to keep numeric symbols, call defaultLabelFormatter.
Demo: http://jsfiddle.net/BlackLabel/uL2jx0t9/1/
yAxis: {
labels: {
formatter: function() {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
}
Hi I am facing problem of making navigator on Highstock charts to work as they freeze when I use jQuery ui slider tabs with it. I am not able to debug it as I can't find any error. Any help on debugging or error that might be causing it would be greatly appreciated.My code looks like this:
"<link rel="stylesheet" href="/sites/all/libraries/InterestHighcharts/jquery_slider/styles/jquery.sliderTabs.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js'></script>
<?php
print '<div id="mySliderTabs">
<ul>';
for ($i=1;$i<=5;$i++)
{ $j=$i-1;
$tab_title=$tab_titles_arr[$j];
$tab_title_len=strlen($tab_title);
if($tab_title_len > 7)
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.substr($tab_title,0,6).'</li>';
}
else
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.$tab_title.'</li>';
}
}
print '</ul>';
for($i=1;$i<=5;$i++)
{
print '<div id="container'.$i.'" style="height:375px !important; width:540px !important; margin-left:-10px !important;">Problem reading the charts</div>';
}
print '</div>';
?>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
(function($) {
for (i=1;i<=tabs_count;i++)
{ var j=i-1;
var flag_test=flagAr[i];
$('#container'+i).highcharts('StockChart', {
chart: {
borderColor: '#000000',
height:390,
width:550,
marginLeft:-3,
marginTop:13,
events: {
load: function() {
this.renderer.image('http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/Interest_logo.gif', 170, 75, 200, 100).add(); // add image(url, x, y, w, h)
},
}
},
credits: {
enabled: true,
itemStyle: {
cursor: 'pointer',
color: '#000000',
fontSize: '11px',
fontWeight:'bold'
},
position: {
align: 'right',
x:-60,
verticalAlign: 'bottom',
y:-100
},
text: 'Source:'+source_arr[j],
href: source_hyperlink_arr[j]
},
rangeSelector : {
selected : 1,
inputEnabled : false,
buttonTheme: {
display: 'none',
},
labelStyle: {
color: 'transparent',
},
buttons: [{
type: 'day',
count: 12,
text: '1d'
}, {
type: 'week',
count: 3,
text: '3w'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : chart_title_arr[j],
x:-220,
style: {
fontFamily:'Arial,Helvetica,sans-serif',
fontWeight:'bold'
}
},
subtitle : {
text : chart_subtitles_arr[j],
floating:true,
x:-120,
y:15,
style: {
fontFamily:'Arial,Helvetica,sans-serif'
}
},
tooltip : {
valueDecimals : 2,
headerFormat:'<span style="font-size: 10px; margin-left:20px;">{point.key}</span><br/>',
pointFormat: '<span style="color:#FF0000; font-weight:bold">{point.y}</span><br/>'
},
xAxis: {
type: 'datetime',
lineWidth: 20,
gridLineColor:'#FAFFFF',
gridLineDashStyle:'Dot',
dateTimeLabelFormats: {
day: '%e-%b',
week: '%e-%b',
month: '%b-%y',
year: '%Y'
},
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
max:xpad[i],
labels: {
style: {
color: 'black',
fontSize: '10px',
fontWeight:'bold',
fontFamily:'Arial,Helvetica,sans-serif',
},
y:3, //to pull x-axis label down
},
//showLastLabel:false,
},
yAxis: {
opposite: true,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value,setdecimalpoints(this.value));
},
style: {
color: 'black',
fontSize: '10px',
fontWeight:'normal'
},
y:-12,
}
},
series : [{
data : finalAr[i],
id: 'dataseries',
lineWidth:3,
zIndex:9999,
shadow:{
width:3,
color:'#000000',
opacity:.7
},
lineColor:'#FF0000',
type : 'area',
dataGrouping:{
dateTimeLabelFormats: {
day: ['%b-%e,%Y'],
week: ['%e-%b'],
month:['%b-%y'],
year: ['%Y']
}
},
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[8]],
[1, 'rgba(255,255,255,0)']
]
}
},
{
type: 'flags',
useHTML: true,
name: 'Flags on series',
data: JSON.parse("["+flag_test+"]"),
onSeries: 'dataseries',
shape: "url(http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/balloon.jpg)",
width : 5,
y: -33
}],
navigator : {
adaptToUpdatedData: true,
enabled:true,
xAxis: {
labels:
{
enabled: false,
}
},
height: 50,
margin:-2,
series: {
lineColor:'#FF0000',
type : 'area',
fillColor : '#FFFFFF'
}
},
scrollbar: {
liveRedraw: false,
},
});
}
})(jQuery);
</script>
<script src="/sites/all/libraries/InterestHighcharts/jquery_slider/jquery.sliderTabs.min.js"></script>
<script type="text/javascript">
jQuery("#mySliderTabs").sliderTabs();
//jQuery("div#mySliderTabs").sliderTabs();
</script>
</div>"
New to highcharts, but a simple question:
I need to mix several (say 6 or 8) small Highcharts gauges and charts on a single browser window. Is the only reliable way of doing this to create a separate div for each one and to target a separate Highcharts instance at each div?
And as a supplementary: Even if there is an alternative approach, is this multi-div approach as good as any, or are there pros and cons?
Here is how I do multiple Highcharts on the same page.
http://jsfiddle.net/no1uknow/Jb2cb/2/
Keep in mind that you'll want to use jQuery 1.9.1 and Highcharts JS 3.0.x+, if you want to support most all browsers including IE8. This jsfiddle demo will work cross browser.
There are many examples using "var chart" singular for every chart, but I like making a var container_chartname for each div container. This technique gives me a lot more control to be interactive with each chart on the fly. Like resize, update data, etc.
If you plan on using forms to build charts dynamically then you can also use "just" the javascript code in the above jsfiddle example as the json callback. This will load all the divs each time you hit submit on a form dynamically.
Stackoverflow requires me to post code here, but see jsfiddle for the full piece of code...
And of course this is just my technique, there are many others...
var container_chartCorrectiveAction = new Highcharts.Chart({
chart: {
renderTo: 'container_chartCorrectiveAction',
type: 'bar',
height: 195
},
title: {
text: 'Corrective Action'
},
subtitle: {
text: 'Sub-ATA () / ATA (20)'
},
xAxis: {
categories: ['No Defects Found-Fastener-Loose / Displaced'],
title: {
text: 'Action'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Heavy',
total: '0',
data: [null]
},{
name: 'Intermediate',
total: '0',
data: [null]
},{
name: 'Line',
total: '0',
data: [null]
},{
name: 'Lite',
total: '1',
data: [1]
}]
});
var container_chartAtaFleetAvg = new Highcharts.Chart({
chart: {
renderTo: 'container_chartAtaFleetAvg',
type: 'bar',
height: 185
},
title: {
text: 'Fleet Average'
},
subtitle: {
text: 'ATA (20)'
},
xAxis: {
categories: ['Fleet Average'],
title: {
text: ''
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Average',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Average';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Intermediate',
total: '0.35',
data: [0.35]
},{
name: 'Lite',
total: '0.3',
data: [0.30]
},{
name: 'Heavy',
total: '0.1',
data: [0.10]
}]
});
You can also use many series in one div. http://jsfiddle.net/sbochan/wzprF/
It seems that the only way to do this is to have a container by chart.
In my own opinion, I don't think a multi-div approach is a bad idea. Just be careful about the id you will give to the div.
But you can create a clean code, on the javascript side. When you create many charts (6 or 8 is a lot...), you have to avoid code duplication... (At least to limit duplication)
There is a good way to do this with jQuery.extend() and Highcharts.setOptions : Manage multiple highchart charts in a single webpage
Make sure your div containers are formatted as this
<div ... ></div>
and not
<div ... />
as it may not render properly.
I'm trying to render a partial in my app, but for some reason it will not render. I think it has to do with my asset pipeline and the fact that I am not correctly implementing the JavaScript I want to use in my partial. A test partial with a simple sentence works just fine. Can someone direct me in the proper use of JavaScript in my app?
Here is a jsFiddle of what I am trying to show: http://jsfiddle.net/yZQg4/
Problematic partial:
<%= javascript_include_tag "highcharts", "exporting", "jquery-1.4.2.min", "rails" %>
<script type="text/javascript" charset="utf-8">
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'panel_contents',
type: 'column'
},
xAxis: {
categories: ['Automotive', 'Agency', 'Contractor', 'Country Club', 'Other']
},
yAxis: {
min: 0,
title: {
text: 'Business Summary'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: 100,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Mobile',
data: [5, 3, 4, 27, 2]},
{
name: 'Foursquare',
data: [2, 2, 3, 2, 1]},
{
name: 'Facebook',
data: [3, 4, 4, 2, 5]},
{
name: 'Yelp',
data: [3, 4, 4, 2, 5]},
{
name: 'Google',
data: [3, 4, 4, 2, 5]}]
});
});
});
</script>
Working test partial:
<h1> hello world </h1>
Thanks!
Add before the javascript code this:
<div id="panel_contents"></div>
P.S. Besides it's better move javascript inclusion out of partial or using a content_for
I just recreated the file in TextEdit, and it worked. For some reason TextMate was secretly adding this to the file: .