title: how to use graph in symfony2?
body: <p>I make a forms of project I want to make gantt chart in symfony2. How can I make gantt chart in symfony2.3? Please give me suggestions.</p>
  
  <p>Here is a gantt chart sample:</p>
  
  <p><img src="https://i.stack.imgur.com/iX9Cr.jpg" alt="enter image description here"></p>
  
  <p>and here is my project table code:</p>
  
  <pre><code>{% extends '::base.html.twig' %}
  {% block body -%}
  &lt;title&gt;{% block title %}Projects&gt;Create Projects{% endblock %}&lt;/title&gt;
  {% block stylesheets %}
  &lt;link href="{{ asset('styles/bootstrap1.css') }}" rel="stylesheet" /&gt;
  &lt;link href="{{ asset('styles/uniform.default.css') }}" rel="stylesheet" /&gt;
  &lt;link href="{{ asset('styles/select2.css') }}" rel="stylesheet" /&gt;
  &lt;link href="{{ asset('styles/form-wizard.css') }}" rel="stylesheet" /&gt;
  &lt;style type="text/css"&gt;
  .btn {
   display: inline-block;
   padding: 4px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: normal;
   line-height: 1.428571429;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   margin:0 300px;
   margin-top: 20px;
   border: 1px solid transparent;
   border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     -o-user-select: none;
        user-select: none;          
   }
   #space{
    margin:0 70px;
    }
  .wizard-steps li {
  display: block;
  float: left;
  max-width: 25%;
  min-width: 20%;
  text-align: center;
  }
   &lt;/style&gt;
   {% endblock %}
   &lt;div id="fuelux-wizard" class="wizard row"&gt;
    &lt;ul class="wizard-steps"&gt;
         &lt;li data-target="#step1" class="active"&gt;
            &lt;span class="step"&gt;1&lt;/span&gt;
            &lt;span class="title"&gt;Create &lt;br&gt; Projects&lt;/span&gt;
         &lt;/li&gt;
         &lt;li data-target="#step2"&gt;
            &lt;span class="step"&gt;2&lt;/span&gt;
            &lt;span class="title"&gt;Milestones&lt;/span&gt;
         &lt;/li&gt;
         &lt;li data-target="#step3"&gt;
            &lt;span class="step"&gt;3&lt;/span&gt;
            &lt;span class="title"&gt;Tasklist&lt;/span&gt;
         &lt;/li&gt;
         &lt;li data-target="#step4"&gt;
            &lt;span class="step"&gt;4&lt;/span&gt;
            &lt;span class="title"&gt;Tasks&lt;/span&gt;
         &lt;/li&gt;
         &lt;li data-target="#step5"&gt;
            &lt;span class="step"&gt;5&lt;/span&gt;
            &lt;span class="title"&gt;Teams&lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;                            
    &lt;/div&gt;
  &lt;div id="space"&gt;
  &lt;h3&gt;Projects creation&lt;/h3&gt;
  &lt;form action="{{ path('projects_create') }}" method="post" {{ form_enctype(form) }}&gt;
      {{ form_widget(form) }}
      &lt;p&gt;
   &lt;button type="submit" class="btn btn-success"&gt; Next &lt;i class="icon-chevron-right"&gt;&lt;/i&gt; &lt;/button&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
    &lt;ul class="record_actions"&gt;
      &lt;li&gt;
          &lt;a href="{{ path('projects') }}"&gt;
              Back to the list
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
   {% endblock %}
   {% block javascripts %}
   &lt;script src="{{ asset('js/jquery-1.10.2.js') }}" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
       $("form").submit(function(e) {             
           e.preventDefault();
           var url = $(this).attr('action');
           var data = $(this).serialize();
           $.ajax({
              type: "POST",
              url: url,
              data: data,
           }).done(function( result ) {
              if(result.success) {
                  $('#result').css({'color':'black','background-color':'#8F8','display':'Block','width':'200px'});
                  $('#result').html('Projects Record Inserted');
                  setTimeout(function(){
                      $('#result').hide();
                      },3000);
              window.location.href = "{{ path('milestones_new') }}";
              }
           });
           this.reset();
       });
   });     
   &lt;/script&gt;
  
   {% endblock %}
  </code></pre>