Search code examples
javascriptzingchart

Zingchar - using rules with scatter chart

I am using zingchart's scatter chart to visualize my datas. I want to change color of some datas with value greater than for example 60. Is it possible? Here is my code, but it doesn't work:

var myConfig = {
            "type": "scatter",
            "plot": {
                "tooltip": {
                    "text": "%k (Date), %v (Value)."
                },
                "rules": [
                    {
                        "rule": "%v > 60",
                        "scatter-color": "#c00"
                    }
                ]
            },
            "series": [
                {
                    "values": c
                }
            ],
            "title" : {
                "text" : qualityData.ParameterName
            },
            "scale-x": {
                "zooming": true,
                "step": "1hour",
                "transform": {
                    "type": "date",
                    "all": "%d.%m.%Y %H:%i:%s"
                }
            },
            "scale-y": {
                "zooming": true,
                "markers": [
                    {
                        "type": "line",
                        "line-width": 2,
                        "text": "Lower tolerance",
                        "range": [qualityData.ToleranceMin, qualityData.ToleranceMin],
                        "line-color": "red"
                    },
                    {
                        "type": "line",
                        "line-width": 2,
                        "text": "Upper tolerance",
                        "range": [qualityData.ToleranceMax, qualityData.ToleranceMax],
                        "line-color": "red"
                    }
                ],
            },
            "preview": {
                "visible": true
            }
        };

And here is how my chart looks like: my scatter chart

Solution

  • Quick Fix

    You need to move rules into the plot.marker object and you need to change scatter-color to backgroundColor.

    Conditional Styling

    You can implement your conditional styling in two ways:

    1. rules
    2. jsRule

    rules attribute

    Define a rule like you have above and it will run an if statement on each node. You can have multiple rules and an easy semantic way to define conditional styling.

    jsRule attribute

    A Javascript alternative to rules which is much more performant. rules are an if statement that gets run every node. So if you have lots of nodes, you will have lot of code execution, thus slowing down your chart. 

    // window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    type: 'scatter',
    globals: {
      fontSize: '14px'
    },
    title: {
      text: 'A Simple Scatter Chart',
      fontSize: '24px'
    },
    legend: {
      cursor: 'hand',
      draggable: true
    },
    // plot represents general series, or plots, styling
    plot: {
      // hoverstate
      tooltip: {
        // % symbol represents a token to insert a value. Full list here:
        // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
        text: '%plot-text %kl was %v (°F)',
        padding: '10px 15px',
        borderRadius: '3px',
        // htmlMode renders text attribute as html so
        // ° is rendered
        htmlMode: true
      },
      // animation docs here:
      // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
      animation: {
        effect: 'ANIMATION_SLIDE_TOP',
        method: 'ANIMATION_BOUNCE_EASE_OUT',
        sequence: 'ANIMATION_BY_PLOT',
        speed: 375
      },
      lineWidth: '3px',
      // line node styling
      marker: {
        borderWidth: '0px',
        size: '6px',
        rules: [
          {
            rule: '%v > 40',
            backgroundColor: '#000'
          },
          {
            rule: '%v < 20',
            backgroundColor: '#000'
          }
        ],
      }
    },
    scaleX: {
      // set scale label
      label: {
        text: 'Days'
      },
      // convert text on scale indices
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    scaleY: {
      // scale label with unicode character
      label: {
        text: 'Temperature (°F)'
      },
      markers: [
        {
          type: 'line',
          lineWidth:2,
          range: [40],
          label: {
            text: 'Upper Tolerance'
          }
        },
        {
          type: 'line',
          lineWidth:2,
          range: [20],
          label: {
            text: 'Lower Tolerance'
          }
        }
      ]
    },
    series: [
      {
        values: [[1, 9], [2, 15], [3, 21], [4, 30], [5, 40], [6, 59], [7, 60], [8, 75], [9, 81], [10, 99]]
      },
      {
        values: [[0.9, 3], [2.1, 13], [3.5, 25], [4.9, 35], [5.3, 41], [6.5, 57], [7.1, 61], [8.7, 70], [9.2, 82], [9.9, 95]]
      },
      {
        values: [[0.1, 9], [1.8, 21], [1.9, 29], [4.1, 33], [4.5, 39], [6.9, 51], [7.4, 64], [8.9, 70], [9, 75], [9.3, 93]]
      },
      {
        values: [[0.3, 11], [0.9, 15], [1.1, 24], [2.3, 29], [2.9, 30], [3.3, 35], [5.6, 67], [6.9, 70], [7.3, 71], [8.9, 90]]
      },
      {
        values: [[0.5, 5], [1.9, 5], [2.5, 10], [3.1, 30], [6.5, 45], [6.9, 74], [7.2, 50], [7.8, 56], [8, 61], [8.5, 71]]
      }
    ]
  };

  // render chart
  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    height: '100%',
    width: '100%',
  });
});
    html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
    <!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    </div>
  </body>
</html>