When chart displays series, the first and last data of series is in the first/last line of yAxis. Thus, it's not a good experience for user to check data, because the label of first/last data may be cut when it is long.
I wonder if there are any options to let series to shrink, I mean, the first/last data with not be shown in first/last line of yAxis.
Thanks in andvance. :)
Hi,
The category x axis assumes that you are specifying categories. It assumes that all categories are represented in the data assigned to each series and are in the same order. If it didn't make this assumption then it would perform work to align and reorder the data, which would hurt the performance in the case that the data was already suitably aligned (not efficient to detect), which is assumed to be the most common case. It's almost always more efficient to ask the data tier to align the data rather than doing it in the UI tier.
Nevertheless, with Date categories, you can often wind up in a situation where you have different number of values, that are not aligned with each other, etc. One option is to align the data that is in the different series, and add 0 or null for the categories that aren't represented in one of the data sets. Most of the series types will support either not displaying a null value or optionally doing a linear interpolation to present a projected missing value.
We have been evaluating whether we can provide an adapter or build something into the chart than can, optionally, provide this function to the user.
Another option for date data, is that we will release a category date axis with the RTM version of the chart that displays values exactly scaled to their date value, rather than treating the dates as string categories, evenly spaced. This axis type is tolerant of non-aligned data.
In the meantime, this sample shows how you could use an adapter to align data for the series of a chart before binding:
var data1, data2, combinedData; data1 = [{ label: "aug-2010", value: 2 }, { label: "sep-2010", value: 4 }, { label: "nov-2010", value: 5 }, { label: "dec-2010", value: 3 }, { label: "jan-2011", value: 2}]; data2 = [{ label: "sep-2010", value: 3 }, { label: "oct-2010", value: 6 }, { label: "nov-2010", value: 4 }, { label: "jan-2011", value: 3}]; var combineData = function (comparison, getCategory, getValue) { var args = Array.prototype.slice.call(arguments), allCategories = [], categoryHash = {}, uniqueCategories = [], combined = [], indices = [], i = 0, j = 0, done = false, category = "", newCat, index = 0; args.shift(); args.shift(); args.shift(); for (i = 0; i < args.length; i++) { indices.push(0); for (j = 0; j < args[i].length; j++) { allCategories.push({ category: getCategory(args[i][j]), index: i, item: args[i][j] }); } } allCategories.sort(function (c1, c2) { return comparison(c1.category, c2.category); }); for (i = 0; i < allCategories.length; i++) { category = allCategories[i].category; index = allCategories[i].index; if (typeof categoryHash[category] == "undefined") { newCat = { category: category } categoryHash[category] = newCat; for (j = 0; j < args.length; j++) { newCat["value" + index] = null; } newCat["value" + index] = getValue(allCategories[i].item); uniqueCategories.push(newCat); } else { categoryHash[category]["value" + index] = getValue(allCategories[i].item); } } return uniqueCategories; } var months = months = { 'jan': 1, 'feb': 2, 'mar': 3, 'apr': 4, 'may': 5, 'jun': 6, 'jul': 7, 'aug': 8, 'sep': 9, 'oct': 10, 'nov': 11, 'dec': 12 }; var catParse = function (cat) { var vals = cat.split('-'), month = months[vals[0]], year = parseInt(vals[1]); return new Date(year, month, 1); }; combinedData = combineData(function (d1, d2) { var date1 = catParse(d1), date2 = catParse(d2); if (date1 < date2) { return -1; } if (date2 > date1) { return 1; } return 0; }, function (item) { return item.label }, function (item) { return item.value }, data1, data2); $("#container").igDataChart({ width: "500px", height: "500px", dataSource: combinedData, axes: [{ name: "xAxis", type: "categoryX", label: "category" }, { name: "yAxis", type: "numericY", minimumValue: 0 }], series: [{ name: "series1", title: "Test Series", type: "column", xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "value0" }, { name: "series2", title: "Test Series", type: "column", xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "value1" }], horizontalZoomable: true, verticalZoomable: true, windowResponse: "immediate" });
Which produces this output:
If you are using MVC, there is some neat stuff you could do with linq, on the server, to relate and align the data there, rather than doing it on the client. And, as I said, its usually fastest if your data tier can provide the data aligned and related, as, if you are using a relational database, it is designed to do this sort of thing quickly.
Hope this helps!
-Graham
I specify the extend and it do some help. :)
And another question, for example I have 2 line series displayed in a chart, one(I call it series1) has 5 data and started from aug-2010, the other (series2) has 4 data started from sep-2010, and the xAxis's label like these: aug-2010/sep-2010/nov-2010 ....
what should I do to display series2 according to xAxis's lable? series1 works fine, but series2 display sep-2010's data above lable aug-2010. And I don't think it's a good way to add a aug-2010 data to series2.
Thanks in advance and forgive my English. T T
Do you mean cut at the top and bottom of the chart, or you do mean the ends of the labels? Could you show a screenshot? The plan is to have more margin around the chart when it RTMs to take care of the first issue, for the second, if you don't specify an extent for the y axis, then it should auto-size, and size the panel for the y axis labels such that they can fully be displayed.
Does this help?