I am trying to decorate a chart using Apache ECharts dynamic data.
(https://echarts.apache.org/examples/en/editor.html?c=dynamic-data)
I want the updated data to flow naturally, not simply delete and add (shift and push).
Similar plugins exist for chart.js.
(chartjs-plugin-streaming)
Is there any way to get the same result in ECharts?
I'm still in the technical review phase, only testing through the demo site. I would like to see if the technology is feasible and if possible, I would like to obtain a sample.
I pretty new to both Highcharts and Javascript. I would am working on a treemap and would like to incorporate a slider to filter out datapoints based on their value key.
I am trying to use the slider code from this: http://jsfiddle.net/BLKQf/
When I integrate it into my code, the slider doesn't actually show up and my chart is not showing up.
http://jsfiddle.net/56huej7j/
I think it may be because my Data is in JSON and not a list (as in the sample), but I don't know enough javascript to fix it.
EDIT:
I got it working. Working solution at:
http://jsfiddle.net/8n3hfcn8/
You've got a few problems:
Missing an ending });
Not including jQueryUI (look at the javascript dropdown in the javascript panel. The 1st referenced fiddle includes jQuery UI 1.9.2
You are not setting the data correctly for a treemap.
http://jsfiddle.net/56huej7j/1/
I am working with Chart.js (http://www.chartjs.org/docs) and I am dealing with some problems here.
Is it possible to show values for each data point? It seems it is lacking that functionality or am I wrong?
I am also using the stacked bar chart (with additional line chart applied on it) so I would like to show the value for each data point for these two bar data sets (excluding the Line chart)
The app is made with Ionic 2 (Angular2) and it seems, that I don't have all of the possibilites to call different helpers provided by Chart class. I see that a lot of examples include such things.
Is it safe to use this in production, regarding the support of the project?
Thank you very much in advance!
[background]
currently I'm working on a little web project for data visualization and I want to use create a tagcloud or wordcloud with cloud layout of the javascript d3 framework (d3 cloud layout).
I've built some examples that almost satisfy my requirements. The only thing that doesn't work is, that some words/tags aren't displayed in my tag cloud.
As far as I understand the placing algorithm for the tags, this comes because the algorithm finds no suitable place to position all tags without overlaying other tags.
My question: How can I display all available tags and is there a setting in the framework to do this?
I'm rather new to javascript so I had quite a hard time to understand the whole cloud layout and the positioning algorithm to find a way to achieve my goal.
I am new to the world of SVG and D3, learning as I implement. Facing an issue with one of the websites that I am currently working on.
Requirement:
We want to create a custom graph (similar to bar graph) that has a set of bars that represent my data points and certain icons are embedded into these bars based on the type of bar graph data. The graph is representing a person's achievements throughout their career. On hover of the bar we show a custom popup that has a brief description of the bar (see below for an example). Some bars have an additional arrow that represents whether the bar is representing an experience that the user is currently pursuing.
Progress so far:
As you can see my profile under TIMELINE section.
So, whats wrong?
Everything works fine (as you can see from the screenshots) on Chrome. All other browsers render the graph without the icons. You can view my profile on Chrome and Firefox.
I copied d3 generated SVG HTML code and pasted it in jsfiddle to test it out on all browsers and found that all browsers are rendering it: (ignore the colors, I have not applied CSS to it, but the icons show up) http://jsfiddle.net/EbpPG/1/
See JS fiddle link
Check my profile to see the graph. The logic to generate the graph can be found in chart.js file, createTimelineChart() function.
Can someone have a look at it and let me know what's the mistake I am making?
The problem is obviously how you dynamically generate the SVG. The path element is generated in the wrong namespace. This typically happens when you're using something like jQuery's append with a string:
$('svg').append('<path d="m0,0 h100"/>')
This will generate an HTML-namespaced path element, which does not exist. (Interestingly, Chromium is not even showing it in the developer tools.)
Firebug is good at showing you problems of this kind. In the HTML panel, the wrongly namespaced elements are shown in a lighter color. Right-clicking on them in the HTML panel gives you the option to examine in the DOM panel, and there you can see what the namespaceURI property is.
So, use either plain DOM manipulation methods or, if you're already using d3 anyway,
d3.select('svg').append('svg:path').attr('d','m0,0 h100')
Check out with Firefox DOM Inspector and you'll see that the path element that forms the icon is in the HTML namespace rather than the SVG namespace which would be required for it to appear.
Are you passing this data though decodeHTMLEntities, that might be recreating the element in the wrong namespace, you'll need to step though with a debugger to see when it goes wrong.
If you save the d3 generated page then when it's reread by any UA it will pick the right namespace which is why the jsfiddle works.