jqwidgets / AspNetCore-Mvc-Tag-Helpers

6 stars 3 forks source link

Multiple valueAxis only uses last one #1

Open Bucktooth opened 7 years ago

Bucktooth commented 7 years ago

Adding a jqx-chart-value-axis to each jqx-chart-serie-group doesn't work as expected. The final value axis is applied to the jqx-chart level instead of the jqx-chart-serie-group level and others are missing.

@using jQWidgets.AspNetCore.Mvc.TagHelpers
@model HomeIndexViewModel
@{
    ViewData["Title"] = "Index";
    Padding padding = new Padding { Left = 5, Top = 5, Right = 35, Bottom = 5 };
    Padding titlePadding = new Padding { Left = 90, Top = 0, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle { Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings { Sufix = "%", DecimalPlaces = 2 };
    Title weightTitle = new Title { Text = "Weight (lbs)" };
    Title bodyFatTitle = new Title { Text = "Body Fat Percent (%)" };
    Title muscleMassTitle = new Title { Text = "Muscle Mass Percent (%)" };
}
<div class="example-description">Graph</div><br />
<jqx-chart style="width: 100%; height: 500px;" padding="padding" title-padding="titlePadding" title="Body Composition" description="Weight, Muscle Mass, and Body Fat Tracking" show-legend="true" legend-position="legendPosition" source="Model.Entries">
    <jqx-chart-x-axis datafield="EntryDateTime" type="AxisType.Date" base-unit="BaseUnit.Day"></jqx-chart-x-axis>
    <jqx-chart-series-groups>
        <jqx-chart-serie-group type="SerieType.Spline">
            <jqx-chart-value-axis title="weightTitle"></jqx-chart-value-axis>
            <jqx-chart-series>
                <jqx-chart-serie datafield="Weight"  display-text="Weight"></jqx-chart-serie>
            </jqx-chart-series>
        </jqx-chart-serie-group>
        <jqx-chart-serie-group type="SerieType.Spline">
            <jqx-chart-value-axis title="bodyFatTitle" position="right" visible="true"></jqx-chart-value-axis>
            <jqx-chart-series>
                <jqx-chart-serie datafield="BodyFatPercent" display-text="BF%" format-settings="formatSettings"></jqx-chart-serie>
            </jqx-chart-series>
        </jqx-chart-serie-group>
        <jqx-chart-serie-group type="SerieType.Spline">
            <jqx-chart-value-axis title="muscleMassTitle" position="right" visible="true"></jqx-chart-value-axis>
            <jqx-chart-series>
                <jqx-chart-serie datafield="MuscleMassPercent" display-text="MM%" format-settings="formatSettings"></jqx-chart-serie>
            </jqx-chart-series>
        </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

@section Scripts {
    <script src="~/lib/jqwidgets/jqxchart.js"></script>
}

The above code produces this chart.

<jqx-chart style=""><div description="Weight, Muscle Mass, and Body Fat Tracking" id="jqxChart41755f2c_2d10_4d09_ab2b_55cc55477778" legend-position="jQWidgets.AspNetCore.Mvc.TagHelpers.Rectangle" padding="jQWidgets.AspNetCore.Mvc.TagHelpers.Padding" show-legend="True" source="System.Linq.Enumerable+SelectEnumerableIterator`2[WeightGurus.Models.Entry,WeightGurus.Models.EntryListModel]" style="width: 100%; height: 500px;" title="Body Composition" title-padding="jQWidgets.AspNetCore.Mvc.TagHelpers.Padding"></div> <script type='text/javascript'>$(function () {
    var source= {
        dataFields: [ {
            name: 'EntryDateTime', type: 'date'
        }
        , {
            name: 'Weight', type: 'number'
        }
        , {
            name: 'BodyFatPercent', type: 'number'
        }
        , {
            name: 'MuscleMassPercent', type: 'number'
        }
        , {
            name: 'WaterPercent', type: 'number'
        }
        , {
            name: 'BodyFat', type: 'number'
        }
        , {
            name: 'MuscleMass', type: 'number'
        }
        ], dataType: 'array', localData: [ {
            'EntryDateTime': new Date(2016, 9, 13, 18, 29, 0, 0), 'Weight': 176.2, 'BodyFatPercent': 20, 'MuscleMassPercent': 42.7, 'WaterPercent': 59.1, 'BodyFat': 35.24, 'MuscleMass': 75.2374
        }
        , {
            'EntryDateTime': new Date(2016, 9, 26, 12, 55, 0, 0), 'Weight': 177.6, 'BodyFatPercent': 20.2, 'MuscleMassPercent': 42.6, 'WaterPercent': 59, 'BodyFat': 35.8752, 'MuscleMass': 75.6576
        }
        , {
            'EntryDateTime': new Date(2016, 9, 27, 14, 0, 0, 0), 'Weight': 178, 'BodyFatPercent': 20.4, 'MuscleMassPercent': 42.4, 'WaterPercent': 58.8, 'BodyFat': 36.312, 'MuscleMass': 75.472
        }
        , {
            'EntryDateTime': new Date(2017, 0, 16, 14, 49, 0, 0), 'Weight': 181.8, 'BodyFatPercent': 21.3, 'MuscleMassPercent': 42, 'WaterPercent': 58.2, 'BodyFat': 38.7234, 'MuscleMass': 76.356
        }
        , {
            'EntryDateTime': new Date(2017, 0, 17, 14, 57, 0, 0), 'Weight': 180.6, 'BodyFatPercent': 21, 'MuscleMassPercent': 42.1, 'WaterPercent': 58.4, 'BodyFat': 37.926, 'MuscleMass': 76.0326
        }
        , {
            'EntryDateTime': new Date(2017, 0, 18, 15, 0, 0, 0), 'Weight': 181.6, 'BodyFatPercent': 21.3, 'MuscleMassPercent': 42, 'WaterPercent': 58.2, 'BodyFat': 38.6808, 'MuscleMass': 76.272
        }
        ]
    }
    ;
    var adapter=new $.jqx.dataAdapter(source);
    var jqxChart41755f2c_2d10_4d09_ab2b_55cc55477778=new jqxChart($('#jqxChart41755f2c_2d10_4d09_ab2b_55cc55477778'), {
        padding: {
            left: 5, top: 5, right: 35, bottom: 5
        }
        , titlePadding: {
            left: 90, top: 0, right: 0, bottom: 10
        }
        , title: 'Body Composition', description: 'Weight, Muscle Mass, and Body Fat Tracking', showLegend: true, legendPosition: {
            left: 520, top: 140, width: 100, height: 100
        }
        , seriesGroups: [ {
            type: 'spline', series: [ {
                dataField: 'Weight', displayText: 'Weight'
            }
            ]
        }
        , {
            type: 'spline', series: [ {
                dataField: 'BodyFatPercent', displayText: 'BF%'
            }
            ]
        }
        , {
            type: 'spline', series: [ {
                dataField: 'MuscleMassPercent', displayText: 'MM%'
            }
            ]
        }
        ], valueAxis: {
            title: {
                text: 'Muscle Mass Percent (%)'
            }
            , position: 'right', visible: true, bands: []
        }
        , xAxis: {
            dataField: 'EntryDateTime', type: 'date', baseUnit: 'day', bands: []
        }
        , source: adapter
    }
    );
}

);
</script>
</jqx-chart>
todd-skelton commented 7 years ago

I'm having the same issue.