how to use graph in symfony2?

Question

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.

Here is a gantt chart sample:

and here is my project table code:

{% extends '::base.html.twig' %}
{% block body -%}
<title>{% block title %}Projects>Create Projects{% endblock %}</title>
{% block stylesheets %}
<link href="{{ asset('styles/bootstrap1.css') }}" rel="stylesheet" />
<link href="{{ asset('styles/uniform.default.css') }}" rel="stylesheet" />
<link href="{{ asset('styles/select2.css') }}" rel="stylesheet" />
<link href="{{ asset('styles/form-wizard.css') }}" rel="stylesheet" />
<style type="text/css">
.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;
}
 </style>
 {% endblock %}
 <div id="fuelux-wizard" class="wizard row">
  <ul class="wizard-steps">
       <li data-target="#step1" class="active">
          <span class="step">1</span>
          <span class="title">Create <br> Projects</span>
       </li>
       <li data-target="#step2">
          <span class="step">2</span>
          <span class="title">Milestones</span>
       </li>
       <li data-target="#step3">
          <span class="step">3</span>
          <span class="title">Tasklist</span>
       </li>
       <li data-target="#step4">
          <span class="step">4</span>
          <span class="title">Tasks</span>
       </li>
       <li data-target="#step5">
          <span class="step">5</span>
          <span class="title">Teams</span>
       </li>
   </ul>                            
  </div>
<div id="space">
<h3>Projects creation</h3>
<form action="{{ path('projects_create') }}" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form) }}
    <p>
 <button type="submit" class="btn btn-success"> Next <i class="icon-chevron-right"></i> </button>
    </p>
</form>
<div id="result"></div>
  <ul class="record_actions">
    <li>
        <a href="{{ path('projects') }}">
            Back to the list
        </a>
    </li>
</ul>
</div>
 {% endblock %}
 {% block javascripts %}
 <script src="{{ asset('js/jquery-1.10.2.js') }}" type="text/javascript"></script>
 <script type="text/javascript">
  $(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();
     });
 });     
 </script>

 {% endblock %}

Answer 1

You should use javascript for this purpose, for example:

http://www.fusioncharts.com/goodies/fusioncharts-free/chart-gallery/show.asp?id=44 http://almende.github.io/chap-links-library/ http://dansgreenshoes.com/2012/12/03/html-javascript-gantt-libraries/