jQuery UI Widgets Forums Chart colorFunction not working chart with zooming

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 3 years, 6 months ago.

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

  • wpd
    Participant

    Hi,

    I have chart with zooming functionality i need color change for value greater than 150 if the chart is not zoomed in it works perfectly but when zoomed in it is not working correctly
    below is my code
    HTML code
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <div>
    <div id=’chartContainer’ style=”width: 800px; height: 500px;”>
    </div>
    <!– you can optionally render the selecor in this container –>
    <div id=’selectorContainer’ style=”width: 500px; height: 100px;”>
    </div>
    </div>

    </BODY>
    </HTML>

    JAVASCRIPT Code

    $(document).ready(function () {
    // prepare the data
    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘Date’ },
    { name: ‘Open’ },
    { name: ‘High’ },
    { name: ‘Low’ },
    { name: ‘Close’ },
    { name: ‘Volume’ },
    { name: ‘AdjClose’ }
    ],
    url: ‘https://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/TSLA_stockprice.csv’

    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    //console.log(dataAdapter)
    var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];

    var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
    var dataItem = dataAdapter.records[itemIndex];
    return ‘<DIV style=”text-align:left”><b>Date: ‘ +
    categoryValue.getDate() + ‘-‘ + months[categoryValue.getMonth()] + ‘-‘ + categoryValue.getFullYear() +
    ‘</b><br />Open price: $’ + dataItem.Open +
    ‘</b><br />Close price: $’ + dataItem.Close +
    ‘</b><br />Daily volume: ‘ + dataItem.Volume +
    ‘</DIV>’;
    };

    // prepare jqxChart settings
    var settings = {
    title: “Tesla Motors Stock Price”,
    description: “(June 2010 – March 2014)”,
    enableAnimations: true,
    animationDuration: 1500,
    enableCrosshairs: true,
    padding: { left: 5, top: 5, right: 30, bottom: 5 },
    titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘Date’,
    minValue: new Date(2012, 0, 1),
    maxValue: new Date(2013, 11, 31),
    type: ‘date’,
    baseUnit: ‘day’,
    labels:
    {
    formatFunction: function (value) {
    return value.getDate() + ‘-‘ + months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
    }
    },
    rangeSelector: {
    // Uncomment the line below to render the selector in a separate container
    //renderTo: $(‘#selectorContainer’),
    size: 80,
    padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
    minValue: new Date(2010, 5, 1),
    backgroundColor: ‘white’,
    dataField: ‘Close’,
    baseUnit: ‘month’,
    gridLines: { visible: false },
    serieType: ‘area’,
    labels: {
    formatFunction: function (value) {
    return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
    }
    }
    }
    },
    valueAxis:
    {
    title: { text: ‘Price per share [USD]<br><br>’ },
    labels: { horizontalAlignment: ‘right’ }
    },

    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘line’,
    toolTipFormatFunction: toolTipCustomFormatFn,
    series: [
    { dataField: ‘Close’,
    displayText: ‘Close Price’,
    lineWidth: 1,
    colorFunction: function (value, itemIndex, serie, group) {
    return (value > 150) ? ‘#CC1133’ : ‘#55CC55’;
    },
    lineWidthSelected: 1 }

    ]
    }

    ]
    };

    $(‘#chartContainer’).jqxChart(settings).on(‘rangeSelectionChanging’, function (event) {
    var args = event.args;
    // alert(‘rangeSelectionChanging event appear’);
    args.instance.description = args.minValue.getFullYear() + ” – ” + args.maxValue.getFullYear();
    });

    });


    Hristo
    Participant

    Hello wpd,

    Thank you for this feedback.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    wpd
    Participant

    Hi,

    Do you have any information when this will be fixed?
    As i have submit in a week to my client. please provide estimate.

    Thanks.


    Hristo
    Participant

    Hello wpd,

    Unfortunately, we do not have such practice.
    I would suggest you check regularly our “Roadmap”.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.