Passing data and settings to charts directly from html file

You can pass data or settings to charts directly from html file. This can save you loading time and in some cases will be more comfortable.

Check examples amcolumn7.html or amline7.html from downloaded zip files.  Line chart uses XML data type and column chart – CSV.

All you need to do is set chart_data or chart_settings in your html file, for example:

Data in XML:

so.addVariable("chart_data", "<chart><series><value xid='0'>2000</value><value xid='1'>2001</value><value xid='2'>2002</value><value xid='3'>2003</value><value xid='4'>2004</value><value xid='5'>2005</value><value xid='6'>2006</value><value xid='7'>2007</value></series><graphs><graph gid='0' title='First title'><value xid='0'>6</value><value xid='1'>36</value><value xid='2'>34</value><value xid='3'>37</value><value xid='4'>48</value><value xid='5'>42</value><value xid='6'>29</value><value xid='7'>43</value></graph><graph gid='1' title='Second title'><value xid='0'>19</value><value xid='1'>6</value><value xid='2'>39</value><value xid='3'>25</value><value xid='4'>8</value><value xid='5'>40</value><value xid='6'>50</value><value xid='7'>10</value></graph></graphs></chart>");

Data in CSV:

so.addVariable("chart_data", "First;50\nSecond;80");

\n separates new lines (you can’t have real new lines here).

Settings:

so.addVariable("chart_settings", "<settings><background><color>#DADADA</color><alpha>100</alpha></background><labels><label><y>20</y><width>520</width><align>center</align><text><![CDATA[<b>Passing data and settings directly from html file example</b>]]></text></label></labels></settings>")

You can generate this data dynamically with php, asp or any other script.

There is one more variable – "additional_chart_settings". You can use it for appending some of settings to the loaded ones.

2 Responses to “Passing data and settings to charts directly from html file”

  1. Alec says:

    This feature is excellent. Works very well.

  2. amir says:

    … first this allows to include the chart in dynamic applications.
    ATTENTION:
    If you copy and paste the code above, make sure, that the single quotes are pasted correctly in your code.

    Thanks for this work.