Show bar on grid line - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bar, chart, jqxChart, line, stackedcolumn, type, valuesOnTicks

This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Show bar on grid line Posts

September 30, 2013 at 9:28 am Show bar on grid line #29825

Snehal

Participant

Hello,

I have set “valuesOnTicks: true ” to show bars on grid lines, but the first bar starts on value axis and last bar on last line which shows first and last bar half…

please let me know if any solution for this.

Thanks & Regards,

Snehal

October 1, 2013 at 6:13 am Show bar on grid line #29903

Dimitar

Participant

Hello Snehal,

Please provide us with a code sample which demonstrates the reported issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 1, 2013 at 7:14 am Show bar on grid line #29920

Snehal

Participant

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title id='Description'>jqxChart Stacked Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        valuesOnTicks: true,
                        showTickMarks :true,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                colorScheme: 'scheme06',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' },
                                    { dataField: 'Cycling', displayText: 'Cycling' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width:680px; height:400px;"/>
</body>
</html>

October 1, 2013 at 11:26 am Show bar on grid line #29957

Dimitar

Participant

Hi Snehal,

The property valuesOnTicks should be set to true only for chart type “line”. It is not intended for other chart types.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 1, 2013 at 11:48 am Show bar on grid line #29970

Snehal

Participant

Hi Dimitar,

I have used valuesOnTicks property for chart type “line” also, but there is also the same issue, that line’s first point starts on value axis.. which is exactly the same thing that is happening with bar chart.

Regards,

Snehal

October 2, 2013 at 5:23 am Show bar on grid line #30013

Dimitar

Participant

Hi Snehal,

In “line” chart type, this is not an issue but the intended functionality – the values are displayed on the ticks and the first tick coincides with the value axis.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 3, 2013 at 3:56 am Show bar on grid line #30099

Snehal

Participant

Hi Dimitar,

I have already asked question for this in forum, that line chart starts on value axis. I want to set its values on ticks but, don’t want its starts point on value axis..what needs to do for that, any solution ?

http://www.jqwidgets.com/community/topic/line-chart-starts-on-value-axis/

Please , provide any solution for this.

Thanks & Regards,
Snehal

October 3, 2013 at 5:18 am Show bar on grid line #30105

Dimitar

Participant

Hi Snehal,

Unfortunately, we cannot provide you with any other solutions than the ones in the Line Chart starts on value axis forum topic.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.