Echarts question

#1

Hi,

i am a complete noob to coding

i am able to use echarts and reference fields tiddlers etc… ,i either use the <$echarts $text= method in the same tiddler or, i reference the code from another tiddler to use TW filters for dynamic values

but i can only do that for normal echart diagrams , the ones that usually start with option = {.... ,

but then some others (usually the advanced ones ) are not like that ,and usually start with a bit of code before , the option = {.... ,
like for example Examples - Apache ECharts
and some others ,like the 3D ones ,are referencing texture assets like Examples - Apache ECharts

so my question is , can these be used in tiddly wiki , and if so , is it simple like what i am already doing , and maybe just missing a small tweak , or does it require good knowledge of java script?

if its not the latter , can somone please guide me on how to add these type of charts to TW

thank you

#2

I set variables that I end up using in the options section using the <<$echarts $text= method , something like this?

Snippet:

const professions = ['Berserker_Dps', 'Chronomancer_Dps', 'Dragonhunter_Dps', 'Druid_Dps', 'Druid_Support', 'Firebrand_Support', 'Herald_Dps', 'Reaper_Dps', 'Scourge_Dps', 'Scrapper_Dps', 'Scrapper_Support', 'Spellbreaker_Dps', 'Tempest_Support', 'Vindicator_Dps', 'Weaver_Dps']

ProfessionColor = {"Warrior":"#FFD166", "Berserker":"#B39247", "Spellbreaker":"#665429", "Bladesworm":"#19150A", "Guardian":"#72C1D9", "Dragonhunter":"#508798", "Firebrand":"#2E4D57", "Willbender":"#0B1316", "Revenant":"#D16E5A", "Herald":"#924D3F", "Renegade":"#542C24", "Vindicator":"#2A1612", "Engineer":"#D09C59", "Scrapper":"#926D3E", "Holosmith":"#533E24", "Mechanist":"#2A1F12", "Ranger":"#8CDC82", "Druid":"#629A5B", "Soulbeast":"#385834", "Untamed":"#1C2C1A", "Thief":"#C08F95", "Daredevil":"#866468", "Deadeye":"#4D393C", "Specter":"#261D1E", "Elementalist":"#F68A87", "Tempest":"#AC615F", "Weaver":"#623736", "Catalyst":"#311C1B", "Mesmer":"#B679D5", "Chronomancer":"#7F5595", "Mirage":"#493055", "Virtuoso":"#24182B", "Necromancer":"#52A76F", "Reaper":"#39754E", "Scourge":"#21432C", "Harbinger":"#08110B"}
option = {
  title: [
    {text: 'HPS by Profession across all fights', left: 'center'},
    {text: 'HPS across all fights \nupper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR', borderColor: '#999', borderWidth: 1, textStyle: {fontSize: 10}, left: '1%', top: '90%'}
  ],
dataset: [
    {
.
.
.
1 Like
#3

Your referenced example 1 works as is, if you put the edit code text into a testChart tiddler then display it with <$echarts $text={{testChart}} />

image
image1500×690 41 KB

example 2 might need the Echart GL plugin for 3d not sure about that as i haven’t used it, also Root_Path variable would need to be set.

1 Like
#4

Thanks john that was very helpful