I can't manage my Layouts in my Laravel Project

Question

in my laravel application, i use this line to render a chart.

<div  id="chart-container">FusionCharts will render here</div>

I need to put two charts or maybe more in a row, but it's not working specially with this chart generator line.

i tried :

<div class="col-md-6" id="chart-container">FusionCharts will render here</div>
<div class="col-md-6" id="chart-container">FusionCharts will render here</div>

i tried :

<div class="col-md-12>
  <div class="col-md-6>
     <div id="chart-container">FusionCharts will render here</div>
</div>
   <div class="col-md-6>
      <div id="chart-container2">FusionCharts will render here</div>
   </div>
 </div>

Any help ? thanks you.

in HTML the `id` attribute needs to be unique but you have 2 divs with the same id here. that's just inviting problems — apokryfos, Sep 21 '18 at 10:24
please check out my eddited post, you can see an example, let's say i neet two of them in a single row. Hello sir, yes, it was just for the example, i use two differents id — yassine j, Sep 21 '18 at 10:39
This doesn't seem to be a laravel problem to me. Also, shouldn't there be some javascript involved? — Ron van der Heijden, Sep 21 '18 at 10:41
Of course yes, i use javascript to render the chart, i can make the chart smaller so two charts can fill in, but still not working.. — yassine j, Sep 21 '18 at 10:46
Are you sure you are using the correct IDs in your JavaScript? If you need two charts you will need to "run" the script for each element ID. — Sams, Sep 21 '18 at 12:12
check out this blog post - https://www.fusioncharts.com/blog/charts-laravel-web-application/ And you need to position the container accordingly using CSS to make it side by side — Zapdos13, Sep 24 '18 at 15:22

score 0 · Answer 1 · answered Sep 21 '18 at 12:19

I never used FusionCharts, but from the demo code in their website, you need to do something like this in your JavaScript:

FusionCharts.ready(function() {
   var myChart = new FusionCharts({
      type: "stackedcolumn2d",
      renderAt: "chart-container",
      width: "100%",
      height: "100%",
      dataFormat: "json",
      dataSource
   }).render();

   var myChart2 = new FusionCharts({
      type: "stackedcolumn2d",
      renderAt: "chart-container-2",
      width: "100%",
      height: "100%",
      dataFormat: "json",
      dataSource
   }).render();
});

This way you will render two different charts. Your HTML must look like this:

<div class="col-md-6" id="chart-container">FusionCharts will render here</div>
<div class="col-md-6" id="chart-container-2">FusionCharts will render here</div>

I can't manage my Layouts in my Laravel Project

1 Answers1