Can't create multiple HBar charts on the same page


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Alina on 21st June 2017
Hello,

I need to create several charts on the same page but I only get the last one.
This is what I do (PHP):

...
foreach ($scores as $score){
     <prepare data for the chart>
     print_one_chart($category, $detail, $score_values, $score_labels);
}
...


function print_one_chart($ctg_name, $detail_name, $values, $labels){

$canvas_id=str_replace(' ', '_', 'cvs_'.$ctg_name.'_'.$detail_name);

echo '<canvas id='.$cvs_id.' width="600" height="450">[No canvas support]</canvas>';

$script_txt = "window.onload = function () {
    var chart = new RGraph.HBar('".$cvs_id."', [".implode(', ', $skill_values)."]);
    chart.Set('chart.title', '".$competency_name." - ".$skill_name."')
         chart.Set('chart.title.size', '10');
         chart.Set('chart.labels', ['".implode('\', \'',$labels)."']);
         chart.Set('chart.labels.above', true);
         chart.Set('chart.gutter.left', 125);
         chart.Set('chart.background.grid', false);
         chart.Set('chart.xlabels', false);
         chart.Set('chart.noxaxis', true);
         chart.Set('chart.scaleZerostart', true);
         chart.Set('chart.colors', ['#164366','#164366','#164366','#FDB515','#164366']);
         chart.Set('chart.colors.sequential', true);
         chart.Set('chart.text.size', 10);
         chart.Draw();
   }
";

echo '<br/>'.$script_txt.'<br/>'; // this is for debugging purposes: to make sure that the script text is correctly formed at each iteration

// this will actually insert the script into the page
echo "
<script>
   ".$script_txt."
</script>";
}

What I get is:
- all the expected canvases (visible in inspector) but rendered as empty areas on screen
- all the script textes echoed for debug, with the expected values
- the last canvas has the last chart correctly drawn.

imgur.com/a/6Rehh

I am very grateful for any idea, thank you in advance.
Posted by Richard on 21st June 2017
Hi there,

1. Have a look at your console to see if there's an error displayed. In Chrome you can press CTRL+SHIFT+J to see it.

2. Instead of sending me a screenshot, send me the *entire* source of the page so that I can copy it into a file on my desktop and run it.

3. I noticed you have quotes asaround a number when you are setting the title size property - don't do that - do this instead:

chart.Set('chart.title.size', 10);



Richard
Posted by Alina on 21st June 2017
Hey Richard,

Thank you for your answer, there was no error but I eventually figured out how to make it work properly: by replacing "window.onload" with "$(document).ready". The script is now:
 
   $(document).ready(function () {
    var chart = new RGraph.HBar ...
.
.
.
         chart.Draw();
   });

Thank you for the excellent RGraph chart.

Add a reply




« Back to message list