If you visit the URL below you will see that the graph is being generated properly, but that there are not labels along the x and y axis to indicate the data values:
http://chart.apis.google.com/chart?chs=600x300&chtt=Release+Burndown&cht=lc&chdl=estimated|actual&chco=FF0000,00FF00&chxr=0,0,30,2|1,0,40,2&chds=0,45&chd=t:45,34,23,12,0|45,20,15,32,31,25,0
Can anyone figure out how to get the x and y axis data values to show up?
According to the API, you can do this through the chxX parameters:
http://code.google.com/apis/chart/image/docs/gallery/line_charts.html#gcharts_axis_styles_labels
chx1: make custom values as labels
chxs and chxtc: to specify color, size, alignment, and other properties of both custom and numeric axis labels
Let me know if you can't figure it out.
Related
I'm working with C3.js to build graphs for my JSON data. However, I do not understand what decides the Y-axis ranges on the graph. I have a common code to generate 2 bar charts, out of which one comes as expected whereas the other one has high range for Y-axis causing my data bar being diminished. Please take a look at the image below.
The bar chart on the left has data value equal to 1, yet the axis ranges to 35. A similar graph on the right adjust well.
Does anyone know what could be the reason for this?
As yo can read in the doc there is a parameter to set the Y max and min. So you can set the max value dynamically. Or you can set de Y.padding to be 0, so the Y axis will be shorter.
C3.js calculate the Y axis hight dynamically, and I think that have a min default hight.
For preparing graphs from data that exists in MySQL tables, I am using DimpleJS framework. I am able to plot graphs, everything works. One question though -
In a simple bar chart, with category values on X axis and measure values on Y axis, is there a way to limit the number of X axis categories being displayed? Example, let's say this is my data set: [(A,1), (B,2), (C,1), (D,5), (E,4)]
So in my dataset, there are 5 categories (X axis - A, B,C,D,E) and corresponding measures that I will be displaying in Y axis. Question is, I just want to display only 3 of the measures - let's say only first three, in this case (A,1), (B,2) and (C,1), although my dataset has two more (D,5) and (E,4).
Is there any way to restrict it in JS/ DimpleJS? I have limited control on the dataset that is coming in.
Thanks.
Use dimple.filterData after you receive the dataset but before you provide the data to dimple. This does not mutate the data so won't affect any other operations. I'm not sure what your actual category field is but it should look similar to this :
var chartData = dimple.filterData(originalDataset, 'category', ["A", "B", "C"]);
var chart = new dimple.chart(svg, chartData);
Otherwise there is not a provided way to restrict a category axis from showing values present in the data.
I have a line chart with x Axis being numeric and y axis being numeric as well. I want the y axis to be reversed so that higher values are at the bottom of the axis and lower values at the top. I looked at the API Docu and didnt find a config to reverse the axis or so. Any clues?
In ExtJS 3 there was a reverse config option to get this going. With ExtJS 4 you have to use workarounds.
For reverting the x axis values you could use the sorters property of the store connected to the chart.
But for reverting the y axis you have to convert your values. Here's a sample on how to achieve this: http://www.sencha.com/forum/showthread.php?132148-What-has-happen-to-quot-reverse-quot-config-on-chart-axes&p=949699&viewfull=1#post949699
Is it possible to set custom x axis labels in Chart.js? Currently I'm using my array of indexes but is is hard to read anything on this chart, so I would like to scale it and show only specified indexes.
For example: instead [1,2,3,4,5,6,7,8,9,10], I would like to set [1,5,10]
With Chart.js you can't override the horizontal axis labels. Its a great library, sad it doesn't support this.
The easiest way to do it, without getting into the Chart.js code and without redrawing the canvas, is to leave the label cell with an empty string.
For example, if you just want to show the x axis label every 10 points, you can do something like this when generating the labels:
if (ix % 10 == 0) {
labels[ix]="Label";
} else {
labels[ix]="";
}
I am trying to use the setFormattedValue() function from the DataTable class to modify the look of the labels across the horizontal axis on a line chart, but the values are not being formatted. The labels remain in their default values created by setValue().
For example, the following code does not produce 00:36:45 on the axis, but rather, just 2205.
var table = new google.visualization.DataTable();
table.addRows(1);
table.addColumn('number', 'time');
table.addColumn('number', 'altitude');
table.setValue(0, 0, 2205);
table.setFormattedValue(0, 0, '00:36:45');
table.setValue(0, 1, 35);
var chart = new google.visualization.LineChart($('chartdiv'));
chart.draw(table);
I don't understand what I'm doing wrong. Shouldn't setFormattedValue() cause the label to be shown as 00:36:45 instead of 2205?
If this isn't the right way to change the look of the axis labels, then how should it be done? I can't change the column type to string because the plotted line is based on numerical x/y coordinates.
You said you can't change the column type to string but, can you change it to Date? The axis is showing a number because you declared both columns as number type.
I can't see the relation between 00:36:45 and 2205. Is 2205 a value you get at that time? If you drawed more points in your line chart, you could check if their labels are the formatted value you are setting.
Partial solution:
replace chart.draw(table); with:
chart.draw(table, {
hAxis: {
ticks: [
{v:2205, f:'00:36:45'},
{v:35, f:35}
]
}
});
ticks allows you to map any value and its representation on the axis, but i think you have to list values for all labels you want. (But this could be automated by custom script)