Chart data format

unified data format

Whether what type of chart you need to display, their data format is the same, which allows you to easily create a dynamic output XML formatted data server-side program.
In addition, the data definition file contains pure data, without any definition on chart display types and style, which is also in order to be able to use a unified output data server-side program. The definition of the type and style is set by adding the chart into the webpage¡¯s javascript statements. You can not even set, whereas let uses set the displaying model they like in the setting panel.

the data in forms of two-dimensional table

chart data, you can understand it as a two-dimensional table, for example, the following is a typical two-dimensional form:

Jan Feb Mar Apr
amount of sales volume of sales amount of sales volume of sales amount of sales volume of sales amount of sales volume of sales
North America 48.27 50 54.48 259 55.83 168 42.20 506
Asia 47.52 231 44.55 129 51.40 138 32.20 236
Europe 48.45 512 57.25 259 35.82 348 52.60 216
Central and South America 17.39 60 64.70 259 25.58 168 22.52 506
Australia 19.35 231 34.38 129 61.46 133 39.20 236

this two-dimensional form's XML output format is as follows: 

<?xml version='1.0' encoding='utf-8'?>
<graph title="Area of sale report" column_unit="Mouth">
  <row title="North America" info="">
    <column title="Jan">
	<data unit="US$ 1000" title="amount of sales" value="48.27" alt="US$ 48.27 thousand" info=""/>
	<data unit="piece" title="volume of sales" value="50" alt="" info=""/>
    </column>
    <column title="Feb">
	<data unit="US$ 1000" value="54.8" alt="" info=""/>
	<data unit="piece" value="259" alt="" info=""/>
    </column>
    <column title="Mar">
	<data unit="US$ 1000" value="55.82" alt="15.82ÍòÔª" info=""/>
	<data unit="piece" value="168" alt="" info=""/>
    </column>
    <column title="Apr">
	<data unit="US$ 1000" value="42.2" alt="" info=""/>
	<data unit="piece" value="506" alt="" info=""/>
    </column>
  </row>
  <row title="Asia" info="">
    <column title="Jan">
	<data unit="US$ 1000" value="47.2222" alt="5" info=""/>
	<data unit="piece" value="231" alt="" info=""/>
    </column>
    <column title="Feb">
	<data unit="US$ 1000" value="44.8" alt="" info=""/>
	<data unit="piece" value="129" alt="" info=""/>
    </column>
    <column title="Mar">
	<data unit="US$ 1000" value="51" alt="15.82" info=""/>
	<data unit="piece" value="138" alt="" info=""/>
    </column>
    <column title="Apr">
	<data unit="US$ 1000" value="32.2" alt="" info=""/>
	<data unit="piece" value="236" alt="" info=""/>
    </column>
  </row>
  ...
 </graph>

look at the corresponding between XML format with the two-dimensional table, you'll find, a <row/> tag in XML presents a row of the chart; <column/> tag is one column in the chart, and <data/> tag is a data item in the chart¡¯s lines and rows.
Data value is placed on the <data/> label,<row/>and<column/> record label is the title of the ranks.

  • <graph> - root node
  • <row> - a row, the corresponding symbols of a unit in the cutline
  • <column> -a line, corresponding to a unit in the level axis of histogram
  • <data> - a data item, corresponding to the upper left corner tab, when there is only one data label, do not show the tab

XML tags and attributes description 

<?xml version='1.0' encoding='utf-8'?>
<graph [ title="" column_unit=""]>
  <row title="" [ info=""]>
    <column title="">
		<data  value="" unit="" title="" [ alt="" info=""]/>
	</column>
  </row>
</graph>

Tag Attribute Instruction Range If necessary
graph title chart title displayed in the page, displays only when display_title = "true" String false
graph column_unit Column label¡¯s unit description, e.g., ¡°date¡± String false
row title row title, name showed in cutline String true
row grptype chart type of mixed column line chart column|line|curve false
row info content of setInfo method when clicking the cutline to transfer to pages String false
linerow
new 		title/type/info Used to achieve the dual coordinates special Row label, with the same attribute for "Row" label    
column title column title, namely, notes on level axis of histogram String true
column info content of setInfo method when clicking the cutline to transfer to pages String false
data unit units, such as U.S. dollars, 1000 U.S. dollars, only adopt the the attributes of the data labels of the first row, the first column; ignore other data nodes in order to reduce the redundancy String the first node is necessary
data title title of data item is characters appearing on the TAB, adopt the attributes of the data labels of the first row, the first column, ignore other data nodes in order to reduce the redundancy String the first node is necessary
data alt data item suggestion: the notes displayed by following the mouse when the mouse moved to the corresponding region of the graphics or over the lines String false
data value data values Number true
data info setInfo method content of passing to the designated page when clicking the corresponding chart element String false

JSON data format new

JSON (JavaScript Object Notation) is a lightweight data-interchange format.The DChart2.1 version adds support for JSON format, you can choose to use json or XML as the data source. Either with a return URL json or XML data as a data source, you can also assign a string or XML string json way to spread the chart component.

json, xml, mapping each other, and some tools to handle this conversion. Xml format and the same, for a variety of chart types, json format is the same, such as the following XML data and the corresponding JSON code:

<?xml version='1.0' encoding='utf-8'?>
<graph title="Unit Sales" column_unit="Product">
  <row title="New York"  info="Jan"]>
    <column title="Gym shoes" info="Gym shoes">
		<data  value="456" unit="Units" title="amount of sales" alt="456" info="456"/>
	</column>
  </row>
</graph>
XML 
{"graph":
	{"column_unit":"Product",
	"title":"Unit Sales",
	"row":[
		{"info":"Jan",
		"title":"New York",
		"column":[
			{"info":"Gym shoes",
			"title":"Gym shoes",
			"data":[
				{"alt":"456","info":"456","title":"amount of sales","unit":"Units","value":"456"}
			]
			}
		]
		}
	]
	}
}
JSON

Please note that these red square brackets, even if only a Row / column or data, also must use the "[]" expressed in the form of an array.

examples of several typical data

1.data with only one column

the following data has only one column (a <column/> label); it is clear that in this case, line charts and radar charts have only one point, so it should not be allowed to switch displaying charts to line charts and radar charts of no significance; this type of data only one best suited to the data shows that pie chart

Gym shoes
amount of sales
Jan 456
Feb 497
Mar 639
Apr 610
May 580
Jun 683

2.wrong data table

Some data have the following problems: in the second line, the U.S. dollar and the euro should have a different coordinate system, not be compared together; In addition, the maximum data gap among loans rose, upfront profit and Non-performing Loans have been so large, with unobviou relationship between the contrast. Therefore, the data should not be modeled according to the charts below, but adopt the following form of "data of only one row"

2008 0820 2008 0831 2008 0910 2008 0920 2008 0930 2008 1010 2008 1020 2008 1031 2008 1110 2008 1120 2008 1130 2008 1210 2008 1220 2008 1231
loans rose 180.70 179.26 178.99 181.16 181.47 181.12 181.12 183.36 182.94 176.42 177.78 184.73 188.66 186.98
Euro loans 102.86 101.33 100.33 102.63 102.93 109.15 103.56 103.79 104.09 98.65 99.96 106.41 112.47 110.16
dollars loans 11.36 11.4 11.51 11.52 11.50 13.41 11.52 11.65 11.54 11.38 11.36 11.46 11.15 11.24
upfront profit 1.15 1.21 1.24 1.28 1.40 1.55 1.91 1.68 1.88 2.10 2.19 2.18 2.20 2.21
NPLs 5.10 5.05 5.20 5.25 4.97 4.86 4.88 4.85 4.80 4.78 4.75 4.71 4.75 4.44

3.data of only one row (amendment to the above error)

The following charts¡¯ data changed the data forms of the above charts, to avoid wrong comparisons among different coordinate systems; there is only one <row/> label, and the pie chart does not make sense when there is only one row , so the displaying chart should not be allowed to switch to a pie chart without practical significance.

20080820 20080831 20080910 ...
loans rose Euro loans dollars loans upfront profit NPLs loans rose Euro loans dollars loans upfront profit NPLs loans rose Euro loans dollars loans upfront profit NPLs ...
loan balance 180.70 102.86 11.36 1.15 5.10 179.26 101.33 11.4 1.21 5.10 178.99 100.33 11.51 1.24 5.20 ...

4.Mixed chart of column lines

Sometimes we want to highlight the data of a certain row, such as in a histogram, when there are one or more rows displayed in lines or graphs, or one or more rows displayed by histogram in a lines or graph chart, this definition is closely related with the data, so the definition shall be filed in the data file (this is the only definition of attribute related to display).
When defining to prominently display a certain row, you need to add a type attributes for <row/> tag which is corresponding to the output xml, and assign a value of: column | line | curve; when the chart displayed as a histogram, assign <row/> of the column and still displays the column; whereas when the charts displays as line chart or graph, the corresponding <row/> displays as column, and vice versa.
Mixed column lines only affects column chart \ line chart \ curve chart work.

5.Double coordinates new

Dcharts 2.1 version adds the feature of dual coordinates. In the case of left main coordinate existence, the coordinate of the other dimension will be displayed at right side.

A, Column chart, stacked column chart, lines chart and curve chart support dual coordinates; The dual coordinates in bar chart, pie chart, radar chart and bar stacked chart are meaningless or can not be achieved. As the chart can be switched between many types, for example, a chart adopts dual coordinates, and it is recommened that the switching range of chart should be limited in the configuration;

B, For dualcoordinates, it only needs to add <linerow/> into the xml configuration file to replace <row/> . whenever <row/> is displayed properly, <linerow/> will be displayed as the right coordinate ;

C, If the chart is switched to a type that does not support dual coordinates, <linerow/> will not work, and only <row/> will be displayed in the chart;

D, Column and line are simultaneously displayed in non-dual coordinates: Even if the chart does not support dual coordinate, it can also be designated to be displayed as a line or a column based on the grptype property of <row> . For example, in the fourth graph at the right of sample.html, if label <linerow/> is added in the data , the original grptype property is inavailable. When the chart is a bar chart or a stacked column chart , all the data corresponding to <row/> is displayed as ?column ?and all the data corresponding to <linerow/> is displayed as line ; when the chart is a line chart or a curve chart, all the data corresponding to <linerow/> is displayed as column ?and all the data corresponding to <row/> is displayed as line .
Copyright 2003 - 2008 OriginSoft Components Inc. All rights reserved.