headshot0123
New Member
I've been struggling with a javascript charting script. To call the script, I have to place the following in the head:\[code\]<script type="text/javascript"> $(function(){ $('table').visualize({type: 'line'}); });</script>\[/code\]This script scrapes the table for data and then generates a pretty chart. All works fine, no problem. The problem is when I migrate it to the full website. I obviously have a number of tables on the page and this script attempts to scrape each and plce a chart immediately after. To combat this, I added a class to my target table of "charttable" and altered the above code to thus:\[code\]<script type="text/javascript"> $(function(){ $('.charttable').visualize({type: 'line'}); });</script>\[/code\]That now scrapes and generates the chart exactly where expected. The problem I now have is that the javascript it calls tries to draw and style the chart using various classes, which appear to be ignored, e.g. background colours all default to black, drawing of the x and y axis labels are all just placed on top of each other, etc. Example of javascript is below below\[code\]//function to create a chart var createChart = { pie: function(){ canvasContain.addClass('visualize-pie'); if(o.pieLabelPos == 'outside'){ canvasContain.addClass('visualize-pie-outside'); } var centerx = Math.round(canvas.width()/2); var centery = Math.round(canvas.height()/2); var radius = centery - o.pieMargin; var counter = 0.0; var toRad = function(integer){ return (Math.PI/180)*integer; }; var labels = $('<ul class="visualize-labels"></ul>') .insertAfter(canvas);\[/code\]each of these classes is styled by two style sheets, e.g.:\[code\].visualize { margin: 60px 0 0 30px; padding: 70px 40px 90px; background: #222 url(../images/chartbg.png) top repeat-x; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }.visualize canvas { border: 1px solid #888; margin: -1px; background: #222; }.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; }\[/code\]I've tried adding .charttable in front of all the entries in the stylesheets, thinking it would allow me to target the class and subclass, but that didn't work.I know that the script must be working at least partially correctly because it draws the chart with the headings and labels scraped from the table. It just won't draw the lines, correctly position the labels, or adhere to styling.Was I write to add and target the class of "charttable" instead of just the container?If no - is there another work around in terms of how I target the container?If yes - why are the stylesheets now being ignored?If the above makes no sense, I deeply apologies as I'm still learning Java...