[Manoj Mohan]

@mwick,

Please take a look at this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@norricorp,

You can use secondary axisY to achieve your requirement.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@humby

It seems that jQuery is not included in your project. Please take a look at this link to import jQuery.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@shreekanthb28,

Sorry, exporting chart data as a CSV file is not available as an inbuilt feature as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@humby

It seems that jQuery is not included in your project. Please take a look at this link to import jQuery.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@larry,

In the JSFiddle that you have shared, it’s possible to zoom as the region gets validated since zoomType is set to ‘xy’. In this case, the zoomed region is valid because of number of dataPoints over axisX. And in the previous JSFiddle that has been shared the region is getting invalidated because of axisY.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@jaycincotta,

Chart animates only on the first/initial render, as of now.

I’ve read the guidance that the chart would need to be recreated on each update so that the animation would occur on first render

To achieve the above requirement, you can destroy and re-create the chart as shown in this example.

—-
Manoj Mohan
Team CanvasJS

[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