C3: Issue with multple charts

Created on 20 Jun 2014  路  8Comments  路  Source: c3js/c3

I am trying to display multiple charts on one page and for some reason on IOS mobile devices Safari browser (iphone and ipad) the charts randomly doesn't load all of them. It follows a weird pattern where the first time they all show up then when you refresh browser one of the charts won't show up. Then refresh again maybe two of the charts won't show. It isn't consistence everytime you refresh the page. Has anyone experience this issue before? If so what is the best way to fix this?

Here is my js code: 

  var chart1 = c3.generate({
    bindto: "#weight",
    data: {
      columns: [
        ["weight", 10, 4, 5, 3, 2, 5]
      ],
      colors: {
        weight: "#6ab153"
      },
      types: {
        weight: "area"
      }
    }
  });

  var chart2 = c3.generate({
    bindto: "#bodyfat",
    data: {
      columns: [
        ["bodyfat", 1,2,3,4,5,10 ]
      ],
      colors: {
        bodyfat: "#018aa1"
      },
      types: {
        bodyfat: "area"
      }
    }
  });

  var chart3 = c3.generate({
    bindto: "#bloodpressure",
    data: {
      columns: [
        ["systolic", 1, 3.5, 4.5, 2, 3.5],
        ["diastolic", 0.5, 2, 3, 0.5, 2.5]
      ],
      colors: {
        systolic: "#6ab153",
        diastolic: "#018aa1"
      },
      types: {
        systolic: "line",
        diastolic: "area"
      }
    }
  });

  var chart4 = c3.generate({
    bindto: "#glucose",
    data: {
      columns: [
        ["glucose", 80, 80, 90, 100, 40]
      ],
      colors: {
        glucose: "#6ab153"
      },
      types: {
        glucose: "area"
      }
    }
  });

Thanks

C-bug
Source
picture ghost

Most helpful comment

The append method works, but not that much. In my case, the chart is bigger than the container (vertically), and the data does not load in the second chart. Any reason why I cannot load two charts on one page? They are both different charts.

picture mikerockett on 21 Feb 2017
👍2

All 8 comments

I was also facing the same issue! I tried the following method.
If you have more than one chart of same properties then you can generalize the chart.
Like this:

function areaChart(div, data){
var chart1 = c3.generate({
        bindto: div,
        data: {
        columns:[data],
        colors: {
        weight: "#6ab153"
      },
      types: {
        weight: "area"
      }
    }
  });
}

Passing Data:

var obj=["weight", 10, 4, 5, 3, 2, 5];
areaChart('#myDiv',obj);
Sayli26 picture Sayli26 on 20 Jun 2014
👍1

So by doing this made it work on consistently?

ghost picture ghost on 20 Jun 2014

Hi, Thank you for looking into this. I'd like to confirm which version you're using. Is it the latest version and did you try the latest code on the repository?
And one more thing, does this happen on PC web browser also?

masayuki0812 picture masayuki0812 on 21 Jun 2014

@masayuki0812 - It works perfectly fine in all desktop browser even PC except the mobile safari browser. I am using version 0.2.1 Are you at version 0.2.4?

ghost picture ghost on 21 Jun 2014

I used latest version from the github repo and I am still getting the same issues. Any other suggestions I could try?

ghost picture ghost on 23 Jun 2014

Thank you for the detail, but I can't reproduce that situation now.. I used your JavaScript code above and simple html like this:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
  </head>
  <body>
    <div id="weight"></div>
    <div id="bodyfat"></div>
    <div id="bloodpressure"></div>
    <div id="glucose"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.min.js"></script>
    <script src="/js/test.js"></script> <!-- this includes your JS code -->
  </body>
</html>

Is it possible to show your html?

I experienced similar case before ( #336 some of charts are not drawn when multiple charts in a page), and that could be avoided by initializing without bindto like this:

var chart = c3.generate({
  ... // without bindto option
});
$(#id).append(chart.element);

This solution might work well in this case also.

masayuki0812 picture masayuki0812 on 24 Jun 2014

Wow apparently by doing 

var chart = c3.generate({
  ... // without bindto option
});
$(#id).append(chart.element);

That seems to work perfectly fine now :) Thank you soo much!

ghost picture ghost on 24 Jun 2014

The append method works, but not that much. In my case, the chart is bigger than the container (vertically), and the data does not load in the second chart. Any reason why I cannot load two charts on one page? They are both different charts.

mikerockett picture mikerockett on 21 Feb 2017
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Kreozot picture Kreozot  路  3Comments
laurentdebricon picture laurentdebricon  路  3Comments
wojciechowskid picture wojciechowskid  路  3Comments
DieterSpringer picture DieterSpringer  路  4Comments
alantygel picture alantygel  路  3Comments