Using go-echart...focus on responsiveness about go-echarts HOT 15 CLOSED

Thank you very much... I'll try this and get back to you... I'm away from my pc at the moment. Again, thank you very much for the time.

from go-echarts.

Hi @tobigiwa , sorry for the delay and I do get your email also. :)

IIUC, you wanna make the charts can dynamic update as per to the backend data flushing.
I checked the codebase you provided, it seems that you didn't reload the echarts instance with setOption.
see data transition

You can simply add the JS snippets in your custom template.

setInterval(() => {
  myChart.setOption({
    series: {
      data: // call API to get new data
    }
  });
}, 2000);

from go-echarts.

@Koooooo-7 pardon for jamming into your mail, I was just out of options. Firstly, let me drawn your attention to this:

*** if you noticed the pie chart, it has some other plumbing to render the chart ONLY, unlike the the default go-echart that renders a whole HTML. With the advent of templ and htmx, it would be nice if this plumbing is built-in to the library... I swear to God, it is useful. I got the idea from here https://blog.cubieserver.de/2020/how-to-render-standalone-html-snippets-with-go-echarts/

so here are my problem:

1. going with the plumbing, i cannot make the chart to take up the available space i'm giving to it, the whole of the id=#echart...✅ resolved, with the last commit

2. when window resizes, the chart does not respond to this change...the whole thing overflow, gives a horizontal scrollbar.

I think does are my problem for now... believe me, my first choice was go-echart, when i could not make it work(since last week, it really made me sad), i had to go for chartjs...but it breaking the htmx principle of using hypermedia as a response...that is why am back here.

@Koooooo-7 regarding your response, i cannot make much sense of it,

func createBarChart() *charts.Bar {
	const actionsWithEchartInstance = `
 const myChart = %MY_ECHARTS%;
 window.onresize = function ()
     {
         myChart.resize();
     };`
	bar := charts.NewBar()
	bar.SetGlobalOptions(
		charts.WithTitleOpts(opts.Title{
			Title:    "title and legend options",
			Subtitle: "go-echarts is an awesome chart library written in Golang",
			Link:     "https://github.com/go-echarts/go-echarts",
			Right:    "40%",
		}),
		charts.WithLegendOpts(opts.Legend{Right: "80%"}),
	)
	weeks := []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}

	// bar.AddJSFuncs(opts.FuncOpts(actionsWithEchartInstance))
	bar.SetXAxis(weeks).
		AddSeries("Category A", generateBarItems()).
		AddSeries("Category B", generateBarItems())
	return bar
}

am i supposed to add it to that "actionsWithEchartInstance" string, cause anytime i used that, the chart just goes blank. I copied that solution from a stackoverflow regarding Echart being responsive.

from go-echarts.

from go-echarts.

@Koooooo-7 Please don't curse me for endlessly calling on you...am sorry. I have been able to fix the first problem, the chart taking the space given to it...the issue was with templ not generating an updated template. i have fixed that my removing all the templ first in the makefile, so, if you'll be running the code, please use the make run command.

The second problem is the chart resizing with the window, unsolved.

from go-echarts.

Hi @tobigiwa , glad to hear you that you solve some issue by yourself already...
Plz don't be so rude and I need time to figure it out also.
I'm searching the related issues and try to find solutions, such as apache/echarts#17428 , echart-chart-size .

from go-echarts.

If I'm being rude in anyway... please pardon me, it was not intentional. Thank you for your time.

from go-echarts.

Hi @tobigiwa , could you plz tell me how to reproduce the issue ?

when window resizes, the chart does not respond to this change...the whole thing overflow, gives a horizontal scrollbar.

I don't see a scrollbar here although I make the window much smaller.

from go-echarts.

That there is exactly the problem....I thought the chart was to be confined in that red-like color.
Yunno... get smaller in width has the window size decreases.

from go-echarts.

Or are my expectations wrong?

from go-echarts.

That there is exactly the problem....I thought the chart was to be confined in that red-like color. Yunno... get smaller in width has the window size decreases.

I see, I think it needs the resize call to do the trick that resize the chart container immediately.
Plz add this code in the baseTpl and try again.

 window.addEventListener('resize', function() {
    goecharts_{{ .ChartID | safeJS }}.resize();
  });

from go-echarts.

Thank you @Koooooo-7 , the solution works perfectly, buh i'll like to draw your attention to something else

How can i bundle this into my code locally...cos anyhing my system is not connected to the internet, it just black page.

from go-echarts.

How can i bundle this into my code locally...cos anyhing my system is not connected to the internet, it just black page.

You can simply change the resources to locally resources.

• download the echarts.min.js locally.
• set the resources host as what you want. i.e. the /my/localhost/assets/, it will retrieve the resource as /my/localhost/assets/echarts.min.js

        pie := charts.NewPie()
        pie.SetGlobalOptions(
    	charts.WithInitializationOpts(
    		opts.Initialization{AssetsHost: "/my/localhost/assets/"},
    	)
    

from go-echarts.

I have tried the solution... it works perfectly, thanks again.

from go-echarts.

I have tried the solution... it works perfectly, thanks again.

No prob. :)
Any further questions，plz raise an issue again.

from go-echarts.