I tried enable:false
but i cannot remove highchart's link from my chart (pie).
I got bit confused
This is my Javascript code.
<script language="JavaScript">
$(document).ready(function() {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
credits: false ///<= HERE I TRIED IT LAST
};
var title = {
text: ''
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.y:.1f} Coupon(s)</b>'
};
var plotOptions =
{
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
borderWidth: 0
},
series: {
states: {
hover: {
halo:
{
size: 0
}
}
}
},
};
var series= [{
type: 'pie',
name: 'Source',
data: [
<?php
for($x=0; $x<sizeof($data); $x++)
{
echo $data[$x];
echo ",";
}
?>
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
I tried to put this code at multiple positions. But it is showing no result.
Thanks in advance
var license = {
enabled: false
};
then at bottom:
json.credits = license;
previously asked and answered here
If you are using the free version, you CAN remove the attribution link, but if you are using free code the honour system is there so at least you can leave a "hat tip" to the developers as a thank you for saving you time.
Related
Hi I am using the following scatter chart code
https://www.tutorialspoint.com/highcharts/highcharts_scatter_basic.htm
In this I need no negative values. when I pass only positive values data it is solved.
I need to make my y axis value reversed. That is Y axis should start with zero.
x axis same.
Kindly help me to do it. My code is as below
<html>
<head>
<title>User Interaction </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="ourgraph.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
var edata;
var i;
//a = new Array();
$(document).ready(function() {
var chart = {
type: 'scatter',
zoomType: 'xy'
};
var title = {
text: 'User Interaction Touch points'
};
var subtitle = {
text: 'Source: charmboard database'
};
var xAxis = {
//range = [0,320]
title: {
enabled: true,
text: 'Height (px)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
};
var yAxis = {
//range = [0,180]
title: {
text: 'Width (px)'
}
};
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 0.1
}
var plotOptions = {
scatter: {
marker: {
radius: 0.5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} x-px, {point.y} y-px'
}
}
};
// http call for data
$.ajax({
url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
type: 'GET',
context: document.body,
success: function(data){
//console.log(data[0]);
//console.log(data[1]);
//console.log(data);
// http call for end
//writeing a data to file starts with removed time slot colum, negatvie values , x axis 0-320 ,y axis 0-180 alone
// data.forEach(function(i)
//{
// if (i[0]> 0 && i[0] < 320 && i[1] >0 && i[1] <180)
// {
//
// edata = data.slice(2);
//}
//});
//writeing a data to file ends with removed time slot colum, negatvie values , x axis 0-320 ,y axis 0-180 alone
var series= [{
name: 'Touches',
color: 'rgba(223, 83, 83, .5)',
data: data
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.legend = legend;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
}
});
});
</script>
</body>
</html>
Since the tutorial is using HighCharts it would be good idea to open there docs.
As for answer you need to change this:
var yAxis = {
title: {
text: 'Weight (kg)'
}
};
To this:
var yAxis = {
title: {
text: 'Weight (kg)'
},
min: 0 // Make sure you add this.
};
Hope that helps!
I have a Pie Chart that gets its data from the file. In raw form, this is the data:
[{"name":"Dual","load":"20"},{"name":"Gas","load":"35"},{"name":"Other_Fossil_Fuels","load":"15"},{"name":"Nuclear","load":"12"},{"name":"Hydro","load":"8"},{"name":"Wind","load":"10"},{"name":"Other_Renwables","load":"10"}]
I am trying to make a method that formats this data correctly so that it can be used in the pie chart. However only the Names come through correctly, with all of the percentages set to 0. I have a feeling that it is because the raw data is saved as a String. But using parseInt() on the data before pushing doesn't help and the === check returns num. Here is the code i am trying to implement.
function setPieData(data){
var json = JSON.parse(data);
var fuelTypes = [{name: 'Dual',load:[]},
{name: 'Gas', load:[]},
{name: 'Other_Fossil_Fuels', load:[]},
{name: 'Nuclear', load: []},
{name: 'Hydro', load: []},
{name: 'Wind', load: []},
{name: 'Other_Renwables', load:[]}];
for(i=0; i < json.length; i++){
if(json[i].name == fuelTypes[i].name){
fuelTypes[i].load.push(parseInt(json[i].load));
}
if(fuelTypes[i].load === parseInt(fuelTypes[i].load, 10)){
alert("not num");
}else{
alert("num");
}
}
drawChart(fuelTypes);
}
function drawChart(stuff){
var globalDate = new Date();
var dMth = globalDate.getMonth() + 1;
var dDay = globalDate.getDate();
var dYr = globalDate.getFullYear();
var dStr = dMth + '/' + dDay + '/' + dYr;
title = "Real-time Fuel Mix " + dStr;
var seriesData= stuff;
Highcharts.setOptions({
colors: ['#C00000', '#FF0000', '#7F7F7F', '#FFC000', '#4F81BD', '#00B050', '#92D050']
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: title
},
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'
}
},
showInLegend: true
}
},
series: [{
name: "MI Power",
colorByPoint: true,
data: stuff
}]
create an Array and push your data like following
var dataPie =[];
var abc =your data //your json
$.each(abc,function(i,el)
{
dataPie.push({name :el.name,y: parseInt(el.load)});
});
use dataPie in your drawChart function.
see working fiddle here
I have pie chart representation of user locations as below in figure 1,i have successfully made the representation working but how can i make the rest of users hidden as figure 2 when click any particular sector ?
Figure 1:
Figure 2:
Javascript :
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'users location'
},
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: [
['Africa', 45.0],
['Asia', 26.8],
{
name: 'Australia',
y: 12.8,
sliced: true,
selected: true
},
['Europe', 8.5],
['North America', 6.2],
['Others', 0.7]
]
}]
});
});
Fiddle Link
You can use plotOptions.series.point.events.click function to tell the chart exactly what to do after the click of a slice:
series: {
point: {
events: {
click: function () {
var index = this.x;
$('.highcharts-series-group g path').toggle();
$('.highcharts-series-group g path:nth-child(' + (index+1) + ')').toggle();
$('.highcharts-data-labels path').toggle();
$('.highcharts-data-labels path:nth-child(' + (index+1) + ')').toggle();
$('.highcharts-data-labels g').toggle();
$($('.highcharts-data-labels g').get(index)).toggle();
}
}
}
}
The first two toggles are for the slices themselves. $('.highcharts-series-group g path') refers to all the colored slices in the chart, and I changed back the one user just clicked by adding :nth-child.
The second pair of toggles are for the lines coming out of the slices connecting the datalabels to them. And the third pair is for the datalabels.
Here's the DEMO.
And example in pure Highcharts. As an another answer, use pie.point.events.click handler, to hide/show elements: http://jsfiddle.net/5oLmj00L/8/
point: {
events: {
click: function() {
var _self = this,
undef,
method = _self.clicked ? "show" : "hide";
Highcharts.each(this.series.data, function(p, i) {
if(p !== _self) {
// hide/show slice
if(p.graphic) {
p.graphic[method]();
}
// hide/show label
if(p.dataLabel) {
p.dataLabel[method]();
}
// hide/show connector
if(p.connector) {
p.connector[method]();
}
}
});
// set flag for next click:
_self.clicked = _self.clicked !== undef ? !_self.clicked : true;
}
}
}
I've been doing this script for a volunteering university-site job.
Please ignore all parameters apart from wattages and schools. Those are SQL result sets that have been converted to arrays using json_encode(). Result sets have Strings as values, I believe, so both wattages and schools should be arrays of strings.
What I want to do is input my own data for the pie graph, in this case mySeries, which I build/fill up at the start and put as data later.
function createPieChartGradient(data,title,xlabel,ylabel,type,step,div_id,wattages,schools){
var float_watt = new Array();
for(var index = 0; index < wattages.length; index++)
{
float_watt[index] = parseFloat(wattages[index]).toFixed(2);
}
var mySeries = []; //Hopefully this creates a [String, number] array that can be used as Data.
for (var i = 0; i < float_watt.length; i++) {
mySeries.push([schools[i], float_watt[i]]);
}
var options = {
chart: {
renderTo: 'graph',
zoomType: 'x',
defaultSeriesType: type
},
title: {
text: 'Consumption Percentage of IHU Schools, Last 7 days'
},
tooltip: {
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
xAxis: {
categories: [],
tickPixelInterval: 150,
// maxZoom: 20 * 1000,
title: {
style: {
fontSize: '14px'
},
text: xlabel
},
labels: {
rotation: -45,
step: step,
align: 'right'//,
// step: temp
}
},
yAxis: {
title: {
style: {
fontSize: '14px'
},
text: ylabel
},
labels: {
align: 'right',
formatter: function() {
return parseFloat(this.value).toFixed(2);
}
},
min: 0
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'center',
floating: true,
shadow: true
},
series: [{
type: 'pie',
name: 'Consumption Percentage',
data: mySeries //Problematic line.
}] //Faculty with the smallest wattage -> Green.
}; //end of var options{} //Next: -> Yellow.
//Last -> Red.
//Draw the chart.
var chart = new Highcharts.Chart(options); //TODO: Change colours.
document.write("FINISHED");
}
The thing is, the above won't work. Since I'm not using an environment (writing in notepad++ and testing on my apache web server, via the results) I have manually aliminated the problematic line to be data: mySeries.
Any idea why that is? Aren't they the same type of array, [String, number]?
Additionally, are there any environments that will help me debug javascript programs? I'm really at my wit's end with this situation and I'd very much prefer to have an IDE tell me what's wrong, or at least point me at the right direction.
You see where you are calling "toFixed"? Let's run a small experiment:
var wattages = [2.0, 3.0];
var float_watt = new Array();
for(var index = 0; index < wattages.length; index++)
{
float_watt[index] = parseFloat(wattages[index]).toFixed(2);
}
console.log(JSON.stringify(float_watt));
The output is not what you expect:
["2.00", "3.00"]
See how it got converted to a string? If you delete the "toFixed" and let your formatter do its job, things will go just fine.
EDIT
Here's how you fix your formatter:
plotOptions: {
pie: {
dataLabels: {
formatter: function() {
return parseFloat(this.y).toFixed(2);
}
}
}
},
The yLabels formatter is doing nothing for the pie.
Am using Highcharts for pie chart. Below is the JS code for it :
$(document).ready(function () {
var chart;
var graphData = $("#graphContentdata").val();
console.log(graphData);
var options = {
chart: {
renderTo: 'graphContainer',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'SOV'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
}
chart = new Highcharts.Chart(options);
chart.series[0].setData("["+graphData+"]");
});
And PHP Code for generating the Data :
foreach ($sumArray as $key=>$value)
{
$sumArray[$key] = array_sum($value);
$percent = (number_format(($sumArray[$key]/$sovGrandTotal)*100,2));
$data[] = "['$key', $percent]";
}
$data = join(",", $data);
?>
<input type='hidden' id='graphContentdata' value="<?php echo $data; ?>">
The Data format Am getting is :
['www.quora.com', 0.23],['www.slideshare.net', 0.25],['me', 99.52]
Problem is :
chart.series[0].setData("["+graphData+"]");
not creating graph, but if i copy paste the value from console at palce of graphData variable, its working like:
chart.series[0].setData([['www.quora.com', 0.23],['www.slideshare.net', 0.25],['me', 99.52]]);
is working.
What's the mistake am doing here???
The problem is your are passing your data as a String when you are using
chart.series[0].setData("["+graphData+"]");
You need to set your data as an Array. You could do that by converting your String using eval:
chart.series[0].setData(eval("["+graphData+"]"));
You could also use jQuery to convert your String to JSON, but in that case you must use double quotes to open and close Strings:
$.parseJSON("[[\"www.quora.com\", 0.23],[\"www.slideshare.net\", 0.25],[\"me\", 99.52]]");