3

I have different libraries which I am trying to figure our which one works with multiple markers on same single series line chart.

Lets say 1 series is there v = [11, 12, 43, 21, 22]

I want point 11 to be rectangular, 12 to be concentric circle, 43 to be square and 21 and 22 be circle.

I tried going through the docs but could not find anything.

Please let me know if its possible on ZingChart, devexpress chart, telerik chart, flot chart, fusion chart or wijmo chart angularJs libraries.

Dreamweaver
  • 1,328
  • 11
  • 21

1 Answers1

3

You can do this with ZingChart very easily. We have a jsRule which allows you to define a function. Within the function you return our marker syntax to change the style of the marker or node as its most common name.

Another way is to explicitly code the syntax within our rules which is a hardcoded form of jsRule.

I have added both in the following demo. You can add any attributes from the marker object into the following syntax.

/*
 * callback argument format:
 {
   "id":"myChart",
   "graphid":"myChart-graph-id0",
   "graphindex":0,
   "plotid":"",
   "plotindex":0,
   "nodeindex":7,
   "key":7,
   "scaleval":7,
   "scaletext":"7",
   "value":85,
   "text":"%v",
   "ev":null
 }
 */
window.changeMarker = function(e) {
  // this function is called once for every node
  var returnObj = {
    type: 'square'
  }
  
  if (e.nodeindex % 2 == 0) {
    returnObj.type = 'star5';
    returnObj.backgroundColor = 'black';
    returnObj.size = 10;
  }
  // you can put any sort of logic to transform the marker nodes
  //console.log(JSON.stringify(e))
  return returnObj;
}
var myConfig = {
  type: 'line', 
 series: [
  {
   values: [35,42,67,89,25,34,67,85],
   marker: {
     jsRule: 'changeMarker()'
   }
  },
  { // you can also explicitly set them with rules
   values: [135,142,167,189,125,134,167,185],
   marker: {
     rules: [
       {
         rule: '%i == 0',
         type: 'square'
       },
       {
         rule: '%i == 1',
         type: 'triangle',
         size:10
       },
       {
         rule: '%i == 2',
         type: 'star5'
       },
       {
         rule: '%i == 3',
         type: 'diamond',
         backgroundColor: 'black'
       },
       {
         rule: '%i == 4',
         type: 'plus',
         size:15
       },
       {
         rule: '%i == 5',
         type: 'star3',
         size:12
       },
       {
         rule: '%i == 6',
         type: 'rpoly6',
         size:9
       },
       {
         rule: '%i == 7',
         type: 'star4',
         size: 6
       }    
     ]
   }
  }
 ]
};

zingchart.render({ 
 id: 'myChart', 
 data: myConfig, 
 height: '100%', 
 width: '100%' 
});
html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}
.zc-ref {
 display:none;
}
<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
 </body>
</html>

References:

https://blog.zingchart.com/2016/05/09/make-a-custom-tooltip/?q=make%20a%20custom%20tooltip%20in%20zingchart%20using%20functions

https://www.zingchart.com/docs/tutorials/chart-elements/create-javascript-rules/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/marker/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/rules/

nardecky
  • 2,623
  • 8
  • 18