Jump to content

Mobile Main Form and Other Form Difference


jptec

Recommended Posts

HI,

 

I've integrated a fuschart into our project.

 

In My Testing all chart put in application main form. It can render correctly.

 

My setup is using TUnimHTMLFrame.Html and TUnimHTMLFrame.BeforeScript.

 

it is working perfect in Main form.

 

If  put that TUnimHTMLFrame into other form. In Main form use button click to show that form it wont show the chart.

 

it only show the html tag.

 

This is the TUnimHTMLFrame html property

<html>
<body bgcolor="#D26A02" >
  <div id="chartContainer2">FusionCharts XT will load here!</div>
  <div id="chartContainer3">New Chart!</div>
</body>
</html>

This is TUnimHTMLFrame.BeforeScript.

  FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
    type: 'area2d',
    renderAt: 'chartContainer2',
    width: '400',
    height: '250',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "showPlotBorder": "1",
            "plotBorderThickness": "2",
            "anchorBorderColor":"#E1D6FC",
            "anchorBgHoverColor":"#aa2911",
            "anchorRadius": "4",
            "anchorBorderThickness": "2",
            "showshadow": "0",
            //Using plot gradient color
            "usePlotGradientColor": "1",
            "plotBorderColor":"#EEDDFC",
            "plotFillColor":"#66acda",
            //Applying plot gradient color
            "plotGradientColor": "#FFFFFF",
            //Applying fill angle for plots
            "bgColor": "#23b14d",
            "bgAlpha": "0",
            "showValues": "0",
            "canvasBgAlpha": "0",
            "plotFillAngle": "90",
            //Applying fill ratio for plots
            "plotFillRatio": "20,70"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        },{
            "label": "Q5",
            "value": "1950000"
        }, {
            "label": "Q6",
            "value": "1450000"
        }, {
            "label": "Q7",
            "value": "1730000"
        }, {
            "label": "Q8",
            "value": "2120000"
        },{
            "label": "Q9",
            "value": "1950000"
        }, {
            "label": "Q10",
            "value": "1450000"
        }, {
            "label": "Q11",
            "value": "1730000"
        }, {
            "label": "Q12",
            "value": "2120000"
        },{
            "label": "Q13",
            "value": "1950000"
        }, {
            "label": "Q14",
            "value": "1450000"
        }, {
            "label": "Q15",
            "value": "1730000"
        }, {
            "label": "Q16",
            "value": "2120000"
        }
        ]
    }
}
);

    var fusioncharts = new FusionCharts({
    type: 'mscombi2d',
    renderAt: 'chartContainer3',
    width: '550',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Actual Revenues, Targeted Revenues & Profits",
            "subCaption": "Last year",
            "sYAxisName": "Amount (In USD)",
            "xAxisname": "Month",
            "sYAxisNameFont": "Arial",
            "sYAxisNameFontSize": "12",
            "sYAxisNameFontColor": "#003366",
            "sYAxisNameFontBold": "1",
            "sYAxisNameFontItalic": "1",
            "sYAxisNameAlpha": "50",
            "numberPrefix": "$",
            "usePlotGradientColor": "1",
            "plotGradientColor": "#FFFFFF",
            "anchorRadius": "4",
            "anchorBorderThickness": "2",
            "plotFillAngle": "90",
            "plotFillRatio": "20,70",
            "showPlotBorder": "0",
            "plotBorderThickness": "2",
            "theme": "fint"
        },
        "trendlines": [{
            "line": [{
                "startvalue": "12250",
                "color": "#0075c2",
                "displayvalue": "Previous{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Previous year quarterly target  : $13.5K"
            }, {
                "startvalue": "25950",
                "color": "#1aaf5d",
                "displayvalue": "Current{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Current year quarterly target  : $23K"
            }]
       }],
        "categories": [{
            "category": [{
                "label": "Jan"
            }, {
                "label": "Feb"
            }, {
                "label": "Mar"
            }, {
                "label": "Apr"
            }, {
                "label": "May"
            }, {
                "label": "Jun"
            }, {
                "label": "Jul"
            }, {
                "label": "Aug"
            }, {
                "label": "Sep"
            }, {
                "label": "Oct"
            }, {
                "label": "Nov"
            }, {
                "label": "Dec"
            }]
        }],
        "dataset": [{
            "seriesName": "Actual Revenue",
            "parentYAxis": "S",
            "renderAs": "area",
            "data": [{
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "18000"
            }, {
                "value": "19000"
            }, {
                "value": "15000"
            }, {
                "value": "21000"
            }, {
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "17000"
            }, {
                "value": "25000"
            }, {
                "value": "19000"
            }, {
                "value": "23000"
            }]
        }, {
            "seriesName": "Projected Revenue",
            "renderAs": "area",
            "parentYAxis": "S",
            "showValues": "0",
            "data": [{
                "value": "15000"
            }, {
                "value": "16000"
            }, {
                "value": "17000"
            }, {
                "value": "18000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "20000"
            }, {
                "value": "21000"
            }, {
                "value": "22000"
            }, {
                "value": "23000"
            }]
        }, {
            "seriesName": "Profit",
            "renderAs": "area",
            "showValues": "0",
            "data": [{
                "value": "4000"
            }, {
                "value": "5000"
            }, {
                "value": "3000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "7000"
            }, {
                "value": "1000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "8000"
            }, {
                "value": "2000"
            }, {
                "value": "7000"
            }]
        }]
    }
}
);

revenueChart.render();
fusioncharts.render();
})
 

Attached picture show u the case.

 

Any advise on that case how to solve it on ?

 

 

post-3755-0-86561900-1486626365_thumb.png

post-3755-0-98521200-1486626371_thumb.png

post-3755-0-25911200-1486626378_thumb.png

Link to comment
Share on other sites

  • 2 weeks later...
×
×
  • Create New...