Business Text Panel for Grafana | Plugin overview | Tutorial | Main features

Поділитися
Вставка
  • Опубліковано 15 жов 2024

КОМЕНТАРІ • 23

  • @volkovlabs
    @volkovlabs  3 місяці тому +4

    The Business Text plugin, our most popular plugin, went through an incredible make-over. I am excited to learn what that would do with the download statistics! We will keep you posted.

  • @lohweiyang6766
    @lohweiyang6766 15 днів тому +1

    Hi, does Business Text Panel support jquery data table?

    • @volkovlabs
      @volkovlabs  15 днів тому

      It should be supported similar to the other libraries: volkovlabs.io/plugins/business-text/external/.
      Alternatively, I would suggest to check out the Business Table panel we recently developed: volkovlabs.io/plugins/business-table/. We will publish tutorial later this week.

  • @irkost
    @irkost Місяць тому +1

    Hi! I'm using Business Text Plugin 5.3.0 with Grafana 11.1.4 (disable_sanitize_html set to true).
    For some reason when I try to create a clickable link that opens a new tab (I type Click into Content section with Editor set to HTML) it still opens in the same tab.
    But when I use the same code within standard Text panel, it opens in a new tab as expected. Can you help figure out why is that?

    • @volkovlabs
      @volkovlabs  Місяць тому

      Please open a question in the GitHub repository for team to check: github.com/VolkovLabs/business-text/issues

    • @irkost
      @irkost Місяць тому +1

      @@volkovlabs After double checking, it turned out that disable_sanitize_html was set to false. After turning it on, everything worked!

  • @Benrir.
    @Benrir. 3 місяці тому +1

    I have a question, can i filter what row is showed on my dashboard based on variable selected. Example :
    rows : a, b, c, d, e
    variable option : 1, 2, 3
    when select:
    1 dashboard will only show row a & b
    2 dashboard will only show row c & d
    3 dashboard will only show row e

    • @volkovlabs
      @volkovlabs  3 місяці тому

      We have an example in documentation how to check variables with if statement: volkovlabs.io/plugins/volkovlabs-dynamictext-panel/variables/#check-if-a-user-is-an-admin

  • @AleksandarČebzan
    @AleksandarČebzan 2 місяці тому +1

    Hi, is there a how to documentation for "Date Picker"?

    • @volkovlabs
      @volkovlabs  2 місяці тому

      I mention this use case in this video ua-cam.com/video/AcQi-6GCrNU/v-deo.html, also you may find this community post helpful community.grafana.com/t/make-your-own-custom-datepicker-use-set-your-own-timerange-here-is-how-to/100264

  • @adarshkumarmishra4751
    @adarshkumarmishra4751 3 місяці тому +2

    Can we use Google maps in the Grafana dashboard?
    We want to make this for vehicle location monitoring.
    Data base in postgresql

    • @volkovlabs
      @volkovlabs  3 місяці тому

      You can try import Google Maps in the latest release following documentation: volkovlabs.io/plugins/volkovlabs-dynamictext-panel/external/
      Alternatively, Business Charts supports it natively: volkovlabs.io/plugins/volkovlabs-echarts-panel/maps/google/

    • @AdarshMishra-e5g
      @AdarshMishra-e5g 3 місяці тому

      ​@@volkovlabs
      Not getting desire result
      in the access key written
      AIzaSyA7qjHCHjV8_648bnzIEJFQJGzc_N6jvWc
      This is test and working
      and use provided your java script but it is not working
      I have tried with different java script which is below this is able to location but donot know how to link this with our postgresql data base
      const gmap = {
      gmap: {
      /**
      * Center and Zoom
      */
      center: { lng: -81.76, lat: 27.99 },
      zoom: 4,
      // whether echarts layer should be rendered when the map is moving. `true` by default.
      // if false, it will only be re-rendered after the map `moveend`.
      // It's better to set this option to false if data is large.
      renderOnMoving: true,
      },
      series: [
      {
      type: 'scatter',
      coordinateSystem: 'gmap',
      // data items [[lng, lat, value], [lng, lat, value], ...]
      data: [[-81.76, 27.99, 100]],
      encode: {
      // encode the third element of data item as the `value` dimension
      value: 2,
      lng: 0,
      lat: 1
      }
      }
      ]
      };
      /**
      * Loading
      */
      const loading = {
      graphic: {
      elements: [
      {
      type: 'group',
      left: 'center',
      top: 'center',
      children: new Array(7).fill(0).map((val, i) => ({
      type: 'rect',
      x: i * 20,
      shape: {
      x: 0,
      y: -40,
      width: 10,
      height: 80
      },
      style: {
      fill: '#5470c6'
      },
      keyframeAnimation: {
      duration: 1000,
      delay: i * 200,
      loop: true,
      keyframes: [
      {
      percent: 0.5,
      scaleY: 0.3,
      easing: 'cubicIn'
      },
      {
      percent: 1,
      scaleY: 1,
      easing: 'cubicOut'
      }
      ]
      }
      }))
      }
      ]
      }
      }
      /**
      * Maps are Ready
      */
      window.gmapReady = () => {
      context.grafana.notifySuccess(['Google Maps', 'Loaded...']);
      context.panel.chart.setOption(gmap, notmerge = true);
      }
      return typeof google === 'object' && typeof google.maps === 'object' ? gmap : loading;
      My postgresql data base query is this
      SELECT
      ts_kv_dictionary.key,
      ts_kv_latest.ts,
      ts_kv_latest.dbl_v
      FROM
      ts_kv_dictionary
      INNER JOIN
      (
      SELECT
      key,ts,dbl_v,entity_id FROM ts_kv_latest WHERE
      entity_id IN (SELECT id FROM device WHERE name = 'LPT#9')
      AND key IN (SELECT key_id FROM ts_kv_dictionary WHERE key in ('lat', 'lng'))
      ) AS ts_kv_latest ON ts_kv_dictionary.key_id = ts_kv_latest.key
      kindly help we need your help and support
      Thanks!

    • @AdarshMishra-e5g
      @AdarshMishra-e5g 2 місяці тому

      Not resolved, we want for dynamic google map location based on postgresql data base query
      data will came by any name what you will recomend (lat,lng) or anything else.
      sql code is working very well for other other pluging like geomap,
      but for your pluging not able to use.

  • @AdarshMishra-e5g
    @AdarshMishra-e5g 2 місяці тому

    I am requesting for help since last one month but your shared data is not helpful to resolve my problems
    please help regarding google map pluging based on postgresql data (lat and lng)

    • @volkovlabs
      @volkovlabs  2 місяці тому

      You are welcome to sponsor our plugins to help with your use case: github.com/sponsors/VolkovLabs

  • @AdarshMishra-e5g
    @AdarshMishra-e5g 2 місяці тому

    how to see dynamic google map(dynamic data points will come from postgresql data base) by using sql query?

    • @volkovlabs
      @volkovlabs  2 місяці тому

      it's well explained in the documentation and tutorials.

  • @AdarshMishra-e5g
    @AdarshMishra-e5g 2 місяці тому

    please make a video , in this google map data , lat & lng will come from database.

    • @volkovlabs
      @volkovlabs  2 місяці тому

      We don't plan to make any Google Maps video at the moment.

  • @AdarshMishra-e5g
    @AdarshMishra-e5g 3 місяці тому +2

    Dear Mam , Want to use google Map Api in Grafana pannel
    How we can use?
    for lat and lng we will get from postgresql data base.
    How we can make vehicle location dashboard in Grafana pannel??
    Please help , I need your help and support
    for the getting sql we are currently using below query
    SELECT
    ts_kv_dictionary.key,
    ts_kv_latest.ts,
    ts_kv_latest.dbl_v
    FROM
    ts_kv_dictionary
    INNER JOIN
    (
    SELECT
    key,ts,dbl_v,entity_id FROM ts_kv_latest WHERE
    entity_id IN (SELECT id FROM device WHERE name = 'LPT#9')
    AND key IN (SELECT key_id FROM ts_kv_dictionary WHERE key in ('lat', 'lng'))
    ) AS ts_kv_latest ON ts_kv_dictionary.key_id = ts_kv_latest.key
    and trying to use both way by using Business chart pluging and Busineess Text pugging but I failed to getting my desire result
    need your help and support
    Thanks!

    • @volkovlabs
      @volkovlabs  3 місяці тому

      Google Maps in Business Charts explained in documentation: volkovlabs.io/plugins/volkovlabs-echarts-panel/maps/google/

    • @AdarshMishra-e5g
      @AdarshMishra-e5g 2 місяці тому

      @@volkovlabs
      I have used this but not working for me.
      Actually this is only work for fix cooridinet while my coordinate is varying which is i am taking form postgresql data base by using sql query
      based on visual part , I have selected my data which is lat and lng as data set item in visual editor
      In series selected id 1 and type as MAP
      But it not work
      is in code manually we need to change in this any thing
      const gmap = {
      gmap: {
      /**
      * Center and Zoom
      */
      center: { lng: 77.3841280, lat: 28.5916180 }, // Updated coordinates
      zoom: 4,
      // whether echarts layer should be rendered when the map is moving. `true` by default.
      // if false, it will only be re-rendered after the map `moveend`.
      // It's better to set this option to false if data is large.
      renderOnMoving: true,
      },
      series: [
      {
      type: 'scatter',
      coordinateSystem: 'gmap',
      // data items [[lng, lat, value], [lng, lat, value], ...]
      data: [[77.3841280, 28.5916180, 100]], // Updated coordinates
      encode: {
      // encode the third element of data item as the `value` dimension
      value: 2,
      lng: 0,
      lat: 1
      }
      }
      ]
      };
      /**
      * Loading
      */
      const loading = {
      graphic: {
      elements: [
      {
      type: 'group',
      left: 'center',
      top: 'center',
      children: new Array(7).fill(0).map((val, i) => ({
      type: 'rect',
      x: i * 20,
      shape: {
      x: 0,
      y: -40,
      width: 10,
      height: 80
      },
      style: {
      fill: '#5470c6'
      },
      keyframeAnimation: {
      duration: 1000,
      delay: i * 200,
      loop: true,
      keyframes: [
      {
      percent: 0.5,
      scaleY: 0.3,
      easing: 'cubicIn'
      },
      {
      percent: 1,
      scaleY: 1,
      easing: 'cubicOut'
      }
      ]
      }
      }))
      }
      ]
      }
      }
      /**
      * Maps are Ready
      */
      window.gmapReady = () => {
      context.grafana.notifySuccess(['Google Maps', 'Loaded...']);
      context.panel.chart.setOption(gmap, notmerge = true);
      }
      return typeof google === 'object' && typeof google.maps === 'object' ? gmap : loading;
      like in this manually coordinate written how to use so that it will accept from my data base