Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Chris van den Heuvel
100
Composite Scatterline/Range Chart - Different xAxis Values
posted

Everything I find on composite charts is about yAxis with different values. Is it possible to have a composite chart with different xAxis values. For example I have the chart declared in the code below. For each series in the scatterline portion of the chart I want to display a "range" (i.e. high/low) values for that series. The caveat is that the range values will always be xAxis values of 6, 12, 26, 52, 104 with whatever corresponding yAxis values. The scatter line data might be slightly different so in the code below the xAxis values are 7, 13, 22, 51, 101 with an interval of 8.

For the data would I simply add high/low values to the data array like the following? For now the values are hard coded for a demo but eventually we will be pulling them from a production SQL server database.

            var lineData = [
                    { "arg": 0.0, "val": 0.0, "high": 0, "low": 0 },
                    { "arg": 7, "val": 0.035, "high": 0.041, "low": 0.023 },
                    ...
            ];

Any help would be appreciated. Thanks

Sample code:


    <div class="chartContainer">

        <div class="chart">
            <%--<h4>Scatter Line</h4>--%>
            <div id="chartScatterLine"></div>
        </div>


    </div>

    <!-- Custom Tooltip Template -->
    <script id="tooltipTemplateMedial" type="text/x-jquery-tmpl">
        <div style="color: #44ACD6">
            <span>Medial</span><br />
            <span>Exam Followup Week: </span><span>${item.arg}</span><br />
            Translation (mm): <span style="font-weight: bold">${item.val}</span>
        </div>
    </script>

    <script id="tooltipTemplateProximal" type="text/x-jquery-tmpl">
        <div style="color: #44ACD6">
            <span>Proximal</span><br />
            <span>Exam Followup Week: </span><span>${item.arg}</span><br />
            Translation (mm): <span style="font-weight: bold">${item.prc}</span>
        </div>
    </script>

    <script id="tooltipTemplateLateral" type="text/x-jquery-tmpl">
        <div style="color: #44ACD6">
            <span>Lateral</span><br />
            <span>Exam Followup Week: </span><span>${item.arg}</span><br />
            Translation (mm): <span style="font-weight: bold">${item.lat}</span>
        </div>
    </script>


    <script type="text/javascript">

        $(function () {
            function createScatterChart(selector, seriesType, dataSource) {
                $(selector).igDataChart({
                    width: "500px",
                    height: "400px",
                    legend: { element: "lineLegend" },
                    dataSource: dataSource,
                    title: "Stem Translation",
                    axes: [{
                        name: "xAxis",
                        type: "numericX",
                        interval: 13,
                        title: "Week"
                    }, {
                        name: "yAxis",
                        type: "numericY",
                        title: "Translation (millimeters)",
                        maximumValue: 1.5,
                        formatLabel: function (val) {
                            //var bVal = (val / 1000),
                            rounded = Math.round(val * 1000) / 1000;
                            return rounded;
                        }
                    }],
                    series: [{
                        isDropShadowEnabled: true,
                        shadowOffsetX: 0,
                        shadowOffsetY: 3,
                        useSingleShadow: false,
                        shadowColor: "#666666",
                        name: "medial",
                        type: seriesType,
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        xMemberPath: "arg",
                        yMemberPath: "val",
                        markerType: "circle",
                        showTooltip: true,
                        tooltipTemplate: "tooltipTemplateMedial",
                        thickness: 3,
                        title: "Medial"
                    },
                    {
                        isDropShadowEnabled: true,
                        shadowOffsetX: 0,
                        shadowOffsetY: 3,
                        useSingleShadow: false,
                        shadowColor: "#666666",
                        name: "proximal",
                        type: seriesType,
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        xMemberPath: "arg",
                        yMemberPath: "prc",
                        markerType: "circle",
                        showTooltip: true,
                        tooltipTemplate: "tooltipTemplateProximal",
                        thickness: 3,
                        title: "Proximal"
                    },
                    {
                        isDropShadowEnabled: true,
                        shadowOffsetX: 0,
                        shadowOffsetY: 3,
                        useSingleShadow: false,
                        shadowColor: "#666666",
                        name: "lateral",
                        type: seriesType,
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        xMemberPath: "arg",
                        yMemberPath: "lat",
                        markerType: "circle",
                        showTooltip: true,
                        tooltipTemplate: "tooltipTemplateLateral",
                        thickness: 3,
                        title: "Lateral"
                    }],
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate"
                });
            }

            
            var lineData = [
                    { "arg": 0.0, "val": 0.0 },
                    { "arg": 6, "val": 0.035 },
                    { "arg": 12, "val": 0.090 },
                    { "arg": 26, "val": 0.079 },
                    { "arg": 52, "val": .088 },
                    { "arg": 104, "val": .33 },
                    { "arg": 0.0, "prc": 0.0 },
                    { "arg": 6, "prc": -1.316 },
                    { "arg": 12, "prc": -1.301 },
                    { "arg": 26, "prc": -1.334 },
                    { "arg": 52, "prc": -1.23 },
                    { "arg": 104, "prc": -1.43 },
                    { "arg": 0.0, "lat": 0.0 },
                    { "arg": 6, "lat": -1.47 },
                    { "arg": 12, "lat": -1.512 },
                    { "arg": 26, "lat": -1.567 },
                    { "arg": 52, "lat": -1.725 },
                    { "arg": 104, "lat": -1.869 }
            ];


            createScatterChart("#chartScatterLine", "scatterLine", lineData);

        });

    </script>



    <table>
        <tr>
            <td id="lineLegend" style="float: left"/>
        </tr>    
    </table>

Parents
No Data
Reply Children