Not able to access data object in After Content Ready

[samant-rags]

Not able to access data object in After Content Ready in v4.3 is this a issue or am i missing some config ?

[samant-rags]

Apologies found this in the closed issues section https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/issues/242

Need to use : console.log(context.data[0].country); in After Content Ready section

[mikhail-vl]

@samant-rags Correct, we just published a new blog covering upcoming changes for the context: https://volkovlabs.io/blog/dynamictext-panel-4.3.0-20240108/

We started updating documentation as well.

[samant-rags]

Fabulous Mikhail 👌

Similar to the flowchart js I have tried using drawio diagram using Dynamic Text . Hope I can share the details for the blog ?

On Tue, Jan 16, 2024, 09:30 Mikhail Volkov @.***> wrote:

@samant-rags https://github.com/samant-rags Correct, we just published a new blog covering upcoming changes for the context: https://volkovlabs.io/blog/dynamictext-panel-4.3.0-20240108/

We started updating documentation as well.

— Reply to this email directly, view it on GitHub https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/issues/257#issuecomment-1893035850, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIDX3Q4JZOSRC3MKD5QL4LYOX3OTAVCNFSM6AAAAABB3MNZTWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJTGAZTKOBVGA . You are receiving this because you were mentioned.Message ID: @.***>

[mikhail-vl]

@samant-rags You are welcome to share here and we can add it to the documentation and next version blog.

[samant-rags]

If you want to create a process flow chart that can be easily referenced in a Grafana dashboard, one option is to use a standard flow charting tool like Draw.io to design the chart and save it as an SVG file. This file can then be imported into Grafana's plugin developed by Volkov labs DynamicText panel, which allows you to display and interact with the chart directly within the dashboard.

To take things a step further, you can use the DynamicText plugin's ability to link external JavaScript libraries and CSS stylesheets to add additional functionality to the chart. For example, you could use the popular data visualization library D3.js to display real-time metric values directly on the flow chart. The DynamicText plugin also includes hooks for controlling data manipulation before and after the content is rendered, giving you even greater flexibility over how the metrics on the chart is displayed and changed based on data in real time.

Overall, combining the power of tools like Draw.io and Grafana's Volkov labs open source plugin : DynamicText Panel makes it easy to create dynamic, interactive flow charts that can be seamlessly integrated into your dashboards and updated as needed. To learn more about these features and how to use them, check out the official documentation for the DynamicText plugin here

How to use Grafana's DynamicText panel and display real-time metric values on the chart using the D3.js library:

1. Design the process flow chart in Draw.io and save it as an SVG file. You can include shapes, connectors, text labels, and other elements as desired. Make sure to give the chart a clear, descriptive name so that it will be easy to identify later.
2. In Grafana, navigate to the dashboard where you want to display the flow chart and click on the "Add Panel" button. Select "Text" as the panel type and choose the "DynamicText" plugin.
3. Copy and paste the SVG code for the flow chart into the DynamicText panel editor. You can access the SVG code by opening the saved file in a text editor or viewing the source code for the chart in a web browser.
4. Use the DynamicText plugin's panel options to customize the data binding aspects of the flow chart. Details in the documentation link above.
5. Link the D3.js library and any required CSS stylesheets using the DynamicText plugin's settings. This will allow you to use D3.js functions and methods to manipulate the flow chart and display real-time metric values.
6. Write the D3.js code to select specific elements on the flow chart and bind them to data sources. For example, you might use the select method to target certain shapes or text labels, and then use the data method to associate those elements with live metric values.
7. Define the behavior of the chart using the DynamicText plugin's hooks. These hooks allow you to run custom JavaScript code before and after the content is rendered, enabling you to perform calculations, apply transformations, or trigger animations based on changes in the underlying data.
8. Save the DynamicText panel and test the flow chart to ensure that it displays correctly and updates in response to changes in the metric data. You may need to fine-tune the placement and formatting of the chart elements or adjust the timing of the hook functions to get everything working smoothly.
9. Once the flow chart is finalized, you can publish the dashboard and share it with team members or stakeholders as needed. They will be able to see the process flow chart alongside relevant metric data and understand how different components of the system fit together. By following these steps, you can create a dynamic, interactive process flow chart that integrates seamlessly with your Grafana dashboards and provides valuable insights into the performance of your systems.

The latest version of Volkov labs DynamicText panel opens up a lot of possibilities that we can achieve with the grafana dashboarding tool. Also it gives good control over what metrics can be shown and changed dynamically based on business needs.

[mikhail-vl]

@daria-vl Please use the comment from @samant-rags to create a new blog. I believe it's more than enough for a Community Blog.

[daria-vl]

@samant-rags Thank you for this awesome idea and such a detailed explanation. I agree with @mikhail-vl the materials are good for the whole new blog post and worth adding to the plugin documentation as well. Can you please provide code snippets demonstrating all(or some) of the features you mentioned? With them, in the blog post, I can have something like 'take this piece of code and insert it into this parameter'. So, anyone can simply copy/paste and get the results you describe. Having those snippets ready, I can prepare a blog post and publish it within a day.

[samant-rags]

Thanks @Daria

Will work and send it across soon

On Wed, Jan 17, 2024, 20:42 Daria Volkova @.***> wrote:

@samant-rags https://github.com/samant-rags Thank you for this awesome idea and such a detailed explanation. I agree with @mikhail-vl https://github.com/mikhail-vl the materials are good for the whole new blog post and worth adding to the plugin documentation as well. Can you please provide code snippets demonstrating all(or some) of the features you mentioned? With them, in the blog post, I can have something like 'take this piece of code and insert it into this parameter'. So, anyone can simply copy/paste and get the results you describe. Having those snippets ready, I can prepare a blog post and publish it within a day.

— Reply to this email directly, view it on GitHub https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/issues/257#issuecomment-1896015362, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIDX3WYEBMUNVOFRQUWSS3YO7S6FAVCNFSM6AAAAABB3MNZTWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJWGAYTKMZWGI . You are receiving this because you were mentioned.Message ID: @.***>

[samant-rags]

Paste the Content of the attached file into the "content" section of the Dynamic Text panel as shown below.

Then copy the below code snippet into the Javascript --> After Content Rendering Section as shown

`function getRandomInt(max) { return Math.floor(Math.random() * max); }

//console.log('After Content Ready : use Context object to access data ' + context.data[0].country) var dataPt_1 = parseInt(context.data[0]["Samant-series"]) - getRandomInt(9); var dataPt_2 = dataPt_1 - getRandomInt(6) var dataPt_3 = dataPt_2 - getRandomInt(12)

d3.selectAll("#Metric-A").text(dataPt_1); d3.selectAll("#Metric-B").text(dataPt_2); d3.selectAll("#Metric-C").text(dataPt_3);

/ d3.selectAll("#Metric-C").each(function (d, i) { console.log("-> ", i, d3.select(this).text('Sa')); }); / `

[mikhail-vl]

@samant-rags Blog post published: https://volkovlabs.io/blog/dynamic-text-d3-community-20240121/.

Thank you for your contribution and send us more!

[samant-rags]

Thanks @mikhail certainly 👍

On Mon, Jan 22, 2024, 03:43 Mikhail Volkov @.***> wrote:

@samant-rags https://github.com/samant-rags Blog post published: https://volkovlabs.io/blog/dynamic-text-d3-community-20240121/.

Thank you for your contribution and send us more!

— Reply to this email directly, view it on GitHub https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/issues/257#issuecomment-1902783401, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIDX3SS3NSGJE5EJZ4NZBTYPWHIRAVCNFSM6AAAAABB3MNZTWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBSG44DGNBQGE . You are receiving this because you were mentioned.Message ID: @.***>