gRaphael Pie Chart : Add animation - raphael

I want to display the pie chart with an animation that will make it grow from a "small point" to full size pie chart , something like this growing pie or this Highcharts Demo Gallery - Pie , but I want to apply it to a pie made with gRaphael ,
Here's my jsfiddle example... raphael pie chart with legend
Thanks ahead,


In order to achieve that kind of animation you have to access the sectors and... animate them :)
You can do this using your_pie.each()
pie.each(function(){
//scale each sector to 0
this.sector.scale(0, 0, this.cx, this.cy);
//animate from 0 to default size
this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 1000, "bounce");
});
The fiddle is here: http://jsfiddle.net/85VtZ/6/
Have fun ;)

Related

Display labels on bar chart using Chart.js

I am trying to display labels on top of bars using chart.js. My Y.-Axis has custom labels, like: scaleLabel : "<%= value + '$' %>"
So, my bar chart y.axis would be something like 1000$, 2000$ etc..
When I display lables on top of each bar, the values are displayed as 1000, 2000 etc..
Is there a way to display custom y-axis label on top of each bar?
I am looking something like, instead of 5000, how can i display "5000$" on top of each bar?

If you have a single dataset set the tooltipTemplate in the options.
If you have several datasets set the multiTooltipTemplate in the options.
var options = {
scaleLabel : "<%= value + '$' %>",
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + '$' %>",
// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= value + '$' %>",
};
See an example here.
And the documentation here.

How to shift the position of horizontal Axis ticks so that it will not intersect with border line of Chart Area in Google Chart?

By default, Google Chart positioned horizontal axis ticks on the border line of Chart Area, which can be shown in this picture:
How can I set some kind of padding to chart area that will make it look like this:
I am using Google Charts https://google-developers.appspot.com/chart/.

I finally found the answer:
Since I am using Date Data Type format, the chart will act as Continuous Chart (https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Data_Format).
Continuous Chart has characteristics of having tick close to the edge of the chart. What I have to do is set the domainAxis.type option to 'category'. https://google-developers.appspot.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous
Here is the code of my chart using ChartKick (http://ankane.github.io/chartkick/):
<%= line_chart #daily_pageviews, library: { domainAxis: { type: "category" }, curveType: "none", height: "400px", colors: ["#ff9933"], chartArea: { backgroundColor: { stroke: "#ccc", strokeWidth: 1 } } } %>
Result:

How to set the vertical scale in Google Charts

I have created a Google Chart Line Chart. There are data points at the bottom that do not show up because the upper points are large.
Here's my visualization function:
function drawVisualization() {
var data = google.visualization.arrayToDataTable(#table#);
var ac = new google.visualization.LineChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Billing Trend for this Month: #date#',
isStacked: true,
width: 1200,
height: 1000,
vAxis: {title: "Amount"},
hAxis: {title: "Date"}
});
}
I've looked through the param list but cannot find the proper one to set.
I would like the lower data points to be discernible.
Has anyone had luck with trying to do that?
Thanks

You can set the vAxis.logScale option to true, which will change the axis scale from linear to logarithmic. Your smaller values should then be discernible. There are a few other methods you could try as well (changing the value used to draw the data while keeping the tooltips the same; using a panel chart that zooms in on lower values); see some examples here: http://jsfiddle.net/asgallant/b4yCL/

Why does longer vAxis label in google chart appends 3 dots ( . ) at the end

I have a google chart that has a vAxis setting as below ..
vAxis: {
textStyle: { color: 'white' },
baselineColor: '#666666',
format: '######.#'
},
but longer than 1000 integer in vAxis label append 3 dots ( . ) and not showing the entire lable, so like if the actual label is 2000 then it is only showing 2... Can anyone please advise how could I show entire label 2000 instead of 2...
thanks in advance.

Google calculate the width of the label and make the adjustment in label in terms of adding dots at the end. So workaround would be increasing chart width or decreasing label font size. I decreased the font size and that did the tricks :)

google charts api : wrong axis with LXY chart?

I'm trying to display some very simple data using Google Charts API.
My data are a serie of X,Y points:
(1,44) (2,46) (3,46) (4,43) (5,46) and (6,44).
X-axis : from 0 to 300, step 50
Y-axis : from 1 to 50, step 5
I should end up with a line almost in the top, to the left, of the chart (43-46 are near 50).
But here is what I get:
URL = http://chart.apis.google.com/chart?cht=lxy&chs=500x300&chd=t:1,2,3,4,5,6|44,46,46,43,46,44&chxt=x,y&chxr=0,0,300,50|1,0,50,5
If I change Y-axis, 1 to 100 (instead of 50), it's ok...
URL = http://chart.apis.google.com/chart?cht=lxy&chs=500x300&chd=t:1,2,3,4,5,6|44,46,46,43,46,44&chxt=x,y&chxr=0,0,300,50|1,0,100,5
I'm probably mistaking, but I can't find what is wrong.

If you add data scale the chart does show correctly.
http://chart.apis.google.com/chart?cht=lxy&chs=500x300&chd=t:1,2,3,4,5,6|44,46,46,43,46,44&chxt=x,y&chxr=0,0,300,50|1,0,50,5&chds=0,300,0,50