I try to make a surface chart and to add a slider to animate it.
I'm new with Plotly and tried to copy the transition parameters, animations methods, frames parameters from this example : https://plot.ly/javascript/gapminder-example/ but it still jump from one state to the next one without transition.
Then : is it possible to have smooth transitions with any chart or not?
here is my code:
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<div id="myDiv"> </div>
<script >
var traces = [{"name":"Asia", "type":"surface","z":[["28.801", "55.23","43.077","30.015", "62.485"],["28.801", "55.23","43.077","30.015", "62.485"],["779.4453145", "1601.056136","2449.008185","3520.610273", "5911.315053"], ["8425333", "1282697","9279525","4232095", "17876956"]],"id":["Afghanistan","Albania","Algeria","Angola", "Argentina"],"text":["Afghanistan","Albania","Algeria","Angola", "Argentina"]},//"mode":"markers","marker":{"size":["8425333"],"sizemode":"area","sizeref":200000}},];
var layout = {"xaxis":{"title":"Life Expectancy","range":[30,85]},
"yaxis":{"title":"GDP per Capita","type":"log"},
"hovermode": "text",
"updatemenus":[{"x":0,"y":0,"yanchor":"top","xanchor":"left","showactive":false,"direction":"left","type":"buttons","pad":{"t":87,"r":10},
"buttons":[{"method":"animate",
"args":[null,{"mode":"immediate","fromcurrent":true,"transition":{"duration":300},"frame":{"duration":500,"redraw":false}}],
"label":"Play"},
{"method":"animate",
"args":[[null],{"mode":"immediate","transition":{"duration":0},"frame":{"duration":0,"redraw":false}}],
"label":"Pause"}]}],
"sliders":[{"pad":{"l":130,"t":55},
"currentvalue":{"visible":true,
"prefix":"Year:",
"xanchor":"right",
"font":{"size":20,"color":"#666"}},
"steps":[{"method":"animate","label":"1952","args":[["1952"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]},
{"method":"animate","label":"1957","args":[["1957"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]},
{"method":"animate","label":"1962","args":[["1962"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]}
]}]};
var frames = [
{"name":"1952","data":[{"z":[["28.801","55.23","500.077","30.015","62.485"],["28.801","55.23","500.077","30.015","62.485"],["779.4453145","1601.056136","2449.008185","3520.610273","5911.315053"],["8333","5419","8050","42095","6890"]], "id":["Afghanistan","Albania","Algeria","Angola","Argentina"],"text":["Afghanistan","Albania","Algeria","Angola","Argentina"]}]},
{"name":"1957","data":[{"z":[["30.332","59.28","450.685","41.999","64.399"],["30.332","59.28","450.685","41.999","64.399"],["820.8530296","1942.284244","3013.976023","9827.940465","6856.856212"],["9244","1951","6413","61361","7506"]], "id":["Afghanistan","Albania","Algeria","Angola","Argentina"],"text":["Afghanistan","Albania","Algeria","Angola","Argentina"]}]},
{"name":"1962","data":[{"z":[["70.332","100.28","400.685","51.999","64.399"],["70.332","100.28","400.685","51.999","64.399"],["920.8530296","2342.284244","6013.976023","10827.940465","6856.856212"],["4094","2670","5096","1361","8065"]], "id":["Afghanistan","Albania","Algeria","Angola","Argentina"],"text":["Afghanistan","Albania","Algeria","Angola","Argentina"]}]},
];
Plotly.newPlot("myDiv", {data: traces, layout: layout, frames: frames});
</script>
I am using css2pdf#cloudformatter to export my plotly.js svg to pdf. It works nicely, but it does not export the colorbar of the heatmap. I am using the "srctype:'svg'" option to save the svg in exactly the format as it is on my website. Please have a look at the fiddle http://jsfiddle.net/rk9540x5/4/
Here is the script:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xeponline.jqplugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<!-- Source and on-click event for plotly.js -->
<div id="plotly_chart" style="width: 90%; height: 270px"></div>
<button onclick="return xepOnline.Formatter.Format('plotly_chart',{render:'download',srctype:'svg' });">Get PDF</button>
<script type="text/javascript">
Chart = document.getElementById('plotly_chart');
var data = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
type: 'heatmap'
}
];
Plotly.newPlot('plotly_chart', data);
</script>
I did test it without the "srctype:'svg'" option, and this exports also the colorbar together with the plot, but the output does not look like the plot on the webpage anymore: the colorbar gets plotted below the heatmap. This suggests that css2pdf recognizes the div as two separate svg elements - one for the heatmap, and the other one for the colorbar.
It also says on the cloudformatter.com homepage (http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage) that "if srctype:'svg' option is used, the first svg element in the containing div will be formatted alone". How do I get around this? Is there any way to move the colorbar svg element into the heatmap svg element? Here is an image of the DOM - you can see that there are two different svg#s, "infolayer" representing the colorbar svg.
I already tried the following to add the colorbar to the plotly chart, but it does not help:
var colorbar = {
title: test,
titlefont: {
size: 12,
},
titleside: "top",
thickness: 20,
nticks: ticknumber,
tickfont: {
size:10.5
},
outlinewidth: 0,
xpad: 1,
ypad:3
};
Plotly.newPlot('plotly_chart', data).append("colorbar");
Thanks for helping with this issue!
I have a page that displays data in a form of a Pie Chart. I use Google Charts and here is the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Sale In Percent'],
['product2', 5.5],
['product3', 7.5],
['product4', 1.5],
['product5', 8.5],
]);
var options = {
title: 'Product Sales'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>
And here's a working JS FIDDLE:
https://jsfiddle.net/alex4uthis/j78vmq00/2/
Here I have 1 more product as product1 and its value is 77. Since this value is always higher I omitted from the chart. When I draw the chart we can see product2 percent become 23.9%, product3 percent become 32.6 etc.... But I want to get the pie chart draw with what I have given in 'Sale In Percent' column.(Means product1 draw with 5.5 etc...)
Please help me in this.
You can't have a pie chart that totals less than 100%, so the library is assuming the sum of the values you pass it is to be considered 100%.
Since you aren't passing the 77, your values only add up to 23. 5.5/23 = 23.9% and 7.5/23 = 32.6%
If you want to have the chart display with the labels reading your provided percentages, the first thing you need to do is set the pieSliceText option to value to label the slice with 'The quantitative value of the slice.' (https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=en#configuration-options)
Next, if you want to show the label with a percent sign you will just want to go manually add them after the chart renders like so:
[].slice.call(document.querySelectorAll('#piechart2 path + text'))
.forEach(function(el) {
el.textContent += '%';
});
Here is a working fiddle: https://jsfiddle.net/tq37y0p5/1/
I am trying to build a dynamically fed (data) straight lines chart. I built a prototype using graphael.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Charts</title>
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.line.js"></script>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
window.onload = function () {
var r = Raphael("holder");
var yAxisTags = ["A","B","C","D"];
var xData = [
[2000,2015],//hack line, transparent; used to specify the range of the axis
[2008,2014],[2004,2005],[2009,2010],[2000,2007],[2000,2014],[2010,2012]
];
var yData = [
[1, 1],//y coordinates of hack line
[0, 0],[1, 1],[1, 1],[2, 2],[3, 3],[0,0],
[0, 0]//hack line, transparent.Used to be able to draw straight lines
];
var colors = [
'transparent',//line 1
'red','green','green','purple','turquoise','black',
'transparent'];//'transparent' IS A MUST, a hack to make it have a straight line
var options = {
nostroke: false,
gutter: 90,
axis: "0 0 1 1",
symbol: "circle",
axisxstep:10,
axisystep:3,
colors: colors
};
var lines = r.linechart(100, 10, 700, 300,xData,yData,options);
// AXIS (x and y) have values but do not drawn the lines
lines.axis[0].attr([{stroke: false}]);
lines.axis[1].attr([{stroke: false}]);
// Thickness of symbols (ie dots)
lines.symbols.attr({ r: 4 });
// Animate dots on first load
lines.animate({"stroke-width": 1}, 1000);//ALL lines,1000 is animation time
// Set text for Y axis coordinates (instead of numbers)
$.each(lines.axis[1].text.items, function(index, label) {
this.attr("text", yAxisTags[index]);
});
};
</script>
</head>
<body>
<div id="holder" style="width:50%"></div>
</body>
</html>
And here is how it looks like:
So basically I want a time related (jumps +2 years from point to point) line chart graph with labels on Y-axis, that is made by drawing straight lines and to which dynamic data is being fed. The current code works with this specific configuration only but once i start modifying the data, the display is not accurate anymore:
x-axis (time axis) gets buggy and time doesn't jump +2 years
if there is a large difference in between two years (2 X coordinates), the line is drawn as a dot
will have to modify axisxstep and axisxstep (don't understand how the logic behind these works to be honest)
etc..
Is there a technique/hack around to make my desired line chart concept work with dynamic data using graphael? or it is not feasible with this library?
For anyone stuck with this same scenario:
Since I am using AngularJS, I ended up using angular-google-chart.
It is a directive wrapper around google chart; it is stable and straightforward to use.
I have made the line chart given above. The problem is that I can't make that red line stop at the current hour. I want to be drawn only when the value is updated. I tried not defining the value, but it gives error in that case.
Here's a link!
I have used the following code:
<html>
<head>
<script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>
<script type=\"text/javascript\">
google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Hour', 'Renewals Yesterday', 'Renewals Today']
$ren_graph
]);
var options = {
title: 'Renewals Cumulative Comparison Graph'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id=\"chart_div\" style=\"width: 1200px; height: 300px;\"></div>
</body>
</html>
To have a "blank" value, you need to do two things.
First you need to set the value of the "blank" items to null
Second you need to have interpolateNulls in your options as false (this is the default behavior).
You can read more about interpolateNulls here:
Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.