CODEWITHSUNDEEP
amchartsangularjs-material
DanC12
DanC12

Reputation: 364

AmChart not appearing in md-dialog

I have an AmChart that I want to appear in an md-dialog. It's passed a JSON dataProvider and yet nothing appears.

dialog.tmpl.html:

    <md-dialog aria-label="Project Zone Chart">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>Project Zone Chart</h2>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="closeDialog()">
                    <md-icon aria-label="Close dialog">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content>
                <p><div id="projZoneChart" style="width: 100%; height: auto;"></div></p>
        </md-dialog-content>
</md-dialog>

controller.js:

 var projZoneChartOps = {
        type: "serial",
        valueAxes: [{
            minorGridAlpha: 0.08,
            minorGridEnabled: true,
            position: "top",
            gridAlpha: 0,
            precision: 0
        }],
        startDuration: 1,
        graphs: [{
            type: "column",
            fillAlphas: 1,
            lineAlpha: 0,
            valueField: "value",
            colorField: "color",
            lineAlpha: 0
        }],
        rotate: true,
        categoryField: "metric",
        categoryAxis: {
            gridPosition: "start",
            parseDates: false,
            gridAlpha: 0
        }
    };


createChart($scope.chartdata, projZoneChartOps);
function createChart(chartData, chartOps){
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;

However nothing appears in the dialog at all. Is there a problem with my chartOps?

Note: the chartData variable is a JSON object with two fields, startOfWeek (supposed to be the x-axis) and metric (supposed to be the y-axis)

Upvotes: 0

Views: 339

Answers (1)

xorspark
xorspark

Reputation: 16012

There are a few issues/comments:

1) Why aren't you assigning the data to the chartOps object before calling makeChart? 

chartOps.dataProvider = chartData;
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);

This will actually make the chart start off with your data. The way you're doing it will require that you call validateData() on your chart object after manually setting the dataProvider, which is unnecessary overhead compared to including it directly in makeChart.

$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData; 
$scope.projZoneChart.validateData(); //required if you're doing it this way but unneccessary overhead compared to simply including it inside of makeChart directly as you're essentially remaking the chart after you create it for the sake of rendering your data.

2) Make sure your *field properties match. startOfWeek isn't mentioned in your chart config at all, even though you're saying it's in your JSON data. Your valueField is set to "value" - you might want to set it to "startOfWeek" instead unless you're modifying your JSON object somewhere else.

3) Displaying charts inside a modal or other dynamic/hidden elements typically require that you call the chart object's invalidateSize method when the modal/tab/etc containing the chart is visible so that it will render correctly. You'll want to check for whatever event md-dialog offers to determine when it is visible before calling $scope.projZoneChart.invalidateSize().

Upvotes: 2

Related Questions