title: how to create dynamic chart js multiple line chart
body: <p>**hello guys please i'm stack and need your help i'm creating a chartjs multiple line chart but i want the label and the dataset to be dynamic as shown in the  first chart of the attached image i trid using the below code but i get the second chart in the image please help me i want it in a way that when the user add data it draws automatically please help me java web developers **</p>
  <p>This is my java code:</p>
  <pre class="lang-java prettyprint-override"><code>Gson gsonObj3 = new Gson();
  
  List&lt;Object&gt; list6 = new ArrayList&lt;Object&gt;();
  String dataPoints6 = null;
  
  try{
      Class.forName(&quot;com.mysql.jdbc.Driver&quot;); 
      Connection connection = DriverManager.getConnection(&quot;jdbc:mysql://localhost/cashoil&quot;,&quot;root&quot;,&quot;root&quot;);
      Statement statement = connection.createStatement();
      String xVal1, yVal1;
  
      ResultSet resultSet1 = statement.executeQuery(&quot;select * from sets&quot;);
  
      while(resultSet1.next()){
  
          yVal1 = resultSet1.getString(&quot;dataset&quot;);
          list6.add(yVal1);
          dataPoints6 = gsonObj3.toJson(list6);
  
      }
  
      connection.close();
  }
  catch(SQLException e){
      out.println(&quot;&lt;div  style='width: 50%; margin-left: auto; margin-right: auto; margin-top: 200px;'&gt;Could not connect to the database. Please check if you have mySQL Connector installed on the machine - if not, try installing the same.&lt;/div&gt;&quot;);
  
      dataPoints5 = null;
  }
  </code></pre>
  <p>and below is my javascript:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;canvas id=&quot;myChart&quot; width=&quot;600&quot; height=&quot;150&quot;&gt;&lt;/canvas&gt;         
  &lt;script type=&quot;text/javascript&quot;&gt;
  
  const fetchAsync = async() =&gt; {
      const response = await fetch(&quot;covid_us_states.json&quot;),
          keyValues = await response.json()
      return keyValues
  }
  
  fetchAsync().then(keyValues =&gt; {
      const time_labels = [&quot;January&quot;,&quot;February&quot;,&quot;March&quot;] ,
          states =&lt;%out.println(dataPoints5);%&gt;,
          covid_datasets = [],
          bg = [
              'rgba(27, 158, 119, 0.5)',
              'rgba(217, 95, 2, 0.5)',
              'rgba(117, 112, 179, 0.5)',
              'rgba(231, 41, 138, 0.5)',
              'rgba(102, 166, 30, 0.5)',
              'rgba(230, 171, 2, 0.5)',
              'rgba(166, 118, 29, 0.5)',
              'rgba(102, 102, 102, 0.5)'
          ],
          bc = [
              'rgb(27, 158, 119)',
              'rgb(217, 95, 2)',
              'rgb(117, 112, 179)',
              'rgb(231, 41, 138)',
              'rgb(102, 166, 30)',
              'rgb(230, 171, 2)',
              'rgb(166, 118, 29)',
              'rgb(102, 102, 102)'
          ]
  
          var dd = &lt;%out.println(dataPoints6);%&gt;
  
      for (let i = 1; i &lt; states.length + 1; i++) {
          covid_datasets.push({
              label: states[i - 1],
              data: Object.values(dd.slice(0,time_labels.length)),
              backgroundColor: bg[i - 1],
              borderColor: bc[i - 1]
          })
  
         console.log(dd.slice(0,time_labels.length));
      }
      const myNewChart = new Chart(document.getElementById('myChart'), {
          type: 'line',
          data: {
              datasets: covid_datasets,
              labels: time_labels
          },
          options: {
              scales: {
                  x: {
                      title: {
                          display: true,
                          text: 'Month'
                      },
                  },
                  y: {
                      title: {
                          display: true,
                          text: 'Profit'
                      }
                  }
              },
              plugins: {
                  title: {
                      display: true,
                      text: &quot;Branch&quot;,
                      font: {
                          size: 16
                      }
                  },
                  legend: {
                      display: true
                  }
              }
          }
      })
  })
  &lt;/script&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/oaxt8.png" rel="nofollow noreferrer">the top image is what i need</a></p>