# How many points can be drawn up in a chart?

## How many points can be drawn up in a chart?

Hi, I wrote a test case which is used to determine which factors will influence the number of points can be drawn up on a chart, This is the result from my test:

Factors: the number of points which appear on the x-axis, the width of the chart, the width of the y-axis title

Factors unrelated: the number of lines, the x-axis time range

This is my test case code:
Code:
```<html>
<title>test-max-amount-of-point</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="../ext-4.0.7-gpl/bootstrap.js"></script>

<script type="text/javascript">

// test variable
var count = 370;
var maxFieldY = 2;
var    fromDate = new Date(2013, 2, 8, 11, 0, 0);
var    toDate = new Date(2013, 2, 8, 11, 10, 0);

var width = 800;
var minimum = 0;

var chart = null;
var store = null;

var colors = [ "#FF0000", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"];

function generateStore() {

var coord = [];

coord.push('x');
for (var i = 0; i < maxFieldY; i++) {
var yField = 'y';

yField = yField + i;

coord.push(yField);
}

if (store == null) {
store = Ext.create('Ext.data.Store', {
fields: coord
});
}

// var count = (toDate.getTime() - fromDate.getTime()) / 1000;
var data = [];

for (var i = 0; i < count; i++) {
var obj = {};
var endObj = {};

obj.x = new Date(fromDate.getTime() + 1000 * i);
endObj.x = new Date(fromDate.getTime() + 1000 * (i+1));

for (var j = 0; j < maxFieldY; j++) {
var objKey = 'y' + j;

obj[objKey] = minimum + i%10 + j*2;
endObj[objKey] = obj[objKey];
}

data.push(obj);
data.push(endObj);
}

}

generateStore();

var me = {
renderTo: 'chart',
width: width,
height: 200,
store: store,

axes: [{
type: 'Numeric',
position: 'left',
fields: ['y0'],
grid: true,
minimum: minimum,
maximum: minimum + 15
},{
type: 'Time',
position: 'bottom',
fields: ['x'],
grid: true,
step: false,
dateFormat: 'Y-m-d H:i:s',
fromDate: fromDate,
toDate: toDate
}]
};

me.series = [];

// 添加线条
for (var i = 0; i < maxFieldY; i++) {
var title = "";

var yField = 'y';

yField = yField + i;

me.series.push({
type: 'line',
xField: 'x',
yField: yField,
title: title,
showMarkers: false,
axis: ['left', 'bottom'],
style: {
stroke: colors[i%10],
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 200,
height: 35,
layout: 'fit',
renderer: function(storeItem, item) {
var curDate = null;

curDate = item.value[0];

var formatDate = Ext.Date.format(
curDate,
'Y-m-d H:i:s'
);

var value = item.value[1];

this.setTitle(
'date: ' + formatDate +
'<br>' +
'value:' + value.toFixed(3)
);
}
}
});
}

chart = Ext.create('Ext.chart.Chart', me);
});

</script>

<body>

<div id="chart"></div>

</body>
</html>```
2013-05-24_173135.png

If I alter the follow code, change the value 370 to 371, the chart won't display any more.
Code:
`var count = 370;`
2013-05-24_173115.png
But I alter the date range of the x-axis, it is not affected.
2013-05-24_174236.png

So, How can I know the maxinum points can be drawn up in a chart, or Anyone know the relationship between the number points and the width of chart?

Any help is appreciated, Thank you!

2. I suspect you'll just have to test out how many points will fit on a given chart. There's not a technical limit form the framework as to how many points you can render in a chart / series, but there may be practical limitations depending on browser / available chart real estate.

Maybe you are right, that's the browser's problem. But I still have some confusions. Because I have tested from firefox, ie6, chrome, they all have the same problem. I think that ExtJS draw chart by SVG(firefox, chrome) or VML(IE) method, It won't be so accurately in two different methods.

I don't care much about the relationship any more, I just want to accomplish the work first, so I define the formula roughly by several test case.

Code:
`count = widthOfChart - widthOfYAxisTitle`
Actually, I don't know how to get the width of y-axis title, just set it to 100.

Thank you very much again! Would you mind I add you to my friend list?

4. Sure.
And working granularly with SVG can be tricky - tough to evaluate measurements of those elements. I haven't played with VML directly, but have with SVG and found it quite challenging.