I am working on a dashboard using the highcharts library, however when I click on the chart the screen moves up. I am using the example code which can be found here:
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
I've implemented the code in some sort or dashboard where I am working on which can be found here: dashboard.
If you go to the dashboard, scroll a bit down then click on a chart you can see what I mean, the screen shoots up, which is very annoying, especially on mobile devices. The strange thing is, that the examples on the Highcharts website, do not have this behaviour.
Any help is appreciated.
In your case ordinary link click behavior works. The browser tries to find href, and just adds # into the url and goes up. Try add this to prevent default. .on('click', function() { event.preventDefault(); });
Related
I am facing a problem to show data from database to pie chart. Anyone who have idea about this problem then please help me. I am using laravel5 and js(http://www.highcharts.com/demo/pie-basic)
I have a table named products which contain different items that belongs to different category and they are in categories column. I want to show these category and number of product in pie chart ie product =electronic & number=3,product=clothes & number=2 and so on
My controller function
public function category()
{
$data=[];
// this query select products from "categories" column with count
$recordsByCategories=\DB::table('products')
->select('categories','category_id', \DB::raw('count(*) as totalProducts'))
->groupBy('categories')
->get();
//I have made array to show data in pie chart accoding to js documentation given in above link
$data = array_merge_recursive($data, [
['name' => "{{$recordsByCategories->categories}}",
'y' => $recordsByCategories[0]->totalProducts,
],
]);
return view('dashboard.show',compact('data'));
Actual js is like this
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
And my view is like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 80%;min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Cases',
data: {!!json_encode($data)!!}, //I made changes here
}]
});
});
</script>
{{$data[0]}}
try as shown above.
This will work and execute properly if I use on SP 2013 on-prem site but not on SharePoint Online site. It will sometimes show up in edit mode online but disappears after I save it... I've used content and script editor. Any ideas??
<script language = "javascript" src="http://code.highcharts.com/highcharts.js">
<script language = "javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
</script>
Disable the feature Minimun Download Strategy
I'm trying to get Highcharts to work in my project. When running the code in Notepad++ it works, but when inserting the same code into my .NET MVC4 project it wont render anything.
Heres the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
</script>
The following error message is returned from chrome:
While Firefox says:
TypeError: $(...).highcharts is not a function
Anyone got any idea why it won't render?
I found the solution here: Uncaught TypeError: undefined is not a function - Highcharts - MVC
I changed the following code:
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
// rest of code omitted
To the following:
$(function () {
Chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
//rest of code omitted
And now it works fine :)
I drew a pie chart with highcharts, but in 3D mode my labels are separated from the chart.
You can see this jsfiddle.
If you change x and y values from dataLabels and run the example, you get the same result. The labels aren´t moved. Why? Do I need to define any parameter? With normal mode It works, but with 3D mode....BREAK!!
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title : {
text : 'Test'
},
tooltip : {
pointFormat: 'Value: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
depth: 35,
cursor: 'pointer',
dataLabels: {
enabled: true,
align: 'left',
format: '{point.name}',
connectorWidth: 5,
x:100,
y:300
}
}
},
series: [{
name: 'Test - Levels',
data: [
['Some Text Level 1', 74.25],
['Some Text Level 2', 17.82],
['Some Text Level 3', 7.92]
]
}]
});
});
UPDATED:
Bug found in HighCharts v4.0.1
BUG FIXED in HIGHCHARTS v4.0.3
Unforuantely it is known bug, reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/3082
Please stay on track with the github thread, until publish a fix.
You cannot fix the label position.
Try it:
pie: {
allowPointSelect: true,
depth: 35,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}',
connectorWidth: 5
}
}
http://jsfiddle.net/8cK3M/8/
I want to remove the white space circled in red above. I am using the code below in jsFiddle:
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,borderRadius: 0,
borderWidth:0,
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: false,
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
size: '115%',
innerSize: '110%',
data: [
['Firefox', 45.0]
]
},{type: 'pie',
name: 'Browser share',
size: '100%',
innerSize: '98%',
data: [
['Firefox', 45.0]
]}
]});
});
Fiddle: http://jsfiddle.net/jF22s/
use borderWidth :0 in plot options.
pie: {
allowPointSelect: true,
cursor: 'pointer',
borderWidth: 0, // This removes the border
Updated fiddle : http://jsfiddle.net/jF22s/5/
If that is not acceptable ( as it still has a very minute space ), add a border of same color to the chart, that would remove all space:
borderWidth: 1,
borderColor:'#2F7ED8',
fiddle : http://jsfiddle.net/jF22s/15/
borderColor: null will fix the issue
plotOptions: {
pie: {
borderColor: null,
}
}
ref: http://jsfiddle.net/highcharts/NK5db/17/
Unfortunately it is known bug, reported here