multi-series within multi-chart and together control zoom.

[Luis]

i need a step line chart for signal data. everyone have specific axes, we have over 5 charts for the series.
something like one for temperature, one for angel, one for speed….etc.
the X-axes is time stamp, i need to review this chart(s) on same time stamp (zooming or panning).
the final chart like a building , It has some floor. Every floor for one series data.
So, Can i do it in CanvasJS ??

[Suyash Singh]

@luispang,

Can you kindly provide us some pictorial representation or jsfiddle along with sample data of your requirement, so that we can understand it better and help you out?

___
Suyash Singh
Team CanvasJS

[Luis]

The simulation results as picture.

[Suyash Singh]

@luispang,

Please have a look at this jsfiddle.

___
Suyash Singh
Team CanvasJS

[Luis]

Hi Suyash,

Thank you for your help.
I’ve last two question.
1.Can i active crosshair axisX on each chart at same time?

2.Can i get the value of different between axis X two point ?

Luis Pang

[Indranil]

@luispang,

1.Can i active crosshair axisX on each chart at same time?

Please take a look at this jsfiddle to Sync crosshair across multiple charts.

2.Can i get the value of different between axis X two point ?

Do you mean to calculate the difference by selecting the two dataPoints? You can select dataPoints on click as shown in this jsfiddle.

___________
Indranil Deo,
Team CanvasJS

[Luis]

Hi; Indranil,

about 1. is ok, but when the mouse on second chart,the first chart is not work.
about 2. my mean is to calculate the difference by selecting the two dataPoints.

Luis

[Indranil]

Luis,

about 1. is ok, but when the mouse on second chart,the first chart is not work.

You can try triggering event for the first chart based on the event fired in the second chart. That should work fine in your case.

about 2. my mean is to calculate the difference by selecting the two dataPoints.

Please take a look at this jsfiddle.

___________
Indranil Deo,
Team CanvasJS

[Luis]

I need to use the cross hair on multi-series chart, and the chart number is a variable .
the code is follow:

<? for ($i=0;$i<count($selItem);$i++) { ?>

<script type=”text/javascript”>
$(function () {
var chart = new CanvasJS.Chart(“chartContainer<? echo $i ?>”, {

//width: 100%,
zoomEnabled: true,
animationEnabled: true,
//exportEnabled: true,

title: {
text: “<? echo $selMsgName[$i] ?>”
},
toolTip:{
shared: true
},
axisX:{
crosshair : {
enabled: true,
color: “orange”,
labelFontColor: “#F8F8F8”}
},

axisY:{
margin: 30,
interval: 1,
labelFormatter: function (e) {
return customLabel<? echo $i ?>(e.value);
},
crosshair : {
enabled: true,
color: “orange”,
labelFontColor: “#F8F8F8”},

},

data: [
{
type: “stepLine”,
connectNullData: true,
markerSize: 5,
dataPoints: [<? echo $data[$i] ?>]
}
]
});
chart.render();
});
</script>

<? } ?>

how can i do?

[Vishwas R]

@luispang,

Can you kindly share working sample along with sample data over Google-Drive or Onedrive, so that we can understand your requirements better and help you out?

—
Vishwas R
Team CanvasJS