-1

I am using c3 to draw some charts. Since c3 doesn't allow me to edit axis labels in the way I want, I am using jQuery to edit it after I load the chart. (FYI, I am trying to show 1-24, again 1-24 in the y axis instead of 1-48 hrs). Anyway I am unable to get this to work. I've put the code inside (document).ready.

<!-- jQuery -->
<script src="../jquery/dist/jquery.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        $("#c3-chart2").hide();

        $('input[type="radio"]').click(function() {
            if ($(this).attr("value") == "chart1") {
                $("#c3-chart2").hide();
                $("#c3-chart1").show();
            }
            if ($(this).attr("value") == "chart2") {
                $("#c3-chart1").hide();
                $("#c3-chart2").show();
            }
        });

        $("#button").click(function() {
            $("#c3-time-chart .c3-axis-y .tick text tspan").text("lol");
        }); 

        $("#c3-time-chart .c3-axis-y .tick text tspan").text("lol");

    });

<body> 
    The chart ids are here
</body>

<!-- C3 and D3 Charts-->
    <script src="../d3/d3.min.js" charset="utf-8"></script>
    <script src="../c3/c3.min.js"></script>
    <script src="../graphs/d3-test-data.js"></script>
    <script src="../graphs/c3-test-data.js"></script>

I tried to change the labels from google chrome console and it worked. I also added a button that will change the labels when I click on it. Both of them works like a charm. But somehow, I am unable to do this automatically once the page is loaded. All the similar questions had answers like put the code in (document).ready which I am already doing. Please help me with finding what the problem is.

mahacoder
  • 895
  • 3
  • 14
  • 29
  • 1
    Does jQuery library get loaded overall? Try placing a console.log() inside $(document).ready(...) to see if it enters it. – dchayka Oct 25 '15 at 05:05
  • be sure to run your plugin before the action you want to do – Mohamed-Yousef Oct 25 '15 at 05:06
  • 3
    Missing closing `` tag before `` ? Try placing `script src="../d3/d3.min.js" charset="utf-8">` and follwoing `script` tags after jQuery `script` tag – guest271314 Oct 25 '15 at 05:08
  • 1
    `$(document).ready()` has nothing to do with when C3 renders your charts. You need to run your code modifying the chart after the chart is created. That means after your C3 [`generate`](http://c3js.org/gettingstarted.html#generate) call, which you haven't included in your question. – T.J. Crowder Oct 25 '15 at 05:09
  • @guest271314 add that as an answer. I'm pretty sure that's the problem. Also, ak31 are there any errors in the console (debugging tools)? – dchayka Oct 25 '15 at 05:10
  • @T.J.Crowder I did try doing that in immediately after I used c3.generate. But that didn't work. That is why I tried $(document).ready() – mahacoder Oct 25 '15 at 05:51
  • @dchayka yes, jQuery is getting loaded. Also, no errors in the console. – mahacoder Oct 25 '15 at 05:53
  • @ak31: If doing it after `generate` didn't work, then you need to look at the C3 API for some kind of callback (though I can't see why they'd be doing this asynchronously). Worst case, you poll until you see the thing you need to change. – T.J. Crowder Oct 25 '15 at 06:02

1 Answers1

1

Document.ready fires off or the button click would never work. The issue is that Document.ready is firing when the document is completed but not necessary after all of the JavaScript is fired (such as the logic to create your d3 chart). So you need to run your text modification code after the chart is created.

A Pseudo code idea of how to obtain this is to run a setInterval that used jQuery to check if that node exists then set the value and destroy the interval but if the node doesn't exist then repeat the interval.

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
ioneyed
  • 1,052
  • 7
  • 12