LogoLogo
Platform
  • Welcome to Infinity - The Gen AI Platform for Business Intelligence
  • Interactive Quick Start Guide
  • Comprehensive User Guide
    • 1. Connecting Your Data
      • Uploading Files as a Datasource
      • Connecting to Databases and Cloud Data Sources
      • AI-Powered Context Generation Wizard
      • Managing Data Sources
      • Supported Data Connectors
    • 2. Charts
      • Creating Charts
        • AI Chart Builder
        • Drag-Drop Builder
        • Data Explorer
      • Chart Customization
        • Chart Configuration Basics
        • Intent and Its Role in Chart Generation
        • Modifying Selected Data Sources and Tables
        • Understanding and Editing the SQL Query
        • Changing the Chart Type
        • Modifying Data Components
        • Using Pivoting for Multi-Dimensional Analysis
        • Applying Filters
        • Customizing Chart with Advanced Editor Panel
          • Styles
            • Chart Background
            • Titles
            • Legend
            • Grid
            • X-Axis
            • Y-Axis
            • Secondary Y-Axis
            • Series
          • Sharing
          • Prompts
          • JS (Code Mode)
        • Using AI Chatbot for Quick Modifications
      • Featured Chart Examples
        • Line/Bar/Column/Scatter Chart
        • Combo Chart
        • Stacked Area/Bar/Column Chart
        • 100% Stacked Column/Bar/Area Chart
        • Pie Chart
        • Metric Chart
        • Bubble Chart
        • Geo Chart
        • Geo with Makers Chart
        • Sankey Chart
        • Histogram Chart
        • Annotation Chart (ToDo)
        • Table Chart
        • Tree Map Chart
        • Timeline Chart (todo)
        • Gauge Chart (todo)
        • Custom Charts
      • Managing Charts
      • Accessing Charts
      • Chart Actions
    • 3. Storyboards
      • Creating Storyboards
      • Storyboard Customization
      • Managing Storyboards
      • Accessing Storyboards
      • Storyboard Actions
    • 4. Feed Page
    • 5. Curated Page
    • 6. Beacons: Working with Unstructured Data
      • Beacon : Basics
      • Creating Beacons
      • Accessing Beacon Data
      • Managing Beacon
    • 7. User and Access Management
      • Inviting Colleagues
      • Approving Join Requests
      • Roles
      • Orgs
      • Distribution Lists
      • Layouts
    • 8. Site Customization
    • 9. Subscriptions
      • Scheduled Emails
      • Event Based Notifications (Alerts)
      • Managing Alerts and Scheduled Emails
    • 10. Profile and settings
    • 11. Making the Most of Infinity's AI-Powered Features
    • 12. Advanced Topics
      • Chart Variables
      • Custom Computes for Event Based Subscriptions
      • Drill-down or Reference Charts
      • Custom XLS Template
      • Custom PPT Template
      • Editing the Chart JavaScript
    • 13. Getting Additional Help
      • Video Resources
      • Best Practices
      • FAQs
        • Error while creating chart
        • User not able to access Charts
        • Unable to Create a DataSource
        • Hard Reset/Reloading the browser
      • Contact Support
  • Topics to address
Powered by GitBook
On this page
  1. Comprehensive User Guide
  2. 2. Charts
  3. Chart Customization
  4. Customizing Chart with Advanced Editor Panel

JS (Code Mode)

JS Tab (JavaScript)

The JS tab provides advanced users and developers direct access to the underlying JavaScript code used to generate and render charts. This is intended for users who have a solid understanding of JavaScript and familiarity with Google Charts or Apache ECharts.

⚠️ Warning:

  • Editing the JavaScript code is an advanced operation. Only proceed if you're experienced with JavaScript and clearly understand charting libraries such as Google Charts or Apache ECharts.

  • Once you edit and apply changes through the JS tab, the visual styling options in the Styles tab will become inactive.

Important Notes:

  • Do NOT modify the top initialization section:

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    
    var option = {
      "dataset": {
        "source": [
          [
            "OrderDate",
            "Sales",
            "Discount"
          ],
          ...
        ]
      },

    Altering this could prevent your chart from rendering properly.

  • Data Source Definition: Ensure your data remains within the structure defined by:

    "dataset": {
        "source": [ ... ]
    }

    This section should remain untouched for correct functionality.

  • Google Charts: If you're using Google Charts, customization should only be done within the "options": {} block.

Recommended Usage:

  • Adjust or add complex chart features that cannot be configured through the visual interface.

  • Implement custom event handlers, tooltips, or dynamic data behavior.

Caution:

  • There is currently no dynamic error checking or correction within the editor. Verify your JavaScript code externally or carefully test it to prevent errors.

  • If you're uncertain about JavaScript edits, consult documentation or experienced developers to avoid breaking the chart.

Always make a backup or copy of your original JS before applying major changes.

PreviousPromptsNextUsing AI Chatbot for Quick Modifications

Last updated 3 months ago