Comments (15)
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:
-
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
-
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.
Related Issues (20)
- Tooltip and Y axis label HOT 7
- Overlapping labels in xAxis with type="time" HOT 3
- Formatting go-echart tooltip value HOT 4
- Accessing go-echart instant in the browser HOT 3
- Reconciling v2.4.0-rc2 snipperRender with custom snippet render HOT 6
- [Question] undefined: opts.Bool. Cannot compile due to undefined: opts.Bool HOT 2
- Two questions 1. Is it possible to determine the size of the liquid chart 2. Can I simply display the liquid chart without a legend? HOT 1
- [Question] How to render body only? HOT 3
- [Question] learning Go and Go-Echarts. Question concerning the gauge HOT 2
- Adding JSFuncStr destroys the chart HOT 2
- format value data and tooltip for piechart HOT 1
- [Bug] Colors for series in the legend do not match the colors set HOT 5
- Overlaped charts HOT 4
- Possible to customize the size of the line Mark Points? HOT 2
- [Bug] Phantom mark points HOT 2
- [Question] Who to set id for a series? HOT 1
- [Question] Line Chart: how to specify animation duration HOT 2
- [Question] Possible to customize the color of the Mark Points? HOT 12
- [Bug] PageTitle does not work on liquid or gauge charts HOT 8
- [Bug]cannot use true (untyped bool constant) as "github.com/go-echarts/go-echarts/v2/types".Bool value in struct literal HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from go-echarts.