Adding/Removing Series

<html>
<head>
    <title>Adding/Removing Series Dynamically</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
    <!-- chart size settings -->
    <style type="text/css">
        #chartContainer
        {
            width: 800px;
            height: 550px;
            float: left;
        }
    </style>
    <script type="text/javascript" language="javascript">

        // Creating new chart object. 
        var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
        // Setting XML config file.
        chart.setXMLFile("config.xml");
        // NOTE: needConfig flag set to true, provides an ability to work with chart objectModel
        chart.needConfig = true;
        // Writing the flash object into the page DOM.
        chart.write("chartContainer");

        // Solving problem with push in array in IE
        if (!Array.prototype.push) Array.prototype.push = function (obj) { this[this.length] = obj; }

        /*
        Function below adds new series.
        id stores the name of the symbol (series). Data is stored in "csv/"+id+"_daily_short.csv" file.
        For example, for "msft" we add data from "csv/msft_daily_short.csv"
        */
        function addSeries(id, seriesColor) {

            if (chart.getSeriesById("idMainChart", id) != null) return; // series already exists

            var targetChart = chart.getChartById("idMainChart");

            //add data set
            chart.objectModel.data.dataSets.push({
                id: "ds_" + id,
                sourceUrl: "csv/" + id + "_daily_short.csv",

                csvSettings: {
                    ignoreFirstRow: true,
                    rowsSeparator: "\n",
                    columnsSeparator: ","
                },

                locale: {
                    dateTime: {
                        format: "%yyyy%MM%dd"
                    }
                }
            });

            //add data provider for series
            chart.objectModel.data.dataProviders.generalDataProviders.push({
                id: "dp_" + id,
                dataSet: "ds_" + id,
                fields: [{ type: "Close", column: 1, approximation_type: "Close"}]
            });

            //add series to a chart
            targetChart.seriesList.push({
                id: id,
                type: "Spline",
                color: seriesColor,
                name: id.toUpperCase(),
                dataProvider: "dp_" + id
            });

            // Apply all changes of objectModel and update a chart
            chart.applyConfigChanges();
        }

        // Function to remove series.
        function removeSeries(id) {

            //Find the series by its id
            var series = chart.getSeriesById("idMainChart", id);
            if (series == null) return;

            var targetChart = chart.getChartById("idMainChart");

            // If the there is no such series - do nothing.
            var index = targetChart.seriesList.indexOf(series);
            if (index == -1) return;

            //Remove series if it exists
            targetChart.seriesList.splice(index, 1);

            //Remove data provider 
            index = findById(chart.objectModel.data.dataProviders.generalDataProviders, "dp_" + id);
            if (index != -1)
                chart.objectModel.data.dataProviders.generalDataProviders.splice(index, 1);

            //Remove data set
            index = findById(chart.objectModel.data.dataSets, "ds_" + id);
            if (index != -1)
                chart.objectModel.data.dataSets.splice(index, 1);

            //Apply all changes of objectModel and update a chart
            chart.applyConfigChanges();
        }

        // Function searches for an element in array by its id.
        function findById(arr, id) {
            for (var i = 0; i < arr.length; i++)
                if (arr[i].id == id) return i;
            return -1;
        }

        // A function that decides whether to add or remove the series
        function switchSeries(id, color) {
            var chk = document.getElementById(id);
            if (chk.checked)
                addSeries(id, color);
            else
                removeSeries(id);
        }
    </script>
    <!-- table settings -->
    <style type="text/css">
        table.settings
        {
            border-style: solid;
            border-width: 1px;
            border-color: #D0CDC9;
        }
        
        table.settings tr th
        {
            font: normal 60% Verdana;
            background-color: #DCD9D5;
            font-weight: bold;
            padding-bottom: 5px;
            padding-top: 5px;
            padding-left: 10px;
            text-align: left;
        }
        table.settings tr td
        {
            background-color: #F8F4F0;
            font: normal 70% Verdana;
            padding-bottom: 2px;
            padding-top: 2px;
            padding-left: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="chartContainer">
        <!-- Chart Container -->
    </div>
    <table class="settings">
        <tr>
            <th width="55" colspan="2">
                Symbol
            </th>
        </tr>
        <tr>
            <td>
                MSFT
            </td>
            <td>
                <input id="msft" type="checkbox" onclick="switchSeries('msft','#DC3912');" autocomplete="off" />
            </td>
        </tr>
        <tr>
            <td>
                IBM
            </td>
            <td>
                <input id="ibm" type="checkbox" onclick="switchSeries('ibm','#E48900');" autocomplete="off" />
            </td>
        </tr>
        <tr>
            <td>
                ORCL
            </td>
            <td>
                <input id="orcl" type="checkbox" onclick="switchSeries('orcl','#598C10');" autocomplete="off" />
            </td>
        </tr>
    </table>
</body>
</html>

Sample Description

How to use this sample?
How it works?
AnyChartStock JavaScript API
Prerequisites

How to use this sample?

This sample shows how to solve two very important tasks:

Add the data series to the chart,
Remove the data series from the chart.

To add and remove series use the checkboxes placed to the right of the chart.

How it works

This sample is based on the features and principles of Chart Object Model, described in details in Updating Chart using Object Model article, which means that all the changes in the chart described below are done by modifying its object model available through objectModel property.

Note, that data sets and data providers for the series are also added and removed along with series themselves, but it may be not necessary and made for demonstration purposes.

When you check one of the checkboxes script obtains chart object model and checks whether the required series already exists in the chart or not, if not - it adds the data set, based on one of the CSV files, creates series data provider based on this data set and finally creates a series, that uses this data provider. As soon as all modifications in objectModel are done, applyConfigChanges method updates the chart and changes can be seen.

When you uncheck a checkbox the reverse process is done - script removes the series, the data provider and the data set from the objectModel and changes are applied using applyConfigChanges method.

AnyChartStock JavaScript API

This sample uses the following methods, properties and events from AnyChartStock JavaScript API:

Item	Type	Description
needConfig	Property (Boolean)	Defines whether the access to full chart configuration object model is required.
objectModel	Property (Object)	Gets chart configuration as an Object.
applyConfigChanges	Method	Commits changes made to the objectModel.
getChartById	Method	Returns link to a chart object in the objectModel.
getSeriesById	Method	Gets series object from the object model by its id.
setXMLFile	Method	Sets chart XML configuration file path.
write	Method	Adds the chart to HTML DOM as a child of the specified container.

Prerequisites

This section lists all configuration, data and auxiliary files required for this sample.

Configuration file

config.xml

CSV files

SWF files

AnyChartStock.swf - AnyChart Stock component.
Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.

JavaScript Libraries

AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.

The information contained in this website is for general information purposes only. All sample data provided on this site is for demonstration purposes only.

The logos and names of other companies and products mentioned on this site are copyright and/or trademarks of their respective owners.

The content on this site, including news, quotes, data and other information, is provided for your personal information only, and is intended for demonstration purposes only. Content on this site is not appropriate for the purposes of making a decision to carry out a transaction or trade. Nor does it provide any form of advice (investment, tax, legal) amounting to investment advice, or make any recommendations regarding particular financial instruments, investments or products.

In no event AnyChart will be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.

This site may point to other Internet sites that may be of interest to you, however AnyChart does not endorse or take responsibility for the content on such other sites

Market data and News provided by and copyright RediNews, Incorporated.