Charts.js demo

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="product-linechart" data-labels="" data-charts="95.0,98.0,158.0,160.0,191.0,106.0,51.0,158.0,89.0,154.0-89.0,104.0,62.0,190.0,172.0,109.0,183.0,88.0,89.0,106.0-133.0,173.0,102.0,151.0,119.0,172.0,139.0,177.0,174.0,141.0-72.0,108.0,175.0,81.0,123.0,188.0,52.0,196.0,199.0,117.0-174.0,154.0,180.0,87.0,193.0,105.0,106.0,115.0,185.0,159.0-83.0,111.0,185.0,199.0,133.0,142.0,61.0,74.0,168.0,128.0-77.0,120.0,116.0,60.0,179.0,162.0,151.0,123.0,138.0,109.0-156.0,69.0,126.0,67.0,97.0,193.0,96.0,64.0,117.0,190.0-93.0,71.0,59.0,101.0,86.0,139.0,110.0,75.0,183.0,156.0" data-data_list="" width="1648" height="447" style="width: 1465px; height: 398px;" class=""></canvas>

JavaScript

var charts = $('#product-linechart').attr('data-charts').split('-');
var datasets = [];
charts.forEach(function (chart) {

  datasets.push({
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: chart.split('.')
  })
});

var data = {
  datasets: datasets,
  labels : ["10","20","30","40","50","60","70","80","90","100"]
};
new Chart(document.getElementById("product-linechart").getContext("2d")).Line(data, {
  responsive: true,
  maintainAspectRatio: false
});