8.31.2012

Coldfusion 10 and HTML Charts Some Styling Examples

CF 10 now uses ZingCharts.   Here's an examlpe of using the new json strings to format the chart.   You can figure these out using the ZingChart Builder.

<cfscript>
    plotLine = {
        "url":"http://www.gotsme.one/", 
            "animate":true,
            "speed":0.8,
            "effect":4,
            "tooltip-text":"%v %t"
    };
    plotArea ={
        "width":550,
        "height":150,
        "position":"0% 0%",
        "margin-top":60,
        "margin-right":50,
        "margin-left":50,
        "margin-bottom":65
    };
    legendStyle = {
"position":"100% 10%",
            "margin-top":10,
            "margin-right":10,
            "margin-left":10,
            "margin-bottom":10,
            "layout":"x1",
            "draggable":false,
            "minimize":false,
            "item":{
                "toggle":true,
                "margin-top":5,
                "margin-right":10,
                "margin-left":10,
                "margin-bottom":5
            }
    };
    labelStyle = { 
// An array of structs used to display custom text or images on the chart, for example author or chart information
    };
tooltipStyle = {
// A struct of keys used to style the tool tip such as background, font, or border.
};
preview = {
        "visible":true,
        "width":550,
        "height":30,
        "position":"5% 100%",
        "margin-top":10,
        "margin-right":50,
        "margin-left":10,
        "margin-bottom":15,
        "handles":{
        }
// A struct of keys such as visible and margin to control chart preview.  (zoom box at bottom)
};    
</cfscript>



<cfchart
legend="#legendStyle#"
plot="#plotLine#"
plotArea="#plotArea#"
preview="#preview#"
format="html"  
showlegend="true"
height="300"
width="900" 
title="Your Title Here" 
show3d="no" >


<cfchartseries 
label="Some Label" 
query=" Some_Query " 
itemcolumn="Some_Column_Name_For_Item"
valuecolumn="Some_Column_Name_For_Value" 
paintstyle="shade"
type="line" />

</cfchart>