[Bivek Singh]

@dsrebel

To render the chart each time with animation, you will need to create a new chart with updated options based on the value selected from dropdown. Code snippet below shows how you can achieve the same:

$( ".dropdown" ).change(function() {
  options.data[0].dataPoints = [];
  var e = document.getElementById("dropdownMenu");
  var selected = e.options[e.selectedIndex].value;
  dps = jsonData[selected];
  for(var i in dps) {
    var xVal = dps[i].x;
    options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y});
  }
  (new CanvasJS.Chart("chartContainer", options)).render();
});

Please take a look at this JSFiddle for a working example with sample code.

—-
Bivek Singh

• This reply was modified 7 years, 8 months ago by Bivek Singh.
• This reply was modified 3 years, 8 months ago by Shashi Ranjan.
• This reply was modified 3 years, 8 months ago by Shashi Ranjan.

[Bivek Singh]

@cancanvas

Are you looking for lineColor?

—–
Bivek Singh

[Bivek Singh]

Andrew,

Thank you for choosing CanvasJS. As of now, Zoom Out in steps is not available out of the box. It is on our road map but we don’t have a timeline for it yet. Meanwhile, you can easily achieve by programmatically changing viewportMinimum and viewportMaximum upon clicking zoom-back button. Please find the code-snippet below.

function back() {
  var viewportMinStack = chart.options.viewportMinStack;
  var viewportMaxStack = chart.options.viewportMaxStack;

  if(viewportMinStack.length > 1) {
    viewportMinStack.pop();
    viewportMaxStack.pop();
    axisX[0].viewportMinimum = viewportMinStack[viewportMinStack.length-1];
    axisX[0].viewportMaximum = viewportMaxStack[viewportMaxStack.length-1];
  }  else {
    axisX[0].viewportMinimum = null;
    axisX[0].viewportMaximum = null;
    backButton.style.visibility = "hidden";
  }

  chart.render();
}

backButton.addEventListener("click", back);

Please take a look at this JSFiddle for complete code.

—-
Bivek Singh

[Bivek Singh]

@mahi2000,

To highlight a dataPoint on mouse click, you can use the click property to set the click event handler which is triggered when user clicks on a dataPoint.
Upon event, you will get access to the selected dataPoint’s details. In the case of highlighting a dataPoint, you can use the event related data to change the selected dataPoint’s color property.

Please take a look at the code snippet below,

function onClick(e){
	if(!e.dataPoint.color) {
  	e.dataPoint.color = "red";
  } else {
  	e.dataPoint.color = null;
  }
  chart.render();
} 

Please take a look at this JSFiddle for an example with complete code for attaching click event to highlight datapoint.

—-
Bivek Singh

[Bivek Singh]

@veeru

Thank you for reporting this. We’ll fix this issue in future versions.

—-
Bivek Singh

[Bivek Singh]

Yael,

I’m sorry but as of now, this is not possible.

—-
Bivek Singh

[Bivek Singh]

@oneworld

You can change / set different properties of a chart using set method. In your case, using chart.axisX[0].set("interval", 4); will work.

—-
Bivek Singh

[Bivek Singh]

@cancanvas

Each chart needs its own container. Please have a look at this jsFiddle.

—-
Bivek Singh

[Bivek Singh]

Reynaldo,

You can set the color of entire series by using color property in dataSeries. There is no option to turn off multi-color option other than that.

——
Bivek Singh

[Bivek Singh]

@veeru

Methods and properties were introduced in v1.9.6 so this can’t be done with older versions. Please download the latest version from here.

——
Bivek Singh

[Bivek Singh]

@sptci

As of now, this feature is not available.

——
Bivek Singh

[Bivek Singh]

@veeru

As the axes automatically start from the lowest value in dataPoints, if you want all of your bubbles in full, you’d have to change the minimum and maximum values. Please take a look at this jsFiddle.

——-
Bivek Singh

[Bivek Singh]

@oneworld

I’m sorry but it is not possible as of now. But you can take a look at this jsFiddle which is something similar.

——
Bivek Singh

[Bivek Singh]

@ruwangika,

The selection area gets clear only when the mouse moves out of chart. When the mouse is still over the chart, it won’t clear the selected area. Can you kindly create a jsfiddle with the issue so that we can look into the issue and help you out?

——
Bivek Singh

[Bivek Singh]

@jonasbui1476

jQuery.isEmptyObject is used to check if the object is empty and doesn’t contain any properties. The JSON that you provided is actually an array of objects. So, you can check the length of an array to check if the JSON file that you obtained is empty or not.
Here is an updated jsFiddle for same.

——
Bivek Singh