jQuery UI Widgets Forums Chart valueAxis.unitInterval necessary for 1 data point

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • rtessler
    Participant

    when drawing a bar chart with 1 data point
    nothing is drawn unless we specify unitInterval
    this is not the case if the series contains 2 values
    see example

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>jqxChart Column Series Example</title>
    <link rel=”stylesheet” href=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../js/libs/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxchart.core.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare chart data as an array
    var source = [{ Country: “Spain”, GDP: 100, DebtPercent: 10, Debt: 1 }];

    var dataAdapter = new $.jqx.dataAdapter(source);
    // prepare jqxChart settings
    var settings = {
    title: “Economic comparison”,
    description: “GDP and Debt in 2010″,
    showLegend: true,
    enableAnimations: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘Country’,
    gridLines: { visible: true },
    valuesOnTicks: false
    },
    colorScheme: ‘scheme01’,
    columnSeriesOverlap: false,
    seriesGroups:
    [
    {
    type: ‘column’,
    valueAxis:
    {
    visible: true,
    //unitInterval: 5000,
    title: { text: ‘GDP & Debt per Capita($)<br>’ }
    },
    series: [
    { dataField: ‘GDP’, displayText: ‘GDP per Capita’, labels: {visible: true, angle: -90} },
    //{ dataField: ‘Debt’, displayText: ‘Debt per Capita’, labels: {visible: true, angle: -90} }
    ]
    }
    ]
    };
    // setup the chart
    $(‘#chartContainer’).jqxChart(settings);
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’chartContainer’ style=”width:850px; height:500px;”>
    </div>
    </body>
    </html>


    Dimitar
    Participant

    Hello rtessler,

    You need either unitInterval or minValue (set, for example, to 0) to successfully plot the series. This is because the chart algorithm needs more data to automatically determine the valueAxis settings.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.