Cannot get bar chart to display

Suite and Optimus Suite 5
#1

I’m trying to create a bar chart (horizontal).

I want “years” up the y-axis and “sales per product group” out the x-axis, so they there will be 2 horizontal bars (2010 and 2011) in the chart, segmented and colored by the sales elements.

My xml data string looks like this:

200000.00 2011 #FFEEDD99 100000.00 2010 #EEEEDD99 90000.00 2011 #DDEEDD99 70000.00 2010 #AAFFDD99 --------------

My chart is defined like this: (chartMax is the maximum value found in sales)

var barChart1 = new dhtmlXChart(
{
view:“stackedBarH”,
container:“chart_container1”,
value: “#sales#”,
color: “#color#”,
xAxis:{
start:0,
end:chartMax,
step:3,
template:“{obj}”,
title:“Sales”
},
yAxis:{
title:“Years”,
template:“#year#”
}
});

barChart1.load(data, "xml");

I get the following JS error from the browser:

Message: ‘responseText’ is null or not an object
Line: 108
Char: 69
Code: 0
URI: <…>/dhtmlxChart/codebase/dhtmlxchart.js

Anyone can tell me what I’m doing wrong here?

#2

Make sure that the path to xml file is correct. Moreover, there should be a top node in the xml:

200000.00 2011 #FFEEDD99 ....
#3

Sorry I seem to have left that out.

There is a data begin and end tag around the items.

Also, the data is in a javascript variable, not a file - I have printed it out so I know it is there and that it is formatted as described in the documentation.

#4

If you are loading from local var it must be parse, not load

barChart1.parse(data, "xml");
#5

the parse function fixed the problem, now I face another problem though and that is to configure the chart correctly.

The data I have consists of “sales amounts” for different “product groups” over “3 years” (2011, 2010, 2009).

What I want is to have a horizontal stacked bar chart, showing 3 stacked bars, 1 bar for each of the 3 years.
Each product group on the bar with a different color, like this:

  • 2011 -|aaaaaBBBBBccccDDDDDDeeeeFFFFFgggg
  • 2010 -|aaBBBBccccccccDDDeeeeFFFFggg
  • 2009 -|aaaaaaaaBBcccccDDDeeeFFFFgggg
          • |____________________________________________ 1.000.000,00

Here “aaaaaaa” means sales in product group 1, “BBBB” sales in product group 2 and so on.

Can anyone show me how I would define this behavior in the chart?

#6

I have the same problem.The html code is given below:


<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxchart.css">
<script>
<!--
window.onload = function() 
{
	var pieChart = new dhtmlXChart({
        view: "pie",
        container: "chart",
        value: "#sales#",
		label: "#year#",
		pieInnerText: "#sales#",
		gradient: true,
        legend: "#year#"
    });
	
	pieChart.load("sample.xml","xml");
	//pieChart.parse('<data><item id="1"><sales>7.3</sales><year>2008</year></item><item id="2"><sales>7.6</sales><year>2009</year></item></data>',"xml");
};
--></script>
</head>

<body>
<div id="chart" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
</body>

and the xml file is :


<?xml version="1.0"?>
<data>
   <item id="1">
       <sales>7.3</sales>
       <year>2008</year>
   </item>
   <item id="2">
       <sales>7.6</sales>
       <year>2009</year>
   </item>
</data>

if I use

instead of .parse() I get the error

If I use parse() there is no problem?? :nerd: The same xml is used, but dhtmlx chart does’nt like it when I load it from an xml file.

Please help
dhxsample.zip (849 Bytes)

#7

Make sure that you run sample under the webserver ( for example localhost/sample.html)