Hello,

I have been experimenting with Fusion Chart.

I have been following this tutorial: https://www.fusioncharts.com/dev/chart-guide/getting-started/using-xml-as-data-format

and trying to take the chart data from xml yet it does not works.

bar_chart_xml.html

<html>
<head>

<!--<script src="angularjs-plugin/wrappers/angularjs/angular-fusioncharts.min.js"></script>
<script src="angular.js"></script>
-->
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>

<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
    FusionCharts.ready(  function  () { 
        var  csatGauge =   new  FusionCharts({
            "type" :  "angulargauge",
            "renderAt" :  "chart-container",
            "width" :  "400",
            "height" :  "250",
            "dataFormat" :  "json",
            "dataSource" :  {
                "chart" :  {
                    "caption" :  "Customer Satisfaction Score",
                    "subcaption" :  "Last week",
                    "lowerLimit" :  "0",
                    "upperLimit" :  "100",
                    "theme" :  "fint"
                },
                "colorRange" :  {
                    "color" :  [{
                            "minValue" :  "0",
                            "maxValue" :  "50",
                            "code" :  "#e44a00"
                        },
                        {
                            "minValue" :  "50",
                            "maxValue" :  "75",
                            "code" :  "#f8bd19"
                        },
                        {
                            "minValue" :  "75",
                            "maxValue" :  "100",
                            "code" :  "#6baa01"
                        }
                    ]
                },
                "dials" :  {
                    "dial" :  [{
                        "value" :  "67"
                    }]
                }
            }
        });

        csatGauge.render();
    });
</script>
</head>
<body>

<script type="text/javascript">
FusionCharts.ready(  function  () { 
    var  myChart =   new  FusionCharts({
        "type" :  "column2d",
        "renderAt" :  "chartContainer",
        "width" :  "500",
        "height" :  "300",
        "dataFormat" :  "xml",
        "dataSource" :  "<chart caption='Harry\'s SuperMart' subcaption='Monthly revenue for last year' xaxisname='Month' yaxisname='Amount' numberprefix='$' palettecolors='#008ee4' bgalpha='0' borderalpha='20' canvasborderalpha='0' useplotgradientcolor='0' plotborderalpha='10' placevaluesinside='1' rotatevalues='1' valuefontcolor='#ffffff' captionpadding='20' showaxislines='1' axislinealpha='25' divlinealpha='10'><set label='Jan' value='420000' /><set label='Feb' value='810000' /><set label='Mar' value='720000' /><set label='Apr' value='550000' /><set label='May' value='910000' /><set label='Jun' value='510000' /><set label='Jul' value='680000' /><set label='Aug' value='620000' /><set label='Sep' value='610000' /><set label='Oct' value='490000' /><set label='Nov' value='900000' /><set label='Dec' value='730000' /></chart>"
    });

    myChart.render();
});
</script>

</head>

<body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
</body>

</body>
</html>

chartdata.xml

<chart caption='Harry' s SuperMart ' subcaption='Monthly revenue for last year ' xaxisname='Month ' yaxisname='Amount ' numberprefix='$ ' palettecolors='#008ee4 ' bgalpha='0 ' borderalpha='20 ' canvasborderalpha='0 ' useplotgradientcolor='0 ' plotborderalpha='10 ' placevaluesinside='1 ' rotatevalues='1 ' valuefontcolor='#ffffff ' captionpadding='20 ' showaxislines='1 ' axislinealpha='25 ' divlinealpha='10 '>
  <set label='Jan ' value='420000 ' />
  <set label='Feb ' value='810000 ' />
  <set label='Mar ' value='720000 ' />
  <set label='Apr ' value='550000 ' />
  <set label='May ' value='910000 ' />
  <set label='Jun ' value='510000 ' />
  <set label='Jul ' value='680000 ' />
  <set label='Aug ' value='620000 ' />
  <set label='Sep ' value='610000 ' />
  <set label='Oct ' value='490000 ' />
  <set label='Nov ' value='900000 ' />
  <set label='Dec ' value='730000 ' />
</chart>

All I get is invalid data.

That's the message. How to address the xml file ?

Recommended Answers

All 2 Replies

Your mistake is here caption='Harry' s SuperMart '

Ah, FusionChart! I'm a big fan. That's what we use for DaniWeb member profiles as well as the stats features on Dazah. As Andris pointed out, the bug is in chartdata.xml

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.