Steema Central

Posted: **Fri Apr 15, 2016 11:19 am**

Hello,

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>

In addition to this, we need to add another symbol(Triangle) within the series.

Thanks!

Posted: **Mon Apr 18, 2016 11:09 am**

Hello,

SenSeo wrote:We'd like to use the multiple symbols like Rectangle,Triangle,ellipse etc.

There's a unique pointer.style property used for the whole series. However, you could override calc function to modify that property for each index. Ie:

Code: Select all

    points1.colorEach = "yes";
    points1.oldCalc = points1.calc;

    points1.calc = function (t, p) {
        points1.oldCalc(t, p);
        if ((t > 5) && (t < 10)) {
            points1.pointer.style = "ellipse";
        }
        else if ((t > 15) && (t < 20)) {
            points1.pointer.style = "triangle";
        }
        else
            points1.pointer.style = "rectangle";
    }

SenSeo wrote:and also need to apply different colours in single series

I see you are setting colorEach property to false. You should set it to "yes" so the colors array in the palette property can be used.
If the colorEach property is set to true and the series' palette.colors array isn't set, the chart palette will be used.

Steema Central

Multiple symbols/colors in single series

Multiple symbols/colors in single series

Re: Multiple symbols/colors in single series