[Manoj Mohan]

@lucb,

Please take a look at this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@larry,

The behavior is designed such that zooming is limited upto a certain region, so that user doesn’t end up zooming into a blank-region (region with no dataPoints). To zoom into a certain region, there should be a minimum of 3-4 dataPoints over the axis.

In your case, the zoom doesn’t work as there are less than 3-4 dataPoints with different values over the axisY.

We will reconsider this behavior for future releases.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@fbahashwan,

To display the chart using set of year data on loop, you need to first create an array object as shown in below code snippet.

var data = [{
    "doughnut": [
      { label: "域名", y: 13 },
      { label: "主机", y: 13 },
      { label: "网站", y: 10 },
      { label: "安全设备", y: 6 },
      { label: "网络设备", y: 60 },
    ],
    "splineArea": [
      [
        { label: "00:00", y: 2000},
        { label: "03:00", y: 122},
        { label: "06:00", y: 3121},
        { label: "09:00", y: 54},
        { label: "12:00", y: 60},
        { label: "15:00", y: 2630},
        { label: "18:00", y: 1150},
        { label: "21:00", y: 2442},
        { label: "00:00", y: 1292}
      ],
      [
        { label: "00:00", y: 1130},
        { label: "03:00", y: 812},
        { label: "06:00", y: 1134},
        { label: "09:00", y: 2361},
        { label: "12:00", y: 413},
        { label: "15:00", y: 1330},
        { label: "18:00", y: 1301},
        { label: "21:00", y: 594},
        { label: "00:00", y: 1230}
      ],
      [
        { label: "00:00", y: 1220},
        { label: "03:00", y: 1132},
        { label: "06:00", y: 1421},
        { label: "09:00", y: 2114},
        { label: "12:00", y: 954},
        { label: "15:00", y: 620},
        { label: "18:00", y: 132},
        { label: "21:00", y: 190},
        { label: "00:00", y: 540}
      ]
    ]
  },
  .
  .
}]

You can update the chart data every 2 seconds by looping through above created array object and updating chart options. Please take a look at below code snippet for the same.

  
var i = 0;
function updateChart() {
    chart.options.data[0].dataPoints = jsonData[i].splineArea[0];
    chart.options.data[1].dataPoints = jsonData[i].splineArea[1];
    chart.options.data[2].dataPoints = jsonData[i].splineArea[2];
    chart1.options.data[0].dataPoints = jsonData[i].doughnut;
    chart.render();
    chart1.render();
    i = (i+1) % jsonData.length;
    setTimeout(updateChart, 2000);
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@zahid,

Sorry, it’s not possible to remove space between columns on zooming as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@zahid,

Sorry, it’s not possible to remove space between columns on zooming as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@vin_yd,

You can achieve your requirement in CanvasJS using bubble chart and date and time axis.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@gopi-nethi,

We are trying to show month-wise data in the Stacked Area graph. Months are displayed on the x-axis and data is displayed on the y-axis. But the start month is not displayed on the x-axis. Our requirement is Start Month should be displayed at start of the x-axis. Can you please suggest how to do that. For referece, see the jsfiddle link with example code

Sorry, it’s not possible to control the starting point of label, as of now.

Additionally, double quotes are not displayed on legends. I have given the legends data as below
name: “Inventory within \”Do Not Use\” period”.
My expectation is Do Not Use should be in quotes. But no quotes are displayed.

You can use unicode to display quotes in legend text as shown in this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@fbahashwan,

Please take a look at this gallery page for an example on creating dynamic charts in CanvasJS. Also, take a look at this documentation page for step-to-step tutorial on rendering multiple charts in a single page.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@radheshamheerasoftware-com,

We don’t have official npm package published yet, the npm package that you were using (v1.8.0) is not an official one. Please take a look at Angular Gallery for examples on integrating CanvasJS in Angular project. Also you can download sample project from our download page and run it locally to understand it better.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mwick,

Looping through the JSON and parsing it to the format accepted by CanvasJS before passing to the chart options should work fine in your case. Please take a look at this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@jaycincotta,

It’s not possible to control the starting point of label, as of now. We will reconsider this behaviour in future releases.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dmehta,

By setting dataPointWidth based on axis width and number of dataPoints in column chart, histogram chart can be rendered. Please take a look below code snippet for the same

chart.set("dataPointWidth",Math.ceil(chart.axisX[0].bounds.width/chart.data[0].dataPoints.length),true);

Please check this JSFiddle for complete code.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@jaycincotta,

Chart animates only on the first / initial render, as of now. We will re-consider this behavior for future releases.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Walterw,

Can you kindly share a sample csv so that we can reproduce the issue at our end and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@jfranco30,

You can use labelFormatter to format crosshair labels based on your requirement.

—-
Manoj Mohan
Team CanvasJS