How to create a multi line chart with with dynamic x and y axis in one graph using chart js?

Sachin

I want to create a multi line chart with dynamically changing values of x and y axis.Value for my Y axis are

traverse1 = [10,20,30,45,65,98]
traverse2 = [10,36,56,44,60,100]
traverse3 = [55,65,90,49,55,13]
traverse4 = [59,68,95,59,35,15]

Values for my X axis are

 master = [0.1,0.2,0.3,0.5,,0.6]

All the values of X and Y will change dynamically by user. I have tried to plot a graph but after changing the value dynamically my graph looks something like this grah. My graph.

As you can see in the graph that for each line there is a seperate labels for X axis. What I want is common x axis for all the lines in the graph. Below Is the code that I have used to plot the graph.

function chartCall(master, traverse1, traverse2, traverse3, traverse4)
{
    var canvas = document.getElementById("barChart");
    var ctx = canvas.getContext('2d');

    // Global Options:
    Chart.defaults.global.defaultFontColor = 'black';
    Chart.defaults.global.defaultFontSize = 16;

    var dataFirst = {
            label: "Traverse 1",
            data: traverse1,
            borderColor: "rgb(151,187,205)",
          };

        var dataSecond = {
            label: "Traverse 2",    
            data: traverse2,
            borderColor: "rgb(220,220,220)",
          };

        var dataThird = {
                label: "Traverse 3",
                data: traverse3,
                borderColor: "rgb(247,70,74)",

              };

        var dataFourth = {
                label: "Traverse 4",
                data: traverse4,
                borderColor: "rgb(70,191,189)",
              };

        var speedData = {
                  labels: master,
                  datasets: [dataFirst,dataSecond,dataThird,dataFourth]
                };

    // Chart declaration:
    var myBarChart = new Chart(ctx, {
      type: 'line',
      data: speedData,
      options: {}
    });
}
WhiteHat

the chart seems to draw fine with the code posted in the question,
even after changing the values and calling again.

see following working snippet,
click the button to update the chart with different values...

$(document).ready(function() {
  var traverse1 = [10,20,30,45,65,98];
  var traverse2 = [10,36,56,44,60,100];
  var traverse3 = [55,65,90,49,55,13];
  var traverse4 = [59,68,95,59,35,15];
  var master = [0.1,0.2,0.3,0.5,,0.6];

  chartCall(master, traverse1, traverse2, traverse3, traverse4);

  document.getElementById('update').addEventListener('click', function () {
    var traverse1 = getRandomValues(6);
    var traverse2 = getRandomValues(6);
    var traverse3 = getRandomValues(6);
    var traverse4 = getRandomValues(6);
    var master = [0.1,0.2,0.3,0.5,,0.6];
    chartCall(master, traverse1, traverse2, traverse3, traverse4);
  });

  function chartCall(master, traverse1, traverse2, traverse3, traverse4) {
    var canvas = document.getElementById("barChart");
    var ctx = canvas.getContext('2d');

    // Global Options:
    Chart.defaults.global.defaultFontColor = 'black';
    Chart.defaults.global.defaultFontSize = 16;

    var dataFirst = {
      label: "Traverse 1",
      data: traverse1,
      borderColor: "rgb(151,187,205)",
    };

    var dataSecond = {
      label: "Traverse 2",
      data: traverse2,
      borderColor: "rgb(220,220,220)",
    };

    var dataThird = {
      label: "Traverse 3",
      data: traverse3,
      borderColor: "rgb(247,70,74)",
    };

    var dataFourth = {
      label: "Traverse 4",
      data: traverse4,
      borderColor: "rgb(70,191,189)",
    };

    var speedData = {
      labels: master,
      datasets: [dataFirst,dataSecond,dataThird,dataFourth]
    };

    // Chart declaration:
    var myBarChart = new Chart(ctx, {
      type: 'line',
      data: speedData,
      options: {}
    });
  }

  function getRandomValues(length) {
    var values = [];
    for (var i = 0; i < length; i++) {
      values.push(Math.random() * 10);
    }
    return values;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<input id="update" type="button" value="Update Chart" />
<canvas id="barChart"></canvas>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to hide the y axis and x axis line and label in my bar chart for chart.js

Using custom dataformat in chart.js for Multi Axis Line Chart

How can I create a horizontal scrolling Chart.js line chart with a locked y axis?

How to create Stacked Line Chart in chartjs Multiple Y Axis and common X Axis

Chart.js - How to create a different global configuration between the x axis and the y axis

SSRS Line Chart Dynamic Y Axis

How to plot line chart with more than one variable in X and Y axis

Chart.js - Plot line graph with X , Y coordinates

How to create bar and line chart in one chart using ggplot

How to create a Line Chart with a scaled X Axis and Dummy Variables

c3js: How to add a vertical line to a vertical bar chart that is not one of the categories of the x-axis?

How to make Chart.js with dynamic months on x-axis

Chart.Js- y-axis line is misplaced on line chart

Create line chart with column titles on X axis

Can't generate multi-axis combo chart (bar/line) using chart.js 2.7

How to remove the Chart.js x Axis bottom line?

How to toggle one of multiple y axis on chart.js

Chart JS - Line chart with days in x-axis

Display a limited number of labels only on X-Axis of Line Chart using Chart.js

How to shift the origin along y-axis direction in a chart.js3 line chart, so that x-axis pass through a different point other than (0,0)?

How to create a grouped bar chart (by month and year) on the x-axis and values on the y-axis using matplotlib.pyplot?

chart.js: hide specific ticks in y-axis and hide all x-axis grid line

How do I customize y-axis labels on a Chart.js line chart?

Chart.js annotation horizontal line on double y-axis graph

Map one column to x axis second to y axis in excel chart

How to create multi-series line chart

Chart.js - Plot line graph with X , Y coordinates and connected by line

Chart.js with dual axis on bar and line graph

How to create a stacked JavaFX Chart, with multiple Y Axis and common X Axis