This example shows how to use group markers in a Chart.
Using Group Markers in a Chart
By default, charts render a marker for each data point in a series. This is useful for interactivity and custom styling but when there are many data points, performance can suffer. With a ComboSeries,
you can set showMarkers to false and interactionType to planar for larger data sets, but this is of no help with a histogram. Additionally, you may still prefer visual markers for each data point in
your chart. In this example, we'll take a large data set and display it on a ComboSeries with groupMarkers.
//set canvas as the defaultGraphicEngine
YUI({
defaultGraphicEngine: "canvas"
}).use('charts', function (Y)
{
var myDataValues = getData();
//style the series
var myseries = [
{
styles: {
line: {
weight: 1
}
}
},
{
styles: {
line: {
weight: 1
}
}
}
];
//instantiate chart with interactionType of planar and groupMarkers set to true
var mychart = new Y.Chart({
interactionType:"planar",
groupMarkers:true,
dataProvider:myDataValues,
categoryType:"time",
categoryKey:"date",
render:"#mychart",
seriesCollection: myseries,
width:800,
height:400
});
});