FlexChart change particular point symbol marker and color feature

FlexChart change particular point symbol marker and color feature

Posted by: kheswee_tan87 on 14 September 2017, 11:48 am EST

• 

  kheswee_tan87

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:48 am EST

  Hi Team,

  I am considering to subscribe wijmo5. But before that, i need to ensure that whether i can change one of the point symbol marker or color among the points
  
  of FlexChart?

• 

  troytaylor

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  The Symbol marker in the FlexChart is used for Line, Line Symbols, and Scatter Chart types. The marker naturally takes on 2 shapes (Dot & Box). You can easily change the color on the point by setting the style. Refer to “Styling Series” section of this demo. http://demos.wijmo.com/5/Angular/FlexChartIntro/FlexChartIntro/

  Regards,
  
  Troy

• 

  kheswee_tan87

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi,

  How about change particular point symbol marker shape or color among the points?
  
  Example

• 

  troytaylor

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi,

  Yes you can change a particular point symbol marker, but this requires a different approach. You will need to use the itemFormatter property to do this. Here are a couple of blog posts with samples that demonstrate how to use the itemFormatter with Flexchart.
  
  Power of ItemFormatter
  
  Create Custom StepChart with FlexChart’s ItemFormatter

  Regards,
  
  Troy

• 

  kheswee_tan87

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi Troy,

  Thank you for your quick response. I had referred to the sample link and finally i can change a particular point marker/symbol.
  
  However, how about if I want to change the marker/symbol to customized image? Can you provide me some sample code?

  Like this:

  

  Thank You.

  Regards,
  
  Jess

• 

  troytaylor

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi Jess,

  Yes, you can replace symbols with images. You would have to do this using the itemFormatter property and Annotations feature, because the API for Series does not allow you plug in an image as the symbolMarker. The Wijmo Explorer sample demonstrates using image annotations. It is available from the Wijmo download package under the Samples directory.

  Here is a link to the Explorer example that uses an image as an annotation.
  
  http://demos.wijmo.com/5/Angular/Explorer/Explorer/#/chart/annotations

  Regards,
  
  Troy

• 

  kheswee_tan87

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi Troy,

  Thanks for your sample. It’s works.
  
  And two more question.

  1. Can i disabled one of a series’s tooltip as well as customize the tooltip format?
  2. How can I update chart in real-time? When new data/point inserted/created dynamically, how do I update the chart?
     
     Can you provide me the sample as well? Because i had tried so many methods (referring to online sample) but it still doesn’t work.

  Thank You

  Regards,
  
  Jess

• 

  kheswee_tan87

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi Troy,

  Got it. Thanks You so much. It’s work.

  Thank You.

  Regards,
  
  Jess

• 

  kheswee_tan87

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:48 am EST

  Hi Troy,

  Sorry. One more question. I used itemFormatter to format/change the chart line’s symbol/marker. But, the itemFormatter function seem like triggers so many times. My code is as per below:

  $scope.itemFormatter = function (engine, hitTestInfo, defaultFormat) {
  
  if (hitTestInfo.chartElement == wijmo.chart.ChartElement.SeriesSymbol) {

  if (hitTestInfo.name == “Point”) {
  
  if (hitTestInfo.value < 1.85) {
  
  hitTestInfo.series.symbolStyle.fill = “red”;
  
  hitTestInfo.series.symbolStyle.stroke = “black”;
  
  hitTestInfo.series.symbolStyle.strokeWidth = 1;
  
  hitTestInfo.series.symbolMarker = 0;
  
  hitTestInfo.series.symbolSize = 7;
  
  }
  
  else {
  
  hitTestInfo.series.symbolStyle.fill = “yellow”;
  
  hitTestInfo.series.symbolStyle.stroke = “black”;
  
  hitTestInfo.series.symbolStyle.strokeWidth = 1;
  
  hitTestInfo.series.symbolMarker = 1;
  
  hitTestInfo.series.symbolSize = 7;
  
  }
  
  defaultFormat();
  
  }
  
  }
  
  };

  Kindly advice why it triggers so many times and what is the solution? Am i missed out something?

  Thank You

  Regards,
  
  Jess