jainish jainish - 3 months ago 8
HTML Question

how to display dynamically chart in each cell?

Dynamically need to generate id every time.
i did but i put hard code data.
again and again i call this code using different id, i want to do using loop, so any suggestion?

Can you suggest me how to do or any other method?

JS:

$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
//categories: ['Work Center 1']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [{
name: 'Booked Order',
data: [5]
}, {
name: 'Urgent Order',
data: [2]
}, {
name: 'Available',
data: [3]
}]
});
});


HTML:

<tbody>
<tr>
<td>Month1</td>
<td>
<div id="container" style="width: 250px; height: 200px; margin: 0 auto"></div>
</td>
<td>
<div id="container1" style="width: 250px; height: 200px; margin: 0 auto; "></div>
</td>
<td>
<div id="container2" style="width: 250px; height: 200px; margin: 0 auto; "></div>
</td>
<td>
<div id="container3" style="width: 250px; height: 200px; margin: 0 auto; "></div>
</td>
<td>
<div id="container4" style="width: 250px; height: 200px; margin: 0 auto; "></div>
</td>
</tr>
</tbody>

Answer

Something like this ??

$(function() {
  var chartData = {
    chart: {
      type: 'bar'
    },
    title: {
      text: ''
    },
    xAxis: {
      //categories: ['Work Center 1']
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'percent'
      }
    },
    series: [{
      name: 'Booked Order',
      data: [5]
    }, {
      name: 'Urgent Order',
      data: [2]
    }, {
      name: 'Available',
      data: [3]
    }]
  };

  $('div[id^=container]').each(function() {
    $(this).highcharts(chartData);
  });;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.6/highcharts.js"></script>
<tbody>
  <tr>
    <td>Month1</td>
    <td>
      <div id="container" style="width: 250px; height: 200px; margin: 0 auto"></div>
    </td>
    <td>
      <div id="container1" style="width: 250px; height: 200px; margin: 0 auto; "></div>
    </td>
    <td>
      <div id="container2" style="width: 250px; height: 200px; margin: 0 auto; "></div>
    </td>
    <td>
      <div id="container3" style="width: 250px; height: 200px; margin: 0 auto; "></div>
    </td>
    <td>
      <div id="container4" style="width: 250px; height: 200px; margin: 0 auto; "></div>
    </td>
  </tr>
</tbody>

Comments