Hi,
While rendering scatter chart, the point rendered is bit big in size.
How can i reduce the size of that ??
I am rendering charts at runtime. I don't know how many legends and charts would be required.
Everything is decided at runtime, based on series collection and other UI parameters.
In that case how do you suggest to add legends at runtime ??
The legend is treated as a seperate DOM element so that you can position it however you would like, using the layout of the page and CSS. For example, you could even position the legend on top of the chart, or hide it in a collapsable container so that it pops open on rollover or a button press. It is for this reason that the chart contains no logic that manages the positioning of the legend, in order to give this flexibility.
There are many ways to put each legend next to each chart and the best way might depend on the surrounding content.
Below is an example of just one way to achieve this, but there would be many others:
<style> #chart { float: left; } #legend { float: left; } #chart2 { clear: both; float: left; } #legend2 { float: left; } #chart3 { clear: both; float: left; } #legend3 { float: left; } </style> <script type="text/javascript"> $(function () { $('#chart').igDataChart({ dataSource: [], width: '700px', height: '400px', verticalZoomable: true, horizontalZoomable: true, axes: [{ type: 'numericX', name: 'xAxis' }, { type: 'numericY', name: 'yAxis'}], series: [{ type: 'scatter', name: 'scatterSeries', xAxis: 'xAxis', yAxis: 'yAxis', xMemberPath: 'X', yMemberPath: 'Y'}], legend: { element: "legend", width: "200px" } }); $('#chart2').igDataChart({ dataSource: [], width: '700px', height: '400px', verticalZoomable: true, horizontalZoomable: true, axes: [{ type: 'numericX', name: 'xAxis' }, { type: 'numericY', name: 'yAxis'}], series: [{ type: 'scatter', name: 'scatterSeries', xAxis: 'xAxis', yAxis: 'yAxis', xMemberPath: 'X', yMemberPath: 'Y'}], legend: { element: "legend2", width: "200px" } }); $('#chart3').igDataChart({ dataSource: [], width: '700px', height: '400px', verticalZoomable: true, horizontalZoomable: true, axes: [{ type: 'numericX', name: 'xAxis' }, { type: 'numericY', name: 'yAxis'}], series: [{ type: 'scatter', name: 'scatterSeries', xAxis: 'xAxis', yAxis: 'yAxis', xMemberPath: 'X', yMemberPath: 'Y'}], legend: { element: "legend3", width: "200px" } }); }); </script> </head> <body> <div id="chart"></div> <div id="legend"></div> <div id="chart2"></div> <div id="legend2"></div> <div id="chart3"></div> <div id="legend3"></div> </body> </html>
Hope this helps!-Graham
Sorry Graham, It was not tooltip, it's the legend that appears below the chart.
I was wondering, if position can be changed by using some property. It seems like position can only be changed by using CSS styles.
I am rendering charts in a for loop, so i would have a legend corresponding to each chart. So how do i place them correctly ??
The sample application shows legend. You can take a look at it and suggest.
There isn't currently a way to use the custom template feature directly from the wrapper since the custom template must be defined using javascript. You can add a custom template by adding this logic after the definition of the chart in the page:
<script> $.ig.loader(function () { var customTemplate = { measure: function (measureInfo) { var size = 5; measureInfo.width = size; measureInfo.height = size; }, render: function (renderInfo) { var ctx = renderInfo.context, radius; ctx.fillStyle = renderInfo.data.actualItemBrush().fill(); ctx.strokeStyle = renderInfo.data.actualItemBrush().fill(); ctx.lineWidth = 2.0; ctx.beginPath(); radius = Math.min(renderInfo.availableWidth, renderInfo.availableHeight) / 2.0; ctx.arc(renderInfo.xPosition, renderInfo.yPosition, radius, 0, Math.PI * 2.0, false); ctx.fill(); ctx.stroke(); ctx.closePath(); } }; $("#chart").igDataChart("option", "series", [{ name: "series1", markerTemplate: customTemplate}]); }); </script>
Could you describe more clearly what you mean by the tooltip displaying below the chart? I'm not seeing this behavior.
-Graham