[Vishwas R]

@adjmpw,

dataSeries are attached to either primary Y-axis (axisY) or secondary Y-axis (axisY2) by setting axisYType to “primary” or “secondary” respectively. Setting axisYType to “primary” and “secondary” in corresponding dataSeries should work fine in your case. Please find the updated code below:

axisX: {
	gridColor: "white",
	labelFontSize: 5,
	margin: 0,
	titleFontSize: 0,
	gridThickness: 0,
	tickLength: 0,
	lineThickness: 0,
	labelFormatter: function() {
		return " ";
	}
},
axisY: [{
	lineThickness: 0,
	tickLength: 0,

	labelFontSize: 12,
	labelFontColor: "#ccc",
	margin: 0,
	titleFontSize: 0,
	title: "Volume",
	gridColor: "white",
	includeZero: false,
}, {
	lineThickness: 0,
	tickLength: 0,
	title: "ginterest",
	labelFontSize: 12,
	labelFontColor: "#ccc",
	margin: 0,
	titleFontSize: 0,
	title: "oi",
	gridColor: "white",
	includeZero: false,
}

],
axisY2: [{
	lineThickness: 0,
	tickLength: 0,
	labelFontSize: 12,
	margin: 0,
	titleFontSize: 0,
	title: "price",
	gridColor: "white",
	includeZero: true,
}
],
data: [{
	lineThickness: 2,
	type: "scatter",
	name: "depth",
	axisYIndex: 0,
	axisYType: "secondary", //secondary y-axis will be shown towards left
	dataPoints: gdepth[id],
	markerSize: 4,
}, {
	markerSize: 0,
	lineThickness: 2,
	name: "price",
	type: "line",
	color: "black",
	axisYIndex: 2,
	dataPoints: gprice[id],
}, {
	fillOpacity: 0.1,
	markerSize: 0,
	lineThickness: 1,
	axisYType: "primary", //primary y-axis will be shown towards left
	name: "volume",
	type: "column",
	color: "black",
	dataPoints: gvolume[id],
}]

If you are still facing any issue, kindly create JSFiddle reproducing the issue you are facing so that we can look in to it and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mihaela,

Similar to how wheel event was attached to achieve zooming the chart with mouse-wheel, you need to attach keydown event to achieve on pressing any key in the keyboard. Please take a look at this JSFiddle. Please refer this stackoverflow thread for more information on key-codes.

Note: As JSFiddle has multiple panels (like HTML, JS, Result, etc), make sure you click somewhere in the result panel and then on top of chart once so that keyboard events are captured by chart.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mhdajmalik,

In the JSFiddle that you have shared, it’s not possible to observe dataPoints as you are setting markerBorderColor to white (same as chart background). In your scenario, dataPoints are too close that the marker-border of one dataPoint is rendered on top of marker of another dataPoint. Either by removing markers when there are too-many dataPoints in the viewport (which is a default behavior) or removing markerBorderColor / markerBorderThickness should work fine in your case. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tedadradro,

You can use scale-breaks to remove space between dataPoints and allow dataPoints accommodate more space within the plot-area. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@bhaktaonline,

Thanks for reporting the use-case. We are looking into the issue and will get back to you at the earliest.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@rajesh,

CanvasJS Charts seems to be working fine with Angular. Please take a look at this sample project and check-out Gallery for more examples.

If the issue still persists, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive, so that we can run it locally at our end to understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@tedadradro,

Thanks for reporting the use-case. As of now, columns/dataPoints are getting disappeared when the values are pretty small compared to the axis range. In future versions, we will consider limiting the height of the column to a minimum pixel value so that it’s visible even in-case of smaller values.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@cikadpm,

As of now, x-value can either be numeric or a dateTime whereas y-value should be number. We observe that you are passing both the values as string, changing it to numeric or dateTime values should work fine. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@pwang,

We don’t have down-sampling function built-in, as of now. However on rangeChanging event you can update number of dataPoints to be displayed as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@mihaela,

You can zoom the chart using mousewheel by attaching wheel event to the chart. Please find the code snippet below.

document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("wheel", function(e){
  e.preventDefault();
  
  if(e.clientX < chart.plotArea.x1 || e.clientX > chart.plotArea.x2 || e.clientY < chart.plotArea.y1 || e.clientY > chart.plotArea.y2)
  	return;
    
  var axisX = chart.axisX[0];
  var viewportMin = axisX.get("viewportMinimum"),
      viewportMax = axisX.get("viewportMaximum"),
      interval = axisX.get("minimum");

  var newViewportMin, newViewportMax;

  if (e.deltaY < 0) {
    newViewportMin = viewportMin + interval;
    newViewportMax = viewportMax - interval;
  }
  else if (e.deltaY > 0) {
    newViewportMin = viewportMin - interval;
    newViewportMax = viewportMax + interval;
  }

  if(newViewportMin >= chart.axisX[0].get("minimum") && newViewportMax <= chart.axisX[0].get("maximum") && (newViewportMax - newViewportMin) > (2 * interval)){
    chart.axisX[0].set("viewportMinimum", newViewportMin, false);
    chart.axisX[0].set("viewportMaximum", newViewportMax);
  }

});

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@snehal,

If you don’t like to use userId and just use customerName from database, you need to parse data received from database accordingly. Here is the updated code for your scenario.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@maheshbapathi,

In my project it was not displaying any values on graph
I have 2 columns on my table names as stock on x-axis and head in y-axis and name of the table name as db.kpi
Let me know why it was not displaying any data

The sample project that you have shared is not working as it doesn’t include all dependency files. However when I looked into view (index.cshtml), you seemed to be creating new chart instance on every update. I would suggest you to create chart instance once and update dataPoints on every update and re-render the chart.

I have tried your example again there should be some bugs
If i try to change the any value on database which i have already created is not updating on graph and in the same way delete also not working

While updating chart dataPoints, you can empty dataPoints array and update it according to the updated data which you receive from database as shown in this updated sample project.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@snehal,

You can modify SQL query to get the count of status and other parameters accordingly. Please take a look at this updated code where customers and status of the complaints are grouped based on userId – which is considered as x-value to the dataPoint (In multiseries charts, data-points are grouped based on common x-values).

—
Vishwas R
Team CanvasJS

[Vishwas R]

@maheshbapathi,

Please take a look at this sample project in ASP.Net MVC which updates chart data every 2seconds (which can be changed as per your requirements) by reading data from database.

Considering this thread as duplicate of Auto refresh Graph with some particular time duration, hence closing it.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@maheshbapathi,

Please take a look at this sample project in ASP.Net MVC which updates chart data every 2seconds (which can be changed as per your requirements) by reading data from database.

—
Vishwas R
Team CanvasJS