Rank: Advanced Member
Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered Joined: 1/3/2011(UTC) Posts: 483
Thanks: 0 times Was thanked: 87 time(s) in 87 post(s)
|
If you look at this example: http://www.jqchart.com/jquery/chart/ChartData/XmlFileYou can change the content of the xml file to: Code:<?xml version="1.0" encoding="utf-8" ?> <ChartData> <Item label="A" value1="6" value2="3" /> <Item label="B" value1="4" value2="7" /> <Item label="C" value1="5" value2="8" /> <Item label="D" value1="9" value2="4" /> <Item label="E" value1="10" value2="8" /> <Item label="F" value1="7" value2="9" /> </ChartData> after that the JavaScript code should be something like: Code: var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white' }] };
$(document).ready(function () {
$.ajax({ url: "../ChartData.xml", dataType: "xml", success: function (xml) {
initChart(xml); } }); });
function initChart(xml) { var data1 = []; var data2 = [];
$(xml).find('Item').each(function () {
var label = $(this).attr("label"); var value1 = $(this).attr("value1"); var value2 = $(this).attr("value2");
data1.push([label, parseFloat(value1)]); data2.push([label, parseFloat(value2)]); });
$('#jqChart').jqChart({ title: 'Data From Xml File', border: { strokeStyle: '#6ba851' }, background: background, animation: { duration: 1 }, shadows: { enabled: true }, series: [ { title: 'Series 1', type: 'column', data: data1 }, { title: 'Series 2', type: 'column', data: data2 } ] }); } Best Regards, Dragan Matek jqChart Inc.
|