Crosshair feature for Zing Chart is a processor leak

When I enable the crosshair feature in my chart, everything works fine in Chrome 56, but when I updated Chrome to 57 (even now chrome 58 and ZingChart 2.6.0), the CPU usage always exceeds 25% when dropping the chart, for example to see the crosshair ... When I have 2 diagrams, the CPU load goes up to 99% and the browser slows down and crashes quickly.

I tried to disable all features to find out what is the cause of this problem and when I disable the crosshairs the CPU usage is normal again. And if I disable everything except the crosshair function, the same cpu grabbing effect is observed.

The only way to free up resources is to end the tab.

Here is my code:

var dataChart = {
  id: "ShSDbePYhAxC",
  data: {
    type: "area",
    "crosshair-x": {
      "plot-label": {
        text: "The %t Series has a value of %v."
      }
    },
    gui: {
      behaviors: [
        {
          id: "Reload",
          enabled: "none"
        }
      ],
      contextMenu: {
        customItems: [
          {
            function: "zingAlert()",
            id: "zingAlert",
            text: "zing Alert"
          }
        ]
      }
    },
    item: {
      angle: -30
    },
    legend: {
      "background-color": "white",
      "border-color": "black",
      "border-radius": "5px",
      "border-width": 2,
      layout: "1xauto",
      padding: "10%",
      x: "12%",
      y: "90%"
    },
    plot: {
      alphaArea: 1,
      aspect: "spline",
      "bar-width": "15px",
      "contour-on-top": false,
      lineWidth: "2px",
      stacked: true,
      marker: {
        visible: false
      },
      tooltip: {
        visible: false
      }
    },
    plotarea: {
      "margin-bottom": "23%",
      "margin-left": "dynamic"
    },
    "scale-x": {
      item: {
        angle: -30
      },
      labels: [
        "Name0", "Name1", "Name2", "Name3", "Name4"
      ]
    },
    "scale-y": {
      label: {
        "font-size": "15%",
        text: "Number Of Visitors"
      }
    },
    series: [
      {
        text: "Text A",
        values: [11111, 222222, 3333333, 444444, 55555]
      },
      {
        text: "Text B",
        values: [6666, 777777, 88888, 99999, 12121212]
      }
    ]
  },
  height: 550,
  output: "canvas",
  width: "100%",
}

      

+3


source to share


1 answer


So, we tend to believe that this might be a problem with chrome and Angular. To confirm this, you can revert the zingchart version to an older version such as v2.2.2. You can reach this version via cdn at the following links.

Root directory: http://cdn.zingchart.com/2.2.2/

ZingChart.min: http://cdn.zingchart.com/2.2.2/zingchart.min.js



Modules: http://cdn.zingchart.com/2.2.2/modules/

If the problem still occurs, the problem is with the browser and Angular, and we know where to focus our efforts. If the problem goes straight from the ZingChart task.

+1


source







All Articles