Hi,
I'm drawing a graph that currently looks something like this:
and that would like to look like this one:
More precisely, i would like to:
- present the xAxys labels with a vertical orientation, and to select the exact vertical/horizontal points where to present the labels.
- instead of hiding the majorStroke lines i would like to select the exact points where to draw the lines
The code i use to draw it is something like this:
$('#anaResEvolChart').igDataChart({ width: "700px", height: "400px", dataSource: ds.datasource, axes: [{ name: "xAxis", type: "numericX", formatLabel: function (value) { return GetFullFormatDate(new Date(value)); }, majorStroke: 'rgba(0,0,0,0)' //labelLocation: 'insideTop' }, { name: "yAxis", type: "numericY", majorStroke: 'rgba(0,0,0,0)' }], series: [{ name: node.Code, title: node.Name, type: "scatterLine", xAxis: "xAxis", yAxis: "yAxis", xMemberPath: "XValue", yMemberPath: "value" + i, showTooltip: true, tooltipTemplate: "anaResEvol_tooltipTemplate", markerType: 'square', thickness: 5, brush: _anaResChartColorsRGB[node.ColorId] },{ name: node.Code, title: node.Name, type: "scatterLine", xAxis: "xAxis", yAxis: "yAxis", xMemberPath: "XValue", yMemberPath: "value" + i, showTooltip: true, tooltipTemplate: "anaResEvol_tooltipTemplate", markerType: 'square', thickness: 5, brush: _anaResChartColorsRGB[node.ColorId] }], horizontalZoomable: true, verticalZoomable: true, windowResponse: "immediate"});
I noticed the crossingAxis/crossingValue/labelSettings sub-properties of the axis property, but didn't found any documentation on them, so any help would be greatly appreciated.
Thanks in advance,
Joel Campos
Joel,
To turn the labels 90 degrees you should:
This will achieve the rotated effect. As far as choosing exactly the values to display tickmarks at though, the chart core supports this through a functionality called custom tickmarks, but this is currently not exposed to the jQuery version of the chart. I would suggest making a feature request so that we can properly prioritize that on the backlog. Unfortunately I'm not sure there is an easy work around to achieve this without that customization feature.
if you set crossingAxis to another axis name in the chart and set crossing value equal to the value on that axis at which the axis should cross, and then set the axisLocation of the axis to an inside location, you can float an axis line and its labels over the chart surface rather than them being docked on the outside. If you are interested in this I can show you an example.
-Graham
Thanks for your reply.
The labels solution works perfectly.
As for the custom tickmarks I will submit the feature request right away, but I'm interested on your example of a workaround since i need this right away.
Best Regards,
Hi Graham,
Do you have an ETA of when you will be able to provide the sample of how to achieve the custom tickmarks?
Thanks
Joel, I was saying that custom tickmarks are currently not usable in the jQuery version and that you would need to make a feature request. I can show you how you could use crossing axes, but I don't think they help you achieve what you are trying to do.