chart circle not showing in fiddle due to svg

171 views Asked by At

I am trying to run chart in fiddle.. The problem, is its getting generated in svg.. in their main website i am able to see the chart... but in my fiddle i am not able to see the fiddle.. providing my code below... can you guys tell how to fix it

working code

http://chartjs.devexpress.com/Demos/VizGallery/#chart/circulargaugesbasicelementsscalelabelformatting

fiddle code

http://jsfiddle.net/TRjGa/

<div id="gauge" style="width: 60%; height: 100%; float: left;"></div>

    <script>
            $(function ()  
                {
   var html =
'<div id="gauge" style="width: 60%; height: 100%; float: left;"></div>\
<div id="panel" style="width: 40%; float: left; text-align: left; margin-top: 20px;">\
<table style="width: 100%;">\
    <tr>\
        <td><span>Main generator</span></td>\
        <td>\
            <span id="main-value-text"></span>\
            <input id="main-value-input" type="text" />\
        </td>\
    </tr>\
    <tr>\
        <td><span>Additional generator 1</span></td>\
        <td>\
            <span id="additional-value-1-text"></span>\
            <input id="additional-value-1-input" type="text" />\
        </td>\
    </tr>\
    <tr>\
        <td><span>Additional generator 2</span></td>\
        <td>\
            <span id="additional-value-2-text"></span>\
            <input id="additional-value-2-input" type="text" />\
        </td>\
    </tr>\
</table>\
<button id="toggle" style="width: 100px; font-size: 16px; margin-top: 20px;"></button>\
</div>';

$('#chartContainer').append(html);
1

There are 1 answers

0
Dan On BEST ANSWER

I have a jsfiddle here where I have taken the code from the website demo that you linked and the graph appears. All I have done is included http://cdn3.devexpress.com/jslib/13.1.5/js/dx.chartjs.js as an external resource and jQuery.

Apart from the invalid reference issues, as mentioned in the comments, I think there are quite a few other issues with what you have in your jsfiddle as well.

Here is what I did:

http://jsfiddle.net/xxxjz/1/

<svg id="chartContainer" style="width:100%;height: 600px"></svg>

Here is an updated version of your jsfiddle where I have removed all of the external resources from the jsfiddle, loaded jQuery and linked the external resource of dx.chartjs.js.

http://jsfiddle.net/TRjGa/2/