Hi all! I am pretty new to TiddlyWiki, and was looking for data
visualisation plugins, but as far as I could see, they are yet to be fully
developed. The main target is to summarise data from several articles in
scatter plots, being able to update the plot when new research arrive. Then
I stumbled across the chartist.js library
<https://gionkunz.github.io/chartist-js/index.html>, which seems perfect
(?). But I wasn't able to include the necessary scripts in my tiddlers; I
added a tiddler with
<link rel="stylesheet" href="
https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css";>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js";
></script>
and tagged it $:/tags/RawMarkup, and tried to add
<div class="ct-chart ct-perfect-fourth"></div>
<script>
var data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or in this case series
data arrays
series: [
[5, 2, 4, 2, 0]
]
};
// Create a new line chart object where as first parameter we pass in a
selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
new Chartist.Line('.ct-chart', data);
</script>
into another tiddler, but no plot appeared.. I guess the problem is related
to the latter script, but are there any simple workarounds to make it work?
Or has the chartist.js to be loaded as a library?
As a side note; I guess it is simpler to use an approach combining CSS and
SVG, such as https://css-tricks.com/how-to-make-charts-with-svg/ It seems
quite easy to implement into macros, and may provide ok looking scatter
plots
<https://codepen.io/team/css-tricks/pen/cb00290fb3ee28378498eca296d7c395/>.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/dd2b1129-1fbe-4613-b3b5-ceaccbff04ce%40googlegroups.com.
