jQuery UI Widgets Forums Chart Crosshair: Show values from all lines

This topic contains 2 replies, has 2 voices, and was last updated by  Klaus H 3 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Crosshair: Show values from all lines #108076

    Klaus H
    Participant

    Hi,

    I have a customer request to modifiy a dynmically generated jqxChart – it’s dynamical because the user can select which values shall be displayed before the chart is generated, so the number of lines in the chart may vary and also the number of Y-Axis may vary because of the data selection. That all works well for several years. The request to modify is to show a vertical line like a crosshair that moves with the mouse and displays all the values from that specific date.

    I could not find that feature for jqxChart, so I guess you have not implemented this. I have found two competitors of yours that have, here an example using chart.js: https://codepen.io/anatoly314/pen/BXWgxG

    Do you plan to add such a feature in the future? Even with multiple Y-Axis and therefore units?

    Best regards
    Klaus H

    Crosshair: Show values from all lines #108149

    Hristo
    Participant

    Hello Klaus H,

    We do not have exactly such a feature, unfortunately.
    But I would like to suggest one approach that you could achieve this.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id="Description">JavaScript Chart Crosshairs Example</title>
        <meta name="description" content="This is an example of JavaScript Chart Crosshairs." />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.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/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "csv",
                    datafields: [
                        { name: "Date" },
                        { name: "S&P 500" },
                        { name: "NASDAQ" }
                    ],
                    url: "../sampledata/nasdaq_vs_sp500.txt"
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert("Error loading '" + source.url + "' : " + error); } });
                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 = data[itemIndex];
                    //return "<DIV style="text-align:left"><b>Team: " + categoryValue +
                    //    "</b><br />Start day: " + value.from +
                    //    "<br />End day: " + value.to;
    
                    //console.log(value, itemIndex, serie, group, categoryValue, categoryAxis, dataAdapter.records);
                    //console.log(itemIndex, value, dataAdapter.records[itemIndex]);
    
                    var record = dataAdapter.records[itemIndex];
                    //console.log(Object.keys(record), record["S&P 500"]);
                    var key1 = Object.keys(record)[1];
                    var key2 = Object.keys(record)[2];
                    var value1 = record[key1];
                    var value2 = record[key2];
    
                    var result = "Date: <em>${record.Date}</em>" +
                        "<br/>" +
                        "${key1}: ${value1}" +
                        "<br/>" +
                        "${key2}: ${value2}";
    
                    return result;
                };
    
                // prepare jqxChart settings
                var settings = {
                    title: "U.S. Stock Market Index Performance",
                    description: "NASDAQ Composite compared to S&P 500",
                    enableAnimations: true,
                    showLegend: true,
                    enableCrosshairs: true,
                    crosshairsDashStyle: "2,2",
                    crosshairsLineWidth: 1.0,
                    crosshairsColor: "#888888",
                    padding: { left: 10, top: 5, right: 30, bottom: 5 },
                    titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                        {
                            dataField: "Date",
                            formatFunction: function (value) {
                                return value.getDate() + "-" + months[value.getMonth()] + "-" + value.getFullYear();
                            },
                            type: "date",
                            baseUnit: "month",
                            minValue: "01-01-2017",
                            maxValue: "01-01-2018",
                            unitInterval: 1,
                            valuesOnTicks: true,
                            gridLines: { interval: 3 },
                            labels: {
                                angle: -45,
                                rotationPoint: "topright",
                                offset: { x: 0, y: -25 }
                            }
                        },
                    colorScheme: "scheme01",
                    seriesGroups:
                        [
                            {
                                type: "line",
                                toolTipFormatFunction: toolTipCustomFormatFn,
                                valueAxis:
                                {
                                    title: { text: "Daily Closing Price<br><br>" }
                                },
                                series: [
                                        { dataField: "S&P 500", displayText: "S&P 500" },
                                        { dataField: "NASDAQ", displayText: "NASDAQ" }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $("#chartContainer").jqxChart(settings);
    
            });
        </script>
    </head>
    <body>
        <div id="chartContainer" style="width: 850px; height: 500px"></div>
    </body>
    </html>
    

    I hope this will help.

    PS: Also, you could contact the Sales Department (sales@jqwidgets.com) with this request for custom development.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    • This reply was modified 3 months, 2 weeks ago by  Hristo.
    • This reply was modified 3 months, 2 weeks ago by  Hristo.
    • This reply was modified 3 months, 2 weeks ago by  Hristo.
    Crosshair: Show values from all lines #108178

    Klaus H
    Participant

    Hello Hristo,

    thank you for your answer with the example, I have played around a bit with the possibilites and found a solution that the customer is okay with, like using the existing crosshair while not all lines show the dot with the selection. I can access all the datapoints and show all the values outside of the chart. So for now I see no need to contact the Sales Department. 🙂

    Best regards
    Klaus

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

You must be logged in to reply to this topic.