Home forums Using CanvasJS multi-series within multi-chart and together control zoom.

Tagged: 

This topic contains 9 replies, has 4 voices, and was last updated by  Vishwas R 4 months, 2 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #18865

    Luis
    Member

    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 ??

    #18869

    Suyash Singh
    Participant

    @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

    #18874

    Luis
    Member

    Sample Charts

    The simulation results as picture.

    #18890

    Suyash Singh
    Participant

    @luispang,

    Please have a look at this jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

    #19896

    Luis
    Member

    Hi Suyash,

    Thank you for your help.
    I’ve last two question.
    1.Can i active crosshair axisX on each chart at same time?
    null
    2.Can i get the value of different between axis X two point ?
    null

    Luis Pang

    #19898

    Indranil Deo
    Member

    @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

    #19899

    Luis
    Member

    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

    #19921

    Indranil Deo
    Member

    @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

    #22053

    Luis
    Member

    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?

    #22056

    Vishwas R
    Keymaster

    @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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.