I have am building a chart that has nested data. Is it possible within Everviz to place another chart within the tooltip of a chart? I found a way to do this via Highcharts but when I add it in to the HTML code, it doesn’t appear to work or Everviz crashes. Has anyone been able to get chart in tooltip to work and if so, what method did you use? TYIA!
It’s possible alright:
https://app.everviz.com/create?uuid=J8y-sFoAO/?v=4
Using custom code:
function renderChart(point) {
Highcharts.chart('hc-tooltip', {
chart: {
height: '100px',
type: 'pie',
animation: false
},
title: {
text: 'Chart inside tooltip'
},
series: [{
data: [2,2],
dataLabels: {
enabled: false
}
}]
});
}
Highcharts.addEvent(
Highcharts.Tooltip,
'refresh',
function() {
renderChart(this.chart.hoverPoint)
}
)
Highcharts.merge(true, options, {
tooltip: {
useHTML: true,
headerFormat: '',
pointFormat: '<div id="hc-tooltip"></div>'
}
})
Right now it’s just loading predefined data, and it’s also big. There is a few kinks I’m not quite sure how to work out:
- As mentioned it’s fairly big
- We’re not picking up our theme colors
- We don’t have good methods for getting the chart data inside of custom code at the moment
- We ought to disable animation
This task looks to be fairly large in scope, but I can show this demo to the team and maybe this will be something that we will better support in the not too distant future.
Thank you for sending this along. What i am trying to do may not be possible as I need a decent amount of detail in the tool tip chart (mainly labels). This is my base chart with the main categories of the data. Ideally, this secondary chart would live in the tooltip for the Word of mouth bar (second from top).
Let me know if nesting a everviz chart within an everviz chart tooltip is possible; that would be awesome!
Many thanks for all your help!
jes
1 Like
That would be so cool, but we need to save that for our first Hackathon, I don’t think this is near the mid-term horizon, but things change and suddenly it is. You’ll find out when it is, though!
Looking at your examples, this is something I imagine is and can be more realistic in the shorter term. You would not be the first to request it.
Whats vertical can simply be flipped to a bar chart; the drilldown could work with a pie as well.
Oh that drill down would work! I can play with the code in that post and let you know if I run into any issues.
omg if we can everviz charts in everviz charts 
2 Likes
meta!
I’ve tried this before, with varying success. I’m writing out for any onlookers to this post in the future, and you, but you seem to have handle of things!
You need to import the drilldown module (this is where I think we might need to do some minimal work our end)
But you may be able to load it in a similar way as the Pattern fill module.
Your reference, is straight from the book: the Highcharts API documentation. Working out how if you can nest the data somehow in custom code and link that is the approach to take I reckon. The charts previosuly linked, can be opened in JSFiddle where you can inspect how it works.
Let me know if you have any questions about anything on your way!
1 Like
Thank you for all your help, Martin! I was able to get the code updated and working in JSFiddle. However, every time I place the HTML source script into the HTML editor of my chart, it is removed upon refresh as is the JS code i edited in JSFiddle. Nothing is sticking after refresh.
Also, do I need to clear out data from the data tab of the chart or do I need to have at least the first level of data present?
every time I place the HTML source script into the HTML editor of my chart, it is removed upon refresh as is the JS code i edited in JSFiddle. Nothing is sticking after refresh.
If you mean that pasting the content from JSFiddle into custom code, it usually means that there was some failure to read the custom code. It’s a weird and rare bug that I haven’t reported, but just live with myself for now.
Also, do I need to clear out data from the data tab of the chart or do I need to have at least the first level of data present?
This is the hard part: figuring out the interface for doing this. How could we add this third dimension of data into a specific row essentially. Do we need more data tables, or can it be done without?
To me, the simplest thing is just take the CSV that you have and write out all the data in the Highcharts format. This sounds like manual labor, you might think, but ChatGPT is helpful—especially for converting the data when you only have the CSV.
In terms of writing the code, the free version was not so useful, so I used my paid access to GPT-4, and I got very useful results.
Next was getting that into everviz. Pretty much just pasting the variables and Highcharts.chart('container', {...}) into custom code.
Since everviz creates a chart for you, we can do the usual thing and merge our new settings in. Changing the .chart('container', {...}) to .merge(true, options, {...}) is all it takes.
To our bitter disappointment, issues remain after publishing and including
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
in our webpage, before the embed of the chart itself. It turns out you just need to delete options.data first thing in your custom code—so no, we’re not using our data sheet at all.
Our very own drilldown in everviz
I’m not including the chart in this post, because it is currently necessary to load it as a Script, this is because we are including the drilldown module for it to use, and our forum software does not let us do that. There is a button to copy this chart into your account, however.
https://app.everviz.com/create?uuid=D0i_Fb8DF/
At this point, there is the only caveat that this cannot currently load an arbitrary amount of charts, it only loads the one you gave me; it also does not work in the editor, in addition to not opening at all in subsequent loads of the project. Despite the shortcomings, this is a very viable start to continue working on, and I see bright future ahead.
1 Like
Hi @JesStandefer, I have significantly reworked this example to what I consider a rather useful and usable extension!