{"id":6672,"date":"2024-04-14T18:14:02","date_gmt":"2024-04-14T10:14:02","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6672"},"modified":"2024-04-14T18:14:02","modified_gmt":"2024-04-14T10:14:02","slug":"chart","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/chart\/","title":{"rendered":"Chart"},"content":{"rendered":"\n
\n

The chart<\/strong> tag enables you to embed an interactive graphic to your site using the Google Maps JavaScript API. You have the option to define the location you want to emphasize and select various display preferences.<\/p>\n

Within this tutorial<\/h5>\n
    \n
  1. Insert a chart<\/li>\n
  2. Establish an API Key<\/li>\n
  3. Customize your chart settings<\/li>\n
  4. Design your chart<\/li>\n<\/ol>\n
    Prior to commencing<\/h5>\n

    If you plan to utilize the chart element, you must acquire a Google Maps API key. Charts without keys will display low-resolution maps marked with \u201cfor development purposes only.\u201d Further details provided below.<\/p><\/blockquote>\n

    Insert a chart<\/h2>\n

    You can place a chart element on your webpage from the insert elements<\/strong> section in the (A) \u2192 components<\/strong> panel.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    If you insert a chart onto the canvas without adding the Google Maps JavaScript API key to your project settings, a gray chart placeholder will be displayed.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    Alternate methods to integrate charts<\/h3>\n

    You can embed a chart within a text block by pasting the Google map URL in the rich media<\/strong>\u00a0embed feature available in the\u00a0plus (+)<\/strong>\u00a0menu when your cursor is on a new line within the text editor. Learn more about rich media.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    You can also integrate a static Google chart directly from the Google maps<\/a> website. Simply copy the embed code<\/a> and paste it into an embed component on your page. Adjust the width and height of the chart by editing the code itself. Set both to 100%, then assign specific width and height dimensions to the embed element<\/strong> within the style panel<\/strong> for the desired size.<\/p>\n

    \n
    <\/div>\n<\/figure>\n
    Explore these guides to incorporate charts from a variety of chart platforms.<\/h6>\n

    Establish an API key<\/h2>\n

    To utilize a live chart on your website, you must create and link an API key to your project.<\/p>\n

      \n
    1. Access the chart settings<\/strong>\u00a0(double-click\u00a0the chart on the canvas or\u00a0choose it and hit enter).<\/li>\n
    2. Click\u00a0“Add API key”. You’ll be directed to your<\/strong>\u00a0project settings \u2192 integrations \u2192 Google maps<\/strong>. This is where you will input your API key for Google Maps.<\/li>\n<\/ol>\n
      \n