Back

Custom toolbar item

You can create your own toolbar buttons that will execute your defined function upon an 'onClick' event.

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