Skip to content

Instantly share code, notes, and snippets.

@nidheeshdas
Created September 14, 2013 07:24
Show Gist options
  • Save nidheeshdas/6559604 to your computer and use it in GitHub Desktop.
Save nidheeshdas/6559604 to your computer and use it in GitHub Desktop.
Convert AnyChart XML to JSON object.
(function(window){
var attrFn = function() {
if(arguments.length === 0) {
if(this.length === 0) {
return null;
}
var obj = {};
$.each(this[0].attributes, function() {
if(this.specified) {
obj[this.name] = this.value;
}
});
return obj;
}
return old.apply(this, arguments);
};
var process = function(e){
var out = attrFn.apply(e);
if($(e).children().length == 0){
if(Object.keys(out).length > 0)
return out;
return $(e).text();
}
$(e).children().each(function(x){
var t = $(this);
var tagName = $(t).prop('tagName');
var processed = process(t);
if(out[tagName]){
if(Array.isArray(out[tagName])){
out[tagName].push(processed);
}else{
var temp = $.extend(true, {}, out[tagName]);
out[tagName] = [temp, processed];
}
}else{
out[tagName] = processed;
}
});
return out;
}
window.convertAnyChartXMLToJSON = window.convertAnyChartXMLToJSON || function(xml) {
var output = {};
var sample = '<anychart> <settings> <animation enabled="true" /> </settings> <gauges> <gauge> <chart_settings> <title> <text><![CDATA[Combination of Circular, Thermometer and Indicator Gauges]]></text> </title> </chart_settings> <circular name="Main"> <styles> <color_range_style name="anychart_default" align="Center" start_size="4" end_size="4"> <fill type="Solid" color="%Color" opacity="0.7" /> <border enabled="true" color="Black" opacity="0.15" /> </color_range_style> </styles> <axis radius="50" start_angle="0" sweep_angle="180"> <scale minimum="0" maximum="100" major_interval="10" /> <scale_bar enabled="false" /> <labels enabled="true" align="Inside" rotate_circular="false"> <font family="Arial" size="11" bold="true" /> <format><![CDATA[{%Value}{numDecimals:0}]]></format> </labels> <color_ranges> <color_range start="0" end="5" color="Red" /> <color_range start="5" end="10" color="Red" /> <color_range start="10" end="15" color="Red" /> <color_range start="15" end="20" color="Red" /> <color_range start="20" end="25" color="Gold" /> <color_range start="25" end="30" color="Gold" /> <color_range start="30" end="35" color="Gold" /> <color_range start="35" end="40" color="Green" /> <color_range start="40" end="45" color="Green" /> <color_range start="45" end="50" color="Green" /> <color_range start="50" end="55" color="Green" /> <color_range start="55" end="60" color="Green" /> <color_range start="60" end="65" color="Green" /> <color_range start="65" end="70" color="Green" /> <color_range start="70" end="75" color="Green" /> <color_range start="75" end="80" color="Green" /> <color_range start="80" end="85" color="Green" /> <color_range start="85" end="90" color="Green" /> <color_range start="90" end="95" color="Green" /> <color_range start="95" end="100" color="Green" /> </color_ranges> </axis> <pointers> <pointer type="Needle" value="45.3" color="#F0673B"> <needle_pointer_style thickness="6"> <border color="Black" opacity="0.5" /> <effects enabled="True"> <drop_shadow enabled="true" distance="2" opacity="0.3" blur_x="2" blur_y="2" /> </effects> <cap radius="12"> <effects enabled="true"> <drop_shadow enabled="true" distance="2" opacity="0.3" blur_x="2" blur_y="2" /> </effects> </cap> </needle_pointer_style> <label enabled="true" under_pointers="true"> <position placement_mode="ByPoint" x="35" y="65" valign="Center" halign="Center" /> <font family="Arial" size="11" bold="true" color="#292929" /> <format><![CDATA[{%Value}{numDecimals:1} PSI]]></format> <background enabled="true"> <fill type="Solid" color="White" opacity="0.5" /> <border type="Solid" color="Gray" opacity="0.6" /> <corners type="Rounded" all="4" /> <effects enabled="false" /> <inside_margin left="7" top="2" right="7" bottom="2" /> </background> </label> <animation enabled="true" start_time="0" duration="0.7" interpolation_type="Cubic" /> </pointer> </pointers> <frame type="Circular" /> <labels> <label text_align="Center" under_pointers="true"> <position placement_mode="ByPoint" x="35" y="35" valign="Center" halign="Center" /> <font family="Arial" size="11" bold="true" color="#595959" /> <format><![CDATA[Pressure(PSI)]]></format> <background enabled="false" /> </label> </labels> </circular> <linear parent="Main" x="55" y="15" width="30" height="70"> <axis size="8"> <scale_bar> <effects enabled="false" /> </scale_bar> </axis> <pointers> <pointer type="Thermometer" value="23" color="Rgb(240,40,40)"> <animation enabled="true" start_time="0" duration="1" interpolation_type="Cubic" /> </pointer> </pointers> <labels> <label rotation="90"> <position placement_mode="ByPoint" x="65" y="5" valign="Bottom" /> <format><![CDATA[Temperature C°]]></format> <font family="Arial" size="11" bold="true" color="#595959" /> <background enabled="false" /> </label> </labels> </linear> <label parent="Main"> <position placement_mode="ByPoint" x="75" y="55" valign="Center" halign="Right" /> <format><![CDATA[Device State:]]></format> <font family="Arial" size="11" bold="true" color="#393939" /> </label> <indicator parent="Main" x="78" y="57" width="4" height="4"> <marker x="50" y="50" width="100" height="100" shape="Circle"> <fill type="Solid" color="Green" opacity="0.9" /> <border color="DarkColor(Green)" /> <effects enabled="true"> <bevel enabled="true" distance="2" shadow_opacity="0.5" highlight_opacity="0.5" /> </effects> </marker> </indicator> <indicator parent="Main" x="82" y="57" width="4" height="4"> <marker x="50" y="50" width="100" height="100" shape="Circle"> <fill type="Solid" color="Gold" opacity="0.4" /> <border color="DarkColor(Gold)" opacity="0.4" /> <effects enabled="true"> <bevel enabled="true" distance="2" shadow_opacity="0.5" highlight_opacity="0.5" /> </effects> </marker> </indicator> <indicator parent="Main" x="86" y="57" width="4" height="4"> <marker x="50" y="50" width="100" height="100" shape="Circle"> <fill type="Solid" color="Red" opacity="0.4" /> <border color="DarkColor(Red)" opacity="0.4" /> <effects enabled="true"> <bevel enabled="true" distance="2" shadow_opacity="0.5" highlight_opacity="0.5" /> </effects> </marker> </indicator> </gauge> </gauges></anychart>';
var input = $.parseXML(xml || sample);
$(input.children).each(function(){
var t = $(this);
output[t.prop('tagName')] = process(t);
});
return output;
}
}(window));
@JUnderwood1991
Copy link

Perhaps some documentation on how to use?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment