I'm a css novice... I have a chart that looks great and an HTML table that looks very basic. I want the table to match the style of the chart (font, font size, etc.).
I've included the highcharts.css file in the head of the HTML and added styledMode: false to the charge definition.
<head>
<link rel="stylesheet" type="text/css" href="code/css/highcharts.css">
</head>
<body>
<script src="code/highcharts.js"></script>
<script src="code/modules/data.js"></script>
<script src="code/modules/drilldown.js"></script>
<table border='1' width='100%'>
rows here...
</table>
<div id="container2" style="min-width: 310px; max-width: 100%; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
styledMode: true,
},
title: {
text: 'Web Firewall - Top 3',
style: {"fontSize": "15px", "color":"red" },
},
subtitle: {
text: 'Source: Something Firewall'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Block %',
colorByPoint: true,
data:
[{"name":"www.blah.org","y":44124},{"name":"menus.foo.org","y":1602},{"name":"mmm.boo.org","y":508}] }]
});
</script>
</body>
Related
i need to add some custom contextmenu on some column charts but here i get some strange results using the highcharts extension custom-events (https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events). i have the following example: https://jsfiddle.net/4zhvdapb/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
events: {
contextmenu: function (e) {
console.log("create context menu for curent series: ")
console.log(e)
console.log(e.point.category)
$('#constext-menu-div').text(e.point.category);
$('#constext-menu-div').css({top: e.pageY, left: e.pageX});
$('#constext-menu-div').show();
}
}
}
},
series: [{
name: 'John',
data: [5.32, 3.22, 4.05, 7.15, 2.22]
}, {
name: 'Jane',
data: [2.55, 2.50, 3.53, 2.05, 1.15]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<script src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div style="border: solid 1px; background-color: lightgray; position: absolute; width: 100px; height: 200px; display: none; z-index: 9999;" id="constext-menu-div"></div>
(for some reason the in built code in stack overflow does not work - please use the jsfiddle link)
if you right click for example on the john serie on the buttom right side of the category grapes you will get the point/category of bananas instead of grapes. Same thing for apples where you get oranges.
does anyone have an idea what the problem is?
seems to be a bug: https://github.com/blacklabel/custom_events/issues/119
I am having problems even getting off the ground with Highcharts maps.
I followed the rails installation.
Gemfile
gem "highcharts-rails", "~> 3.0.0"
application.js
//= require highcharts
//= require highcharts/highcharts-more
//= require highcharts/modules/data
//= require highcharts/modules/map
In my page
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
// Prepare demo data
var data = [{
'hc-key': 'us',
value: 3
}, {
'hc-key': 'ca',
value: 5
}, {
'hc-key': 'mx',
value: 20
}];
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Showing only non-null areas'
},
subtitle: {
text: 'The <em>allAreas</em> option is false'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
mapData: Highcharts.maps['custom/north-america-no-central'],
joinBy: 'hc-key',
allAreas: false,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
</script>
As you can see from the screenshot, there is no map rendered.
I have seen a similar question here:
Highmaps with US States in Rails
but I have tried these permutations and combinations of placing the links to the js files in my application header without success. The simple "your first chart" installation in the docs works fine
http://www.highcharts.com/docs/getting-started/your-first-chart
.....as soon as I try maps, no joy.
EDIT
So,
if i remove the files from application.js and add
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
to my application header....the following works..
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Add lower case codes to the data set for inclusion in the tooltip.pointFormat
$.each(data, function () {
this.flag = this.code.replace('UK', 'GB').toLowerCase();
});
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Fixed tooltip with HTML'
},
legend: {
title: {
text: 'Population density per km²',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
pointFormat: '<span class="f32"><span class="flag {point.flag}"></span></span>'
+ ' {point.name}: <b>{point.value}</b>/km²',
positioner: function () {
return { x: 0, y: 250 };
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
}
}]
});
});
});
</script>
Surely there has to be a nice "rails" way to get this working without explicitly calling the files in the header?
i have a table in my main page in which left side i want to show one graph and right side i want to show second one. when iam redering both view from my index.html.erb its showing me above error and just showing me only one graph. if i show only one graph it doesn't give any error.
index.html.erb: here iam integrating my highcharts and rendering views
<head>
<!--Load the AJAX API-->
<%= javascript_include_tag "highcharts"%>
</head>
<tr>
<td width = "490">
<b><%= render :partial => 'new1' %></b>
</td>
<td width = "490" colspan = 2>
<b><%= render :partial => 'new' %></b>
</td>
</tr>
2. new1.html.erb:- its view which has to be showed left side
<head>
<script>
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#pie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: ''
},
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'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'calculated',
data: <%= raw #result1 %>
}]
});
});
</script>
</head>
<div id="pie" style="width:500px; height:300px; vertical-align: top; display: inline-block; padding: 10px;">
3. new.html.erb:-> its view which has to be showed right side
<head>
<script>
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#highpie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: ''
},
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'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'calculated',
data: <%= raw #result %>
}]
});
});
</script>
</head>
<div id="highpie" style="width:500px; height:300px; vertical-align: top; display: inline-block; padding: 10px;">
conclusion:-> when iam redering both view from my index.html.erb its showing me above error and just showing me only one graph. if i show only one graph it doesn't give any error
Wow! Your index.html.erb it is not valid, should be in the css folder, js scripts in his. You have all scattered.
in my both view i was using the same code and method of highcharts. i think
it was clashing i changed the highcharts method a little bit it worked fine for me
this is the code:->
<head>
<script>
$(function () {
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.pie.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
// Build the chart
$('#highpie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
credits: {
enabled: false
},
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: 'calucated',
data: <%= raw #result %>
}]
});
});
</script>
</head>
<div id="highpie" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
I am trying to implement Highcharts Waterfall graph in rails 3.Currently I am just using the default data as provided by http://www.highcharts.com/demo/ Following is my view file for testing purpose
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: [{
name: 'Start',
y: 120000
}, {
name: 'Product Revenue',
y: 569000
}, {
name: 'Service Revenue',
y: 231000
}, {
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
}, {
name: 'Fixed Costs',
y: -342000
}, {
name: 'Variable Costs',
y: -233000
}, {
name: 'Balance',
isSum: true,
color: Highcharts.getOptions().colors[1]
}],
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
Now what I want to achieve is firstly the data required should be dynamic basically the name: and the y: values. The values can be passed using a json object but how to build the json when the values are inconsistent as in case of
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
and
name: 'Balance',
isSum: true,
color: Highcharts.getOptions().colors[1]
as there are no y: values. Kindly help me out as I am not able to figure out how to achieve dynamic data in this chart.
Here is the answer just in case if it helps out anyone. This is the example with dynamic data. http://www.highcharts.com/demo/waterfall .In the controller file
class GraphsController < ApplicationController
def index
defaults = [:name=>'Positive Balance', :isIntermediateSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for positive balance which would automatically be calculated once we pass the correct values in the json format
defaults_final = [:name=>'Balance', :isSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for final balance
positivegraph = Graph.all(:conditions =>'y > 0') # for the positive values
negativegraph = Graph.all(:conditions =>'y < 0') # for the negative values
positive_graph = positivegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of positive values
negative_graph = negativegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of negative values
#user_hash_array = positive_graph.concat(defaults) #concat arrays successively
#user_hash_array = #user_hash_array.concat(negative_graph)
#user_hash_array = #user_hash_array.concat(defaults_final).to_json
end
end
In the view file I have
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery.min' %>
<%= javascript_include_tag 'highcharts' %> <!--[if IE]> <%= javascript_include_tag 'excanvas.compiled' %> <![endif]-->
<%= javascript_include_tag 'highcharts-more' %>
<%= javascript_include_tag 'exporting' %>
<title>Highcharts Example</title>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data:
<%= raw #user_hash_array %>
,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
In the database I have two fields 1 is the name field and the other field is y which has the integer values.
I have a problem with highcharts pie, i want to show my data into a pie, but the pie is very small, it is only shows like a small dot.
i have looking for the answer any where, but i can not find it. Please some body explain to me why is that, i just new for this tools...
i tried to post the image, but it can't...
below are my code :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,archive,follow">
<title>CIT Dashboard</title>
<link rel="stylesheet" media="all" href="css/dashboard.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
var chart1;
var chart2;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'pie1',
plotBackgroundColor: '#969696',
margin: 0,
padding: 0
},
legend: {
enabled: false
},
title: {
text: ''
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
size:'80%',
allowPointSelect: true,
plotBorderWidth: 0,
plotShadow: false,
animation: false,
shadow: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor:'#000000',
distance: -40,
formatter: function() {
return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Transaction by LTS',
data: [<%=graph1 %>]
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'pie2',
plotBackgroundColor: '#969696',
margin: 0,
padding: 0
},
legend: {
enabled: false
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
size:'80%',
allowPointSelect: true,
plotBorderWidth: 0,
plotShadow: false,
animation: false,
shadow: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
distance: -40,
formatter: function() {
return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Transaction by LTS',
data: [<%=graph2 %>]
}]
});
});
</script>
</head>
Thanks
First of all, define your width / height, secondly you can modify size of chart by parameter:
http://api.highcharts.com/highcharts#plotOptions.pie.size
Try setting minimum width and height of the div container where you are generating chart like this
<div id="pie1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Had the same issue when working with mutliple piecharts. Only 1 of the piecharts appeared smaller in size. The reason being max-width was set for the div element. Once I removed the max-width attribute, it worked fine.
<div id = "ab" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
to
<div id = "ab" style="min-width: 310px; height: 400px; margin: 0 auto">