jQWidgets Forums

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

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

Author

Crosshair: Show values from all lines Posts

February 13, 2020 at 11:12 am Crosshair: Show values from all lines #108076

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

February 19, 2020 at 12:06 pm 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

February 21, 2020 at 4:08 pm 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

Author

Posts

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

You must be logged in to reply to this topic.