Multiple symbols/colors in single series

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Multiple symbols/colors in single series

Post by SenSeo » 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!

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Multiple symbols/colors in single series

Post by Yeray » 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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply