• Resolved okp70

    (@okp70)


    Hello Massoud,
    I have one slight problem with your otherwise wonderful plugin:
    I can´t include two doughnut charts from chart.js in one page (i´m aware af the problems of using different libraries in the same post, but does this apply to charts from the same library?).

    I simply paste the shortcode with different chart snippets in to the document, but only the latter is shown…

    all the best
    Ole

    https://wordpress.org/plugins/blazing-charts/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Massoud Shakeri

    (@massoudshakeri)

    Hi,
    Would you please make sure you give a different ID to each div in both chart snippets.
    If it does not solve the problem, please let me know to investigate further.

    Thread Starter okp70

    (@okp70)

    Hi again,
    Thanks for quick respons. I´m sorry, but it doesn´t help: both divs and scripts are loaded in correct place, but only the latter chart is shown – in the first container btw.
    I have tried it on two different wp installations with the same result:

    The snippets:

    1:
    <div id=”canvas-holder-2″ style=”width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;”>
    <canvas id=”chart-area” width=”250″ height=”250″/>
    </div>
    <script>
    var doughnutData = [

    {
    value: 43667,
    color: “#ec8316”,
    highlight: “#ff8300”,
    label: “DM orange”
    },
    {
    value: 453,
    color: “#AF23A5”,
    highlight: “#9d3292”,
    label: “DM rosa”
    },
    {
    value: 80924,
    color: “#66008C”,
    highlight: “#522e91”,
    label: “DM lilla”
    },
    {
    value: 896,
    color:”#568E14″,
    highlight: “#5d9632”,
    label: “DM gron”
    },
    {
    value: 88,
    color: “#00829B”,
    highlight: “#0083a8”,
    label: “DM turkis”
    }
    ];
    window.onload = function(){
    var ctx = document.getElementById(“chart-area”).getContext(“2d”);
    window.myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {
    responsive:true, segmentShowStroke : true, segmentStrokeColor : “#fff”, segmentStrokeWidth : 2, percentageInnerCutout : 50
    });
    };
    </script>

    2:

    <div id=”canvas-holder-1″ style=”width:30%; direction:ltr; margin-left:auto; margin-right:auto; display:table;”>
    <canvas id=”chart-area” width=”250″ height=”250″/>
    </div>
    <script>
    var doughnutData = [

    {
    value: 10913 ,
    color: “#ec8316”,
    highlight: “#ff8300”,
    label: “DM orange”
    },
    {
    value: 2693,
    color: “#AF23A5”,
    highlight: “#9d3292”,
    label: “DM rosa”
    },
    {
    value: 4104,
    color: “#66008C”,
    highlight: “#522e91”,
    label: “DM lilla”
    },
    {
    value: 26832,
    color:”#568E14″,
    highlight: “#5d9632”,
    label: “DM gron”
    },
    {
    value: 21443,
    color: “#00829B”,
    highlight: “#0083a8”,
    label: “DM turkis”
    }
    ];
    window.onload = function(){
    var ctx = document.getElementById(“chart-area”).getContext(“2d”);
    window.myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {
    responsive:true, segmentShowStroke : true, segmentStrokeColor : “#fff”, segmentStrokeWidth : 2, percentageInnerCutout : 50
    });
    };
    </script>

    I have also tried with the polar example form your blog with the same result …

    I really hope you´re able to fix it, because the idea behind the plugin is very, very good…

    best regards
    Ole

    Plugin Author Massoud Shakeri

    (@massoudshakeri)

    Hi,
    the div that you introduce to both scripts to draw a chart on, is “chart-area”. so both scripts try to work on that div, which you have 2 instances of that in your page.
    please change the name of that div, both in html part and in the script, for the second script. This will fix the problem.

    Thread Starter okp70

    (@okp70)

    Hmmm, (sorry to bother you again) it sounds logical, but doesn´t seem to fix it here at my end: The mix up is solved: the second chart is shown in the right place now, but the first is invisible… everything is in the right place in the html and the right script is called, but noting is shown on the screen.

    best regards
    Ole

    Plugin Author Massoud Shakeri

    (@massoudshakeri)

    Hi,
    I added a post to the sample site to show how it works:
    http://blazingspider.com/wp-demo/164/chartjs-two-doughnut
    I hope this solves the problem.
    Best Regards

    Thread Starter okp70

    (@okp70)

    Thank you so much for taking your time, Massoud. Are you changing the structure of the wp-demo on your blog, because the posts are not showing?

    Best regards
    Ole

    Plugin Author Massoud Shakeri

    (@massoudshakeri)

    Hi,
    Thank you for letting me know that.
    The server went down and .htaccess files were removed accidentally. That’s why it did not show anything.
    I fixed it and I hope it works now.
    thanks again

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Two charts in one page (same library though)’ is closed to new replies.