{"id":1927,"date":"2020-05-04T11:21:17","date_gmt":"2020-05-04T09:21:17","guid":{"rendered":"http:\/\/www.phreekz.de\/wordpress\/?p=1927"},"modified":"2020-05-04T11:28:20","modified_gmt":"2020-05-04T09:28:20","slug":"warum-chart-js-nicht-unbedingt-die-beste-wahl-ist","status":"publish","type":"post","link":"http:\/\/www.phreekz.de\/wordpress\/2020\/05\/warum-chart-js-nicht-unbedingt-die-beste-wahl-ist\/","title":{"rendered":"Warum Chart.js nicht unbedingt die beste Wahl ist.."},"content":{"rendered":"\n<p>Man spielt mit irgendwelchen Daten, speichert sie zB in einer Datenbank. Schick. Irgendwann will man sie visuell aufbereiten in einem simplen Diagramm. Ich hatte das jetzt mit Temperaturwerten gemacht. Das Wertepaar besteht aus Temperatur[\u00b0C] und Zeit[timestamp].<\/p>\n\n\n\n<p>Dies ist ein X\/Y-Wertepaar und muss in Chart.js als Scatter angezeigt werden, als Punktewolke. \u00dcbergabe muss zwingend als assocArray [{x: , y: },&#8230;] geschehen. Soweit kein Problem, da man aufeinanderfolgende Punkte auch mit Linien verbinden kann. Daran denken, diese Linie sichtbar zu machen und uU den fill abzuschalten. (js)<\/p>\n\n\n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre class=\"wp-block-verse\"><code>pointRadius:1,\nborderWidth:1,\nborderColor:\"#aaa\",\nshowLine:true,\nfill:false,<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<p>Die Probleme begannen aber, als ich die X-Achse definieren wollte. Erstmal macht es Sinn, den timestamp-Output onTheRun in etwas Lesbares umzuwandeln. Also ein callback (in xAxes:ticks:) definiert, welches timestamp nach Datum (wenn Mitternacht) oder Zeit (bei mir 6, 12 und 18 Uhr) umwandelt. <\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">                        callback: function(value, index, values) {\n                            var date = new Date(value * 1000);\n                            var day = \"0\"+date.getDate()\n                            var month = \"0\"+(date.getMonth()+1);\n                            var hours = date.getHours();\n                            var minutes = \"0\" + date.getMinutes();\n                            if(hours==\"0\"){\n                                return day.substr(-2)+\".\"+month.substr(-2);\n                            }\n                            if(hours==\"6\"||hours==\"12\"||hours==\"18\"){\n                                return hours + ':' + minutes.substr(-2);\n                            } else {\n                                return '';\n                            }\n                        },<\/pre>\n\n\n\n<p>Aber: Chartjs war nicht in der Lage, irgendwas Sinnvolles zu machen. Ich habe es nicht geschafft, dass Chart.js wirklich nur diesen X-Werten ein Grid verpasst. Mit stepSize rumgespielt. Die Daten aus der mySQL abgerundet auf volle Tage. Sobald die Daten nur ein bisschen abweichen &#8211; erstes Datenpaar ist nicht um Mitternacht, Datenpaar entspricht nicht gew\u00fcnschtem X-Gridwert, Array ist l\u00e4nger als volle Tage &#8211; zerf\u00e4llt die Anzeige wieder in irgendwelche absurden Gridwerte. Alle Tipps im Netz beruhen darauf, umzucoden, ob nun \u00fcber die dev-Version oder zus\u00e4tzlichen Methoden, die man huckepack anh\u00e4ngt. Vielleicht h\u00e4tte Chartjs etwas besser agiert, wenn man ts nach Date umgewandelt h\u00e4tte. <\/p>\n\n\n\n<p>Tats\u00e4chlich h\u00e4tte ich in der vergeudeten Zeit l\u00e4ngst ein rudiment\u00e4res, aber funktionierendes X\/Y-Diagramm (egal ob nun canvas oder php-vorgekautes png) geschrieben. Ach ja, nebenbei: Chartjs ist nicht in der Lage, mehrere Datasets (zB per bezeichnung zB als assocArray) zu handlen. Ein neues Dataset wird per push hinzugef\u00fcgt oder per pop gel\u00f6scht. Sprich, dynamisch Kennlinien hinzuzu\u00fcgen oder zu entfernen geht immer mit nem kompletten L\u00f6schen und zusammenstellen der Datasets einher. Man m\u00fcsste sich ansonsten wieder ein eigenes Relationhandling arrayID -> dataset schreiben. Chartjs ist f\u00fcr&#8217;s schnelle hinrotzen ok, aber kommt nicht mit W\u00fcnschen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"688\" src=\"http:\/\/www.phreekz.de\/wordpress\/wp-content\/uploads\/2020\/05\/ChartJS_XAxis_Temp.jpg\" alt=\"chartjs temperatur\" class=\"wp-image-1929\" srcset=\"http:\/\/www.phreekz.de\/wordpress\/wp-content\/uploads\/2020\/05\/ChartJS_XAxis_Temp.jpg 808w, http:\/\/www.phreekz.de\/wordpress\/wp-content\/uploads\/2020\/05\/ChartJS_XAxis_Temp-300x255.jpg 300w, http:\/\/www.phreekz.de\/wordpress\/wp-content\/uploads\/2020\/05\/ChartJS_XAxis_Temp-768x654.jpg 768w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><figcaption>Beispiel, wie chartjs irgendwo irgendwie passig X-Achsen-Label setzt.<\/figcaption><\/figure>\n\n\n\n<p>Hier noch eine <a rel=\"noreferrer noopener\" href=\"https:\/\/pastebin.com\/0j1RdGt9\" target=\"_blank\">json mit Temperaturwerten<\/a>, mit denen Ihr rumspielen d\u00fcrft.<\/p>\n\n\n\n<figure class=\"wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"de\" dir=\"ltr\"><a href=\"https:\/\/twitter.com\/hashtag\/Chartjs?src=hash&amp;ref_src=twsrc%5Etfw\">#Chartjs<\/a> und eine gewisse Freiheit, die X-Achse sinnvoll zu definieren. Geht nicht. In der vergeudeten Zeit h\u00e4tte ich schon ein eigenes Script umgesetzt.<\/p>&mdash; \u2661 chmee,das (@phreekz) <a href=\"https:\/\/twitter.com\/phreekz\/status\/1256907777160740866?ref_src=twsrc%5Etfw\">May 3, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Man spielt mit irgendwelchen Daten, speichert sie zB in einer Datenbank. Schick. Irgendwann will man sie visuell aufbereiten in einem simplen Diagramm. Ich hatte das jetzt mit Temperaturwerten gemacht. Das Wertepaar besteht aus Temperatur[\u00b0C] und Zeit[timestamp]. Dies ist ein X\/Y-Wertepaar und muss in Chart.js als Scatter angezeigt werden, als Punktewolke. \u00dcbergabe muss zwingend als assocArray&hellip; <a class=\"more-link\" href=\"http:\/\/www.phreekz.de\/wordpress\/2020\/05\/warum-chart-js-nicht-unbedingt-die-beste-wahl-ist\/\"><span class=\"screen-reader-text\">Warum Chart.js nicht unbedingt die beste Wahl ist..<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":1929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[411,110,264,413,412],"class_list":["post-1927","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","tag-chartjs","tag-coding","tag-javascript","tag-temperatur","tag-timestamp","entry"],"_links":{"self":[{"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts\/1927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/comments?post=1927"}],"version-history":[{"count":4,"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts\/1927\/revisions"}],"predecessor-version":[{"id":1932,"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/posts\/1927\/revisions\/1932"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/media\/1929"}],"wp:attachment":[{"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/media?parent=1927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/categories?post=1927"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.phreekz.de\/wordpress\/wp-json\/wp\/v2\/tags?post=1927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}