[Indranil]

@jse,

Glad that you were able to figure it out. You can just update the chart options/data and call chart.render for creating a dynamic chart instead of destroying and re-instantiating it.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@sksingh20,

You can display temperature of each location as individual dataseries of the chart, also known as multiseries chart. And humidity in another chart. The sample data(as shared above) can be categorized based on the location parameter and stored as a JSON object. Below is the code snippet for categorizing the data –

for(var i=0; i<data.length; i++){
    if(data[i].e in categorizedData)
      categorizedData[data[i].e].push({x: data[i].x, y: data[i][parameter], e: data[i].e});
    else
      categorizedData[data[i].e] = [{x: data[i].x, y: data[i][parameter], e: data[i].e}];
  }

Then you can use the same JSON object to populate charts based on the categorized data. Please take a look at this JSFiddle for an example.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@jse,

We have tested the destroy() and it seems to be working fine.

Can you kindly create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out?

___________
Indranil Deo
Team CanvasJS

[Indranil]

@ekaqu1028,

Glad that you figured out a way to make it work.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@charthelpplz,

The StackBlitz shared above seems to be working fine. Please refer to the screenshot below.

If you are still facing issue, kindly create an example reproducing the issue in StackBlitz and share it with us so that we can look into the code, understand the scenario better and help you resolve.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@charthelpplz,

You can achieve the above requirement by passing the CanvasJSChart component on button click. Please take a look at this StackBlitz for an example.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@xmanhattan,

You can achieve the above requirement by positioning multiple charts next to each other. Please take a look at this JSFiddle for an example.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@bfailing,

Based on the range of y-axis the chart is rendering too many labels which is causing the browser to freeze. You can workaround it by setting the minimum, maximum, and interval for axisY. Please check this JSFiddle for the same.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@bfailing,

Thanks for clearing the scenario. We will look into this further and get back to you at the earliest.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@bfailing,

It seems to be working fine except that y-axis range is not being shown, which can be worked out by setting the minimum of axisY. Please check this JSFiddle for an example.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@sohailchattha786,

Please take a look at this sample project for an example on rendering multi series chart from database in PHP.

An Instruction file has been included for your convenience with instructions to set up the project.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@kamaliyavishal,

You can get the minimum and maximum of slider whenever slider range is changed using rangeChanged event.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@kamaliyavishal,

To retain the value after page refresh you can store it either in localStorage or sessionStorage or cookie. Please take a look at this stackoverflow thread for more information.

___________
Indranil Deo
Team CanvasJS

[Indranil]

@kamaliyavishal,

Can you please create and share a JSFiddle reproducing the issue, so that we can look into your code, understand the scenario better and help you out?

___________
Indranil Deo
Team CanvasJS

[Indranil]

@ezsanji,

Please take a look at this JSFiddle for an example on rendering CanvasJS Charts within Bootstrap Carousel.

___________
Indranil Deo
Team CanvasJS