Posts

Showing posts from April, 2021

Customizable multi-type, multi-y axis code ChartJS - Part 2

Image
Following the part code of ChartJS 2.x, after  part 1 of ChartJS , we discussed the multi-line display of the chart. We continue to present to you some ChartJS modifications that may be required for your requirements in part 2 of this article will edit some more interesting options. In addition to the multi lines, we will have multi y axes, which is a very important property when you want to display multiple lines with different data indicators on the same chart. Highlights in this post: – Show multiple yAxis columns, corresponding color annotation. – Connect the 2 point line with data or 2 adjacent points. – Ignoring the empty point or not ignore the empty point. – Show and hide the lines with one click.   Connect the 2 point line with data and Ignoring the empty point.   Connect the 2 adjacent points and not ignore the empty point.   Show and hide the lines with one click head label.   1. HTML tag to display Chart <div class=”chart-conta...

Code Chart JS with multi type - Part 1

Image
We all know how powerful ChartJS 2.x is when it comes to chart rendering, and in some cases ChartJS is more robust when compared to Google Chart. In this content, we will talk about multi-type show in ChartJS. Assuming you are using PHP server, we need json_encode to show in JS. In addition to the line chart, you can set up in the form of bar, radar, … Line chart Bar chart   1. Html tag to show chart: <div class=”chart-container” style=”position: relative; height:auto; width:50%; margin:0 auto”> <canvas id=”myChart” width=”900″ height=”300″></canvas> </div> – Set default data_source get from php: $data_source = [ “labels” => [ ‘2020-01’, ‘2020-02’, ‘2020-03’, ‘2020-04’, ‘2020-05′, ], “el1” => [ ’10’, ’15’, ’20’, ’25’, ’31’ ], “el2” => [ ’11’, ’22’, ’22’, ’28’, ’32’ ], “el3” => [ ’14’, ’25’, ’26’, ’30’, ’33’ ] ];   2. Css: <style> canvas{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style...