Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with multple charts #382

Closed
ghost opened this issue Jun 19, 2014 · 8 comments
Closed

Issue with multple charts #382

ghost opened this issue Jun 19, 2014 · 8 comments
Labels
C-bug Category: This is a bug

Comments

@ghost
Copy link

ghost commented Jun 19, 2014

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
@Sayli26
Copy link

Sayli26 commented Jun 20, 2014

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);

@ghost
Copy link
Author

ghost commented Jun 20, 2014

So by doing this made it work on consistently?

@masayuki0812
Copy link
Member

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?

@ghost
Copy link
Author

ghost commented Jun 21, 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
Copy link
Author

ghost commented Jun 23, 2014

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

@masayuki0812
Copy link
Member

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.

@ghost
Copy link
Author

ghost commented Jun 24, 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 ghost closed this as completed Jun 24, 2014
@janiceleng janiceleng mentioned this issue Feb 19, 2015
Closed
@mattty mattty mentioned this issue Feb 23, 2015
Open
@mikerockett
Copy link

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.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C-bug Category: This is a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@masayuki0812 @Sayli26 @mikerockett