Currently i am working on a requirement, which user can click on the plotted area of a semi circle chart and increase the size of the hovered portion of the plotted area in semi cycle chart....I have gone through the Highchart API and come up with an solution, but my code snitpet is not working..can any one help me with this please.
this.chart = new Highcharts.Chart('container',
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
height: 400,
plotShadow: false
},
title: {
text: '98',
style: {
"fontSize": "48px"
},
align: 'center',
verticalAlign: 'middle',
y: 50
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Test: <b>{point.percentage:.1f}%</b>',
enabled:false
},
colors: ['#FF0000', '#FFA500', '#FFFF00'],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -100,
style: {
fontWeight: 'bold',
color: 'white'
}
},
point: {
events: {
click: function (e) {
alert("Clicked");
}
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series:[
{
data: [
{y: 1, name:"", id:"0"},
{ y: 7, name:"", id:"1"},
{ y: 2, name:"", id:"2"}
],
innerSize: '65%',
type: 'pie',
}
]
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Set allowPointSelect property to true:
plotOptions: {
pie: {
allowPointSelect: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/h3xskctp/
I am trying to create a funnel visualization that would visualization the number of guests and also percent of prior visit for 3 categories of consumers: 1 Visit, 2 Visits, 3+ Visits.
Right now I have 2 labels for each category (sticking out to the right hand side) but I want 1 label for each category sticking out on the right hand side stating both the # of Guests and Percent of Prior Visit. I also want a box-shaped label for each block of the funnel so that when you hover over it it looks like:
[CATEGORY]
Percent of Prior Visit: [VALUE]
Guests: [VALUE]
Right now, the box-shaped label when I hover over the block just shows Percent of Prior visit. So I want the box to be fixed and the label to the right hand side to be just 1 per block. I hope this makes sense. How would I do something like this? Thanks in advance.
My code is at: https://jsfiddle.net/ug4rc6pn/150/
Using the style you tried with earlier makes this easier. That is, setting both value and percentage in the same series, like this:
series: [{
name: 'Guests',
data: [{
y: 352000,
yPercentage: 100,
name: '1 Visit',
color: "#ff0000",
},
...
]
}]
You can then format your datalabel like this:
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
...
}
And your tooltip like this:
tooltip: {
headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f} '
}
Which gives you this:
Highcharts.chart('container', {
chart: {
type: 'funnel',
//Only for Pie Charts
options3d: {
enabled: false, // change to true to activate 3D
alpha: 40,
beta: 40,
depth: 100,
},
},
title: {
text: 'Guest Return Funnel'
},
plotOptions: {
funnel: {
depth: 100
},
series: {
events: {
legendItemClick: function() {
$.each(this.chart.series, function(i, serie) {
if (serie.visible)
serie.hide();
else
serie.show();
});
return false;
}
},
shadow: true,
allowPointSelect: true,
borderWidth: 18,
animation: {
duration: 400
},
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true,
crop: false
},
center: ['50%', '50%'],
neckWidth: '40%',
neckHeight: '0%',
width: '65%',
height: '100%',
tooltip: {
headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f} '
}
}
},
legend: {
enabled: true
},
series: [{
name: 'Guests',
data: [{
y: 352000,
yPercentage: 100,
name: '1 Visit',
color: "#ff0000",
},
{
y: 88000,
yPercentage: 25,
name: '2 Visits',
color: "#FFA500",
},
{
y: 42000,
yPercentage: 48,
name: '3+ Visits',
color: "#32CD32"
}
]
}
]
});
/*
series: [{
name: 'Guests',
name2: 'Percent of Prior Visit',
data: [{
y:352000,
name: '1 Visit',
color: "#ff0000",
y2: 100,
name2: 'Percent of Prior Visit'
},
{
y: 88000,
name: '2 Visits',
color: "#FFA500",
y2: 25,
name2: 'Percent of Prior Visit',
},
{
y: 42000,
name: '3+ Visits',
color:"#32CD32",
y2: 48,
name2: 'Percent of Prior Visit'
}
]
}]
});
*/
<script src="https://code.highcharts.com/highcharts.js">
</script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
JSFiddle working example: https://jsfiddle.net/ewolden/org6quk9/
I am after making high charts graph and tooltip when it is 100 + and 1000 + Have a symbol after it on the toolbar but also have it so that shared: true. Also on the graph when it is say 2394 I am after it to round it down to 2.39 so the graph is not so large and then on the tool bar it would show 2.39K.
I have tried quite a bit and I am not able to figure this out look all over stack overflow and not found anything.
http://jsfiddle.net/sb7n32zn/22/
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area',
backgroundColor: 'transparent',
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
legend: {
itemStyle: {
color: '#c4c4c4',
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
title: {
style: {
display: 'none'
}
},
plotOptions: {
series: {
lineColor: '#808080'
}
},
pane: {
size: '80%',
},
xAxis: {
categories: ['Win Rate', 'Kills', 'Deaths', 'Assits',
'Minions Killed', 'Gold Earned', 'Damage Dealt'],
tickmarkPlacement: 'on',
lineWidth: 0,
gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
style: {
color: '#c4c4c4',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
style: {
color: '#c4c4c4',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
},
series: [{
name: 'Aatrox',
color: 'rgba(184, 70, 70, 0.7)',
data: [3843, 7, 7, 6, 15.7, 11.78, 22.05],
pointPlacement: 'on'
}, {
name: 'Gay Something',
color: 'rgba(85, 184, 70, 0.5)',
data: [6245, 9, 6, 5, 18.6, 13.54, 23.46],
pointPlacement: 'on'
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 450px; height: 400px; margin: 0 auto"></div>
This is what i currently have:
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
}
You can use the formatter option in tooltip for more complex formatting. See:
tooltip: {
shared: true,
formatter: function () {
console.log(this);
var txt = this.x + ": <br />";
for(var i=0;i<this.points.length;i++){
var value = this.points[i].y;
if(value>=1000){
value = (value/1000).toFixed(2) + 'k';
}
txt = txt + '<span style="color:' + this.points[i].color + '">'
+ this.points[i].series.name + ': <b>' + value + '</b><br/>';
}
return txt;
}
},
In this function if your series value is more or equal than 1000, then it divides by 1000 and fixes 2 decimal cases, furthermore, it adds the 'k' label in the end.
However, the graph is still large because the value is a lot bigger than the others. I think you have to do a preprocessing of the data for that.
Hope it helps! :D
i was searching for an explaination here in this forum for my problem but couldnt find anything that helps me.
My problem is, that I want to get two solid gauges and one spline shown on my site but i can only see one chart at a time.
Here's my code where i guess the error is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Data</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/highcharts-more.js"></script>
<script src="../js/solid-gauge.js"></script>
<link rel="stylesheet" href="../css/style.css">
<link href='http://fonts.googleapis.com/css?family=Abel|BenchNine|Poiret+One|Ropa+Sans|Ubuntu|Marvel' rel='stylesheet' type='text/css'>
<script>
function target_popup(form){
window.open('','formpopup','width=950,height=400,resizeable,scrollbars');
form.target = 'formpopup';
}
</script>
</head>
<body>
<!-- JS -->
<script>
$(document).ready(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 first gauge
$('#yearlykm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 13392,
title: {
text: 'Distance for 2015'
}
},
credits: {
enabled: true
},
series: [{
name: 'Distance for 2015',
data: [<?php include("../data/db_car.php");
$sql = "SELECT sum(km) as SUMKM FROM tbl_data";
$result = mysql_query($sql);
while ($line = mysql_fetch_array($result))
{
echo $line[SUMKM];
}
?>
],
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">total km</span></div>'
},
tooltip: {
valueSuffix: ' total km '
}
}]
}));
// The second gauge
$('#totalkm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 80000,
title: {
text: 'Total Distance'
}
},
series: [{
name: 'Total Distance',
data: [<?php include("../data/db_car.php");
$sql2 = "SELECT sum(liters) as SUMLITERS FROM tbl_data";
$result2= mysql_query($sql2);
while ($line2 = mysql_fetch_array($result2))
{
echo $line2[SUMLITERS];
}
?>
],
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">total km</span></div>'
},
tooltip: {
valueSuffix: ' total liters'
}
}]
}));
});
</script>
<!-- JS -->
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'car',
type: 'spline',
marginRight: 0,
marginBottom: 25,
backgroundColor: '#FFFFFF'
},
title: {
text: '',
x: -00 //center
},
xAxis: {
categories: []
},
yAxis: {
title: {
style: {
color: 'white'
},
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#ffff00'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' €';
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'center',
x: 00,
y: -19,
borderWidth: 0,
style: {
fontSize: '10px',
color: '#000000',
}
},
plotOptions: {
spline: {
fillColor: {
linearGradient : {
x1: 1,
y1: 0.1,
x2: 0,
y2: 0.2
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: []
}
$.getJSON("../data/data_car.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<!-- HTML STARTS HERE -->
<div id="header-wrapper">All Car Data</div>
<div id="menu">
Home |
PHP MyAdmin |
All FX Data |
All Travel Data |
Travel Dev |
Car
</div>
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="page-content">
<div id="content">
<br>CHARTS<p>
<div style="width: 600px; height: 200px; margin: 0 auto">
<div id="yearlykm" style="width: 300px; height: 200px;"></div>
<div id="totalkm" style="width: 300px; height: 200px;"></div>
</div><p>
<div id="car" style="width:630px; height: 200px;"></div><p>
</div>
<div id="sidebar">
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Any help or pointer is appreciated!
Thanks in advance!
I am trying to build a highchart on my page. I do get the chart frame and title but now lines or legends. When I do:
document.write(output)
[ {"name":"dc1_sx02","data":[[1406269800,0.092],[1406271600,0.092],[1406273400,0.091],[1406275200,0.093],[1406277000,0.091],[1406278800,0.09],[1406280600,0.093],[1406282400,0.094],[1406284200,0.092],[1406286000,0.09],[1406287800,0.094]]},{"name":"dc1_sx03","data":[[1406340000,0.01],[1406341800,0.009],[1406343600,0.009],[1406345400,0.009],[1406347200,0.009],[1406349000,0.009],[1406350800,0.009],[1406352600,0.009],[1406356200,0.01],[1406358000,0.009],[1406359800,0.009],[1406361600,0.009],[1406365200,0.009],[1406367000,0.009],[1406368800,0.009],[1406370600,0.009],[1406374200,0.009],[1406376000,0.009],[1406377800,0.01],[1406379600,0.009],[1406383200,0.009],[1406385000,0.009],[1406386800,0.009],[1406388600,0.009],[1406392200,0.009],[1406394000,0.009],[1406475000,0.009],[1406476800,0.009],[1406478600,0.009],[1406480400,0.009],[1406482200,0.009],[1406484000,0.009],[1406485800,0.009],[1406487600,0.009],[1406489400,0.009],[1406491200,0.011],[1406493000,0.01],[1406494800,0.009],[1406496600,0.009],[1406498400,0.009],[1406500200,0.01],[1406502000,0.009],[1406503800,0.009],[1406505600,0.009],[1406507400,0.009],[1406509200,0.009],[1406511000,0.009],[1406512800,0.009],[1406514600,0.009],[1406516400,0.009],[1406518200,0.009],[1406520000,0.009],[1406521800,0.009],[1406523600,0.009],[1406525400,0.009],[1406527200,0.009],[1406529000,0.01],[1406530800,0.009],[1406532600,0.009],[1406534400,0.009],[1406536200,0.009],[1406538000,0.009],[1406539800,0.009],[1406541600,0.009],[1406543400,0.009],[1406547000,0.009],[1406548800,0.009],[1406550600,0.009],[1406552400,0.009],[1406554200,0.009],[1406556000,0.009],[1406557800,0.009],[1406559600,0.009],[1406561400,0.009],[1406563200,0.009],[1406565000,0.009],[1406566800,0.009],[1406568600,0.009],[1406570400,0.009],[1406572200,0.009],[1406574000,0.009],[1406575800,0.009],[1406577600,0.009],[1406579400,0.009],[1406581200,0.009],[1406583000,0.009],[1406584800,0.009],[1406586600,0.009],[1406588400,0.009],[1406590200,0.009],[1406592000,0.009],[1406593800,0.009],[1406595600,0.009],[1406597400,0.009],[1406599200,0.009],[1406601000,0.009],[1406602800,0.009],[1406604600,0.01],[1406606400,0.009],[1406608200,0.009],[1406610000,0.009],[1406611800,0.009],[1406613600,0.009],[1406615400,0.01],[1406617200,0.011],[1406619000,0.012],[1406620800,0.012],[1406622600,0.012],[1406624400,0.012],[1406626200,0.012],[1406628000,0.012],[1406629800,0.012],[1406631600,0.012],[1406633400,0.012],[1406635200,0.012],[1406637000,0.011],[1406638800,0.012],[1406640600,0.012],[1406642400,0.012],[1406644200,0.012],[1406646000,0.012],[1406647800,0.013],[1406649600,0.012],[1406651400,0.012],[1406653200,0.012],[1406655000,0.012]]} ]
I do get the nicely formated json output. Any ideas what I might be missing from this script:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<!-- Include order: first jquery, then opencpu.js, and then your code -->
<script src="opencpu/jquery-1.10.2.min.js"></script>
<script src="opencpu/opencpu-0.4.js"></script>
<script src="opencpu/highcharts.js"></script>
<script src="opencpu/export-csv.js"></script>
<script>
//init this script when the page has loaded
$(document).ready(function(){
$("#submitbutton").on("click", function(){
//disable the button to prevent multiple clicks
$("#submitbutton").attr("disabled", "disabled");
var myname = $("#namefield").val();
//perform the request
var req = ocpu.rpc("output", {
myname : myname
}, function(output){
document.write(output);
//alert(output);
$('#output').highcharts({
//$("#output").highcharts('StockChart',{
chart: {
borderColor: '#98AFC7',
borderRadius: 20,
borderWidth: 1,
renderTo: 'output',
type: 'line',
marginRight: 10,
zoomType: 'x',
resetZoomButton: {
position: {
x: -50,
y: -50
}
}
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 5
}
}
},
exporting: {
enabled: true
},
legend: {
enabled: true,
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
shadow: true
},
rangeSelector: {
enabled:true
},
scrollbar: {
enabled: true
},
navigator : {
enabled : true
},
xAxis: {
type:'datetime',
gridLineColor: '#EEEEEE',
gridLineWidth: 1
},
yAxis: { // Primary yAxis
labels: {
style: {
color: 'blue'
}
},
gridLineColor: '#EEEEEE',
gridLineWidth: 1,
title: {
text: '% CPU Utilization',
fontSize: '50px',
style: {
color: 'blue'
}
}
},
credits: {
enabled: false
},
title: {
text: '% CPU UTILIZATION',
style: {
color: '#333000',
fontSize: '14px'
}
},
tooltip: {
positioner: function(){
return{x:20,y:-5};
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}<b>',
valueDecimals: 2
},
series:output
});
});
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
});
//after request complete, re-enable the button
req.always(function(){
$("#submitbutton").removeAttr("disabled")
});
});
});
</script>
<style>
#output{
height: 600px;
width: 1500px;
border: 0px;
padding: 3px;
}
</style>
</head>
<body>
<h1>My First HighStock Chart!!!!</h1>
<b>Your name: </b> <input type="text" id="namefield">
<button id="submitbutton" type="button">Submit to server!</button>
<div id="output"> </div>
<br />
</body>
</html>
I did a
document.write(output)
and copyied the output to the jsfiddle at this address:
http://jsfiddle.net/gsaray101/rmL1573f/
it works there so I am assuming the data is accurate, any ideas what might be happening?
I resolved this problem by using JSON.parse() function in the ui as follows:
var data=output;
data=JSON.parse(data);