Как создать линейную диаграмму из таблицы HTML?

Question

Я новичок в этой концепции диаграммы и mvc. Я пытаюсь создать линейную диаграмму для данных таблицы в mvc. вот образец данных, которые я использую ..

<div class="panel-body table-responsive"> 
     <table id="dtView" class="table table-striped table-bordered table-response"> 
      <thead> 
       <tr> 
        <th class="text-center">Package Name</th> 
        <th class="text-center">Jan</th> 
        <th class="text-center">Feb</th> 
        <th class="text-center">Mar</th> 
        <th class="text-center">Apr</th> 
        <th class="text-center">May</th> 
        <th class="text-center">Jun</th> 
        <th class="text-center">Jul</th> 
        <th class="text-center">Aug</th> 
        <th class="text-center">Sep</th> 
        <th class="text-center">Oct</th> 
        <th class="text-center">Nov</th> 
        <th class="text-center">Dec</th> 
       </tr> 
      </thead> 
      <tbody> 

       <tr> 
        <td>Hyderabad</td> 
        <td>123151</td> 
        <td>234324</td> 
        <td>234234</td> 
        <td>12333</td> 
        <td>45644</td> 
        <td>2344</td> 
        <td>45666</td> 
        <td>2344</td> 
        <td>9877</td> 
        <td>3232444</td> 
        <td>344355</td> 
        <td>34555</td> 
        <td>345566</td> 

       </tr> 
       <tr> 
        <td>Bangalore</td> 
        <td>12321151</td> 
        <td>232214324</td> 
        <td>232334234</td> 
        <td>14342333</td> 
        <td>44555644</td> 
        <td>2334365644</td> 
        <td>45434666</td> 
        <td>2323344</td> 
        <td>98212177</td> 
        <td>32343532444</td> 
        <td>344545355</td> 
        <td>345323255</td> 
        <td>3455454566</td> 

       </tr> 
      </tbody> 
     </table> 
    </div> 

быть откровенным, я не знаю, как создать ... так, пожалуйста, помогите мне .. спасибо ..

Answer 1

Google имеет гладкий графический интерфейс API, который прост в использовании. Из Google Documentation:

<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Month', 'Hyderabad', 'Bangalore'], 
     ['Jan', 123151, 12321151], 
     ['Feb', 234324, 232214324], 
     ['March', 234234, 232334234] 
     //more data here 
    ]); 

    var options = { 
     //different options available 
     title: 'Company Performance', 
     curveType: 'function', 
     legend: { position: 'bottom' } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart.draw(data, options); 
    } 
</script> 

Слово предупреждения, некоторые из диаграмм могут не работать в IE8 и под. Это предполагает, что у вас есть контейнер с idcurve-chart, чтобы отобразить фактический график.