Back

Custom toolbar item

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var t = new TimeChart({
        container: document.getElementById("demo"),
        data:
        {
            units: ["h"],
            url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
        },
        toolbar: {
            /** This overrides the default buttons. */
            items: [
                {
                    label: "Custom export",
                    align: "right",
                    cssClass: "DVSL-bar-btn-export",
                    dropDownItems: [
                        {
                            label: "Image (PNG)",
                            onClick: function () { t.export("png"); }
                        },
                        {
                            label: "Excel (XLSX)",
                            onClick: function () { t.export("xlsx"); }
                        }
                    ]
                }
            ],

            /* 
            // This section shows the settings that simulate the default button layout. While using `extraItems` is preferred to
            // add new buttons, customizing `items` might be required to reorder the buttons.

            items: [
                <ZoomCharts.Configuration.BaseSettingsToolbarItem>{ item: "back", align: "left" },
                <ZoomCharts.Configuration.BaseSettingsToolbarItem>{ item: "zoomOut", align: "left" },
                <ZoomCharts.Configuration.BaseSettingsToolbarItem>{ item: "logScale", align: "right" },
                <ZoomCharts.Configuration.BaseSettingsToolbarItem>{ item: "displayPeriod", align: "right" },
                <ZoomCharts.Configuration.BaseSettingsToolbarItem>{ item: "displayUnit", align: "right" },
                <ZoomCharts.Configuration.BaseSettingsToolbarItem>{ item: "export", align: "right" },
            ]

            // note that `<ZoomCharts.Configuration.BaseSettingsToolbarItem>` is TypeScript syntax that has to be removed if you 
            // are not using TypeScript with compile time checks.
            */

            /** This defines button that are displayed in addition to the default. */
            extraItems: [
                {
                    label: "Click me",
                    align: "left",
                    image: "/dvsl/data/gears.png",
                    onClick: function () { alert("Hi there!") }
                },
                {
                    label: "And me",
                    location: "inside",
                    side: "bottom",
                    align: "right",
                    image: "/dvsl/data/gears.png",
                    onClick: function () { alert("Hi there!") }
                },
                {
                    label: "Me too",
                    location: "outside",
                    side: "left",
                    align: "bottom",
                    image: "/dvsl/data/gears.png",
                    onClick: function () { alert("Hi there!") }
                }
            ]
        }
    });

Data

Data 
//Data too large to output
Download Data