We'd like to use the multiple symbols like Rectangle,Triangle,ellipse etc. and also need to apply different colours in single series. Is it possible to do with the Javascript/HTML5 teechart? If so, please do let us know how to do this?
Below code is used to draw the ellipse chart.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Scatter Example</title>
<!--[if lt IE 9]>
<script src="../../src/excanvas/excanvas_text.js"></script>
<script src="../../src/excanvas/canvas.text.js"></script>
<![endif]-->
<script src="Scripts/TeeChart/teechart.js"></script>
<script src="Scripts/TeeChart/teechart-extras.js"></script>
<script src="Scripts/TeeChart/teechart-animations.js"></script>
<script src="Scripts/TeeChart/date.format.js"></script>
<script type="text/javascript">
var Chart1;
function draw() {
Chart1=new Tee.Chart("canvas");
Chart1.panel.margins.top = 12;
var points1 = new Tee.PointXY();
points1.title = "Apples";
points1.data.values = [5,3,2,7,1,6,4,5,1,0,10,7,11,15,12,21,17,15,19,24,21,11,15,21,19,17,20,23]; //,5,1,3,4];
points1.data.x = [new Date(2012, 9, 1),new Date(2012, 9, 15),new Date(2012, 10, 1),new Date(2012, 10, 15),new Date(2012, 11, 1)
,new Date(2012, 11, 15),new Date(2012, 12, 1),new Date(2012, 12, 15),new Date(2013, 1, 1),new Date(2013, 1, 15)
,new Date(2013, 2, 1),new Date(2013, 2, 15),new Date(2013, 3, 1),new Date(2013, 3, 15)
,new Date(2013, 4, 1),new Date(2013, 4, 15),new Date(2013, 5, 1),new Date(2013, 5, 15),new Date(2013, 6, 1)
,new Date(2013, 6, 15),new Date(2013, 7, 1),new Date(2013, 7, 15),new Date(2013, 8, 1),new Date(2013, 8, 15)
,new Date(2013, 9, 1),new Date(2013, 9, 15),new Date(2013, 10, 1),new Date(2013, 10, 15)];
Chart1.addSeries(points1).pointer.visible=true;
var avg = new Tee.Line();
avg.title = "Average";
var avgVals = new Array();
avg.data.values = avgVals;
avg.data.x = points1.data.x;
avg.format.stroke.size=2;
avg.smooth=0.5;
Chart1.addSeries(avg);
for (i = 0; i < 1; i++)
{
Chart1.series.items[i].pointer.width = 10;
Chart1.series.items[i].pointer.height = 10;
Chart1.series.items[i].pointer.style = "ellipse";
Chart1.series.items[i].pointer.colorEach = false;
Chart1.series.items[i].pointer.format.stroke.size = 4;
Chart1.series.items[i].pointer.format.stroke.fill = "white";
Chart1.series.items[i].pointer.format.shadow.visible=false;
Chart1.series.items[i].format.stroke.size = 2;
Chart1.series.items[i].format.shadow.visible=false;
}
Chart1.axes.left.title.text="$ 000s";
Chart1.axes.left.labels.roundFirst=true;
Chart1.axes.left.title.visible=false;
Chart1.axes.bottom.labels.roundFirst=true;
Chart1.axes.bottom.title.text="Bottom Axis";
Chart1.axes.bottom.title.format.font.fill = "rgba(0,0,0,0.6)";
Chart1.axes.bottom.title.format.font.setSize(20);
Chart1.axes.bottom.title.visible=false;
Chart1.axes.bottom.labels.dateFormat = "mm/yy";
Chart1.axes.left.increment=3.5;
Chart1.axes.left.setMinMax(-1, 26);
Chart1.axes.left.grid.format.stroke.size = 1;
Chart1.axes.left.ticks.visible=false;
Chart1.axes.bottom.format.stroke.size = 1;
Chart1.title.visible = false;
Chart1.title.text="Sales figures";
a1=new Tee.Annotation(Chart1);
a1.format.font.style="20px Tahoma";
a1.text="Product shipments";
a2=new Tee.Annotation(Chart1);
a2.text=" Tons fortnightly, all freighted sources";
Chart1.draw(); //get positions
tip=new Tee.ToolTip(Chart1);
tip.render="dom";
tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:3; z-index:1000;";
Chart1.tools.add(tip);
tip.onhide=function() { scaling=0; poindex=-1; }
tip.ongettext=function( tool, text, series, index) {
var s = '<font face="verdana" color="black" size="1"><strong>'+ series.title+'</strong></font>';
s = s + '<br/><font face="verdana" color="darkblue" size="1">Series point: <strong>'+ index.toFixed(0)+'</strong></font>';
s = s +'<br/><font face="verdana" color="red" size="1">Value: '+series.data.values[index].toFixed(2)+'</font>';
return s;
}
animation=new Tee.SeriesAnimation();
animation.duration=1500;
animation.kind="each";
fadeAnimation=new Tee.FadeAnimation();
fadeAnimation.duration=500;
fadeAnimation.fade.series=true;
fadeAnimation.fade.marks=true;
animation.mode = "linear";
fadeAnimation.mode = "linear";
animation.items.push(fadeAnimation);
animation.animate(Chart1);
resize(Chart1);
}
function resize(chart) {
if (!chart) return;
var canvas = chart.canvas;
startWidth = 1000;
startHeight = 400;
var w = startWidth;
var h = startHeight;
if ((window.innerWidth - 156 - canvas.offsetLeft - 20) < startWidth)
w = window.innerWidth - 156 - canvas.offsetLeft - 20;
else
w = startWidth;
if ((window.innerHeight - 70 - canvas.offsetTop - 20) < startHeight)
h = window.innerHeight - 70 - canvas.offsetTop - 20;
else
h = startHeight;
canvas.setAttribute('width', ""+w+"px");
canvas.setAttribute('height', ""+h+"px");
canvas.style.width=""+w+"px";
canvas.style.height=""+h+"px";
chart.bounds.width=w;
chart.bounds.height=h;
chart.draw();
}
function changeTheme(aTheme)
{
Chart1.applyTheme(aTheme);
if (aTheme == "dark")
{
a1.format.font.fill = "white";
if (Chart1.series.items.length > 0) {
for (var i = 0; i < Chart1.series.items.length; i++)
{
Chart1.series.items[i].pointer.format.stroke.size = 3;
Chart1.series.items[i].pointer.format.stroke.fill = "white";
}
}
}
else if ((aTheme == "daybreak") || (aTheme == "twilight"))
{
if (aTheme == "twilight") {
a1.format.font.fill = "white";
}
else
{
a1.format.font.fill = "rgba(0,0,0,0.6)";
}
if (Chart1.series.items.length > 0) {
for (var i = 0; i < Chart1.series.items.length; i++)
{
Chart1.series.items[i].pointer.format.stroke.size = 1;
}
}
}
else
{
a1.format.font.fill = "rgba(0,0,0,0.6)";
a2.format.font.fill = "darkblue";
if (Chart1.series.items.length > 0) {
for (var i = 0; i < Chart1.series.items.length; i++)
{
Chart1.series.items[i].pointer.format.stroke.size = 3;
}
}
}
resize(Chart1);
}
function changePalette(palette)
{
Chart1.applyPalette(palette);
resize(Chart1);
}
</script>
</head>
<body id="chartView" onload="draw()" onresize="resize(Chart1)">
<br />
<br />
<canvas id="canvas" width="1000" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</body>
</html>Thanks!
