En Dygraphs, cómo mostrar AxisLabels como texto en lugar de números/fecha
Necesito construir un gráfico to show world's población by región and sample data would be
China 1,361,300,000
India 1,236,970,000
United States 317,148,000
Indonesia 237,641,326
Brazil 201,032,714
Soy nuevo Dygraphs and I tried simple example on the same:
<html>
<head>
<script type="text/javascript"
src="http://dygraphs.com/dygraph-combined.js"></script>
</head>
<body>
<div id="demodiv" style="width:500px;height:500px"></div>
<script type="text/javascript">
var data = "Country,Population\n" +
"1,1361300000\n" +
"2,1236970000\n" +
"3,317148000\n" +
"4,237641326\n" +
"5,201032714\n";
g = new Dygraph(document.getElementById("demodiv"), data, {
title: "World's Population"
});
</script>
</body>
</html>
Now, How can I use Dygraphs to display country Name instead of numbers on x-Axis? Is it possible with Dygraphs?
Gracias de antemano.
preguntado el 27 de noviembre de 13 a las 05:11
Pradeep
2 Respuestas
You could use the valueFormatter and axisLabelFormatter options. See http://dygraphs.com/options.html
The following example will print 'text:' inside the legend and the x value from your data.
axes: {
x: {
valueFormatter: function(x) {
return 'text';
},
axisLabelFormatter: function(x) {
return x;
},
}
},
Ejemplo en jsfiddle: http://jsfiddle.net/JaM3S/
respondido 27 nov., 13:10
@user3020781 Those two options for the x-axis helped me as well, thank you! I also had an issue with having .5 steps between the whole numbers, and found the issue was I had the chart set too wide and I only had 6 groups plotted on the x-axis, so dygraph was automatically adding the half step.
Couple solutions:
1. Add cases in the switch statements for the .5 steps
2. use the pixelsPerLabel option inside the x axis. The default for the x axes is 60, I doubled to get 120 which fixed mine.
3. Make the whole graph smaller. Mine are all set to be 1000px wide.
Both worked for my problem. Here's the Dygraph code. I commented out the case statements because I went with the pixelsPerLabel fix.
g = new Dygraph(
document.getElementById("graphdiv"),
dataArray,
{
xlabel: "x something",
ylabel: "y something",
title: "The coolest chart ever!",
labels: ["FR", "Avg1", "Avg2"],
labelsDiv: document.getElementById("labelsdiv"),
labelsSeparateLines: true,
width:1000,
colors: ["#339933", "#990000"],
strokeWidth: 2.5,
valueRange: [4, 5.8],
axes: {
x: {
/*the space between grid lines on x axis: default is 60px*/
pixelsPerLabel: 120,
valueFormatter: function(FR) {
var ret;
switch (FR){
case 1:
ret = 'A';
break;
case 2:
ret = 'B';
break;
case 3:
ret = 'C';
break;
case 4:
ret = 'D';
break;
case 5:
ret = 'D';
break;
case 6:
ret = 'F';
break;
/*case 1.5:
ret = '';
break;
case 2.5:
ret = '';
break;
case 3.5:
ret = '';
break;
case 4.5:
ret = '';
break;
case 5.5:
ret = '';
break;
case 6.5:
ret = '';
break;*/
}//end switch
return ret;
},//end of label formatter,
axisLabelFormatter: function(FR) {
var ret;
switch (FR){
case 1:
ret = 'A';
break;
case 2:
ret = 'B';
break;
case 3:
ret = 'C';
break;
case 4:
ret = 'D';
break;
case 5:
ret = 'E';
break;
case 6:
ret = 'F';
break;
/*case 1.5:
ret = '';
break;
case 2.5:
ret = '';
break;
case 3.5:
ret = '';
break;
case 4.5:
ret = '';
break;
case 5.5:
ret = '';
break;
case 6.5:
ret = '';
break;*/
}//end switch
return ret;
}//end of axis label formatter
}//end of x axis
}//end of axis
} );
Respondido el 21 de enero de 14 a las 20:01
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas axis-labels dygraphs or haz tu propia pregunta.
Thanks for the reply, that is what I was looking for and I have modified a bit as per my requirement. Please see jsfiddle: jsfiddle.net/JaM3S/1. But one issue I am facing is, in my local setup the sample code mentioned above generates x-axis values as 1,1.5,2,2.5 etc... instead of just 1,2,3 etc... Not sure if I am missing anything here compared to your example. - Pradeep
Sorry, I don't quite follow. Your local setup leads to floating points at your x axis, but in your jsfiddle it works? Maybe you use the rollPeriod or showRoller options? - user3020781