I follow chapter 223 (diagrams) of railscasts and tried to implement a donut style for an application using the High-quality library . Now I know that this is just one series of “pie” inside the other, and each of them has its own data source.
Although when I tried to set up the examples for what I wanted, I simply could not get the desired result. I was wondering what is the right way to pass data to the "data" parameter of the chart ?.
So, I copied the following code from the Internet (for testing only):
series: [
{
type: 'pie',
name: '2008',
size: '45%',
innerSize: '20%',
data: [
{ name: 'Firefox', y: 45.0, color: '#4572A7' },
{ name: 'IE', y: 26.8, color: '#AA4643' },
{ name: 'Chrome', y: 12.8, color: '#89A54E' },
{ name: 'Safari', y: 8.5, color: '#80699B' },
{ name: 'Opera', y: 6.2, color: '#3D96AE' },
{ name: 'Mozilla', y: 0.2, color: '#DB843D' }
]
}
]
Another way to transfer data:
series: [
{
type: 'pie',
name: '2008',
size: '45%',
innerSize: '20%',
data: [
['IE', 46.6],
['Chrome', 3.1],
['Safari', 2.7],
['Opera', 2.3],
['Mozilla', 0.4]
]
}]
, , , . , db?.
, :
class Frame < ActiveRecord::Base class FrString < ActiveRecord::Base
attr_accessible :name, :total attr_accessible :frame_id,:name,:total
has_many :fr_strings belongs_to :frame
end end
, , , ... .
<% _data=[] %>
<%Frame.all.each do |frame|%>
<% _data << [frame.name,frame.fr_strings.sum(:total)]%>
<%end%>
.
( Javascript)
data, :
data: [
<%_data.each do |d|%>
<%=d%>,
<%end%>
]
:
<!DOCTYPE html>
<html>
<head>
<title>Charts</title>
<link href="/stylesheets/application.css?1305016385" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/application.js?1304963001" type="text/javascript"> </script>
<script src="/javascripts/jquery-1.4.2.min.js?1305020819" type="text/javascript"></script>
<script src="/javascripts/rails.js?1305020831" type="text/javascript"></script>
<script src="/javascripts/highcharts.js?1305029094" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="G4k7DrZNfIcJt4Dlbz7JzNViSjQ+OGPUAVY4rW+XAxY="/>
</head>
<body>
<script type="text/javascript" charset='utf-8'>
$(function(){
new Highcharts.Chart({
chart: {
renderTo: 'frames_chart',
margin: [50, 0, 0, 0],
plotBackgroundColor: 'none',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'CHART TITLE'
},
subtitle: {
text: 'Inner circle: 2008, outer circle: 2010'
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.name +': '+ this.y +' %';
}
},
series: [
{
type: 'pie',
name: '2008',
size: '60%',
innerSize: '10%',
data: [
["Car", 93.0]
["House", 91.0]
],
dataLabels: {
enabled: false
}
},
]
});
});
</script>
<div id="frames_chart" style="width:560px; height:300px"></div>
</body>
</html>
"" **** "" ?. _data , . , , ?