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
Related
I am trying to render a pie chart on the server using PHP and PhantomJS but I am having no luck so far. I followed a lot of guides and threads here and this is what I have tried so far but I am getting a 0 error code which I have no idea what it means.
pieChart.php
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
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: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
</script>
Test.js
var page = require('webpage').create();
var url = 'pieChart.php';
page.open(url, function (status) {
page.render('pieChart.png');
phantom.exit();
});
Test.php
$error = exec('/usr/bin/phantomjs test.js', $op, $code);
echo $code; // prints 0 on screen
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.
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 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(); });
My code is 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: [
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
{
name: 'FireFox',
y: 15.8
}
]
}]
});
});
In ToolTip
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
I want to write
tooltip: {
pointFormat: '{series.data.name}: <b>{point.percentage:.1f}%</b>'
}
its Not Working please some one help me
I am following this link
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/
try this point.name should help
demo
tooltip: {
pointFormat: '<b>{point.name}</b>: <b>{point.percentage:.1f}%</b>'
},
I adivce you to use formatter, which allows to customise content. Custom parameter will be kept in point.options.name
http://api.highcharts.com/highcharts#tooltip.formatter