Basic guide to formatting Chart.js Charts for DCS
How to initialise your graph
Include the following sources in the header of your webpage
<link rel="stylesheet" href="dcs_graph_styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"> </script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"> </script>
To use the dcs_graph_styles.css locally, ensure that the downloaded file is copied to the same location as your webpage
Alternatively, copy the following code into the header :
<script src="http://docs.nso.gov.lk/nidahas/assets/dvtools/chartjs/dcs_graph_styles.css"</script>
Place your the code for your graph within this wrapper
Code : HTML
Graph Subheading
Code : HTML
<canvas id="grouped_vertical_bar_graph" width=200> </canvas>
< script src="grouped_vertical_bar_graph.js" > </script>
Code : Javascript
Graph Subheading
Code : HTML
< canvas id="horizontal_bar" width=200 > </canvas>
< script src="horizontal_bar.js" > </script>
Code : Javascript
Code : HTML
< canvas id="line_graph" width=200 > </canvas>
< script src="line_graph.js" > </script>
Code : Javascript
Graph Subheading
Code : HTML
< canvas id="pie_chart" width=200 > </canvas>
< script src="pie_chart.js" > </script>
Code : Javascript
Graph Subheading
Code : HTML
< canvas id="doughnut_chart" width=200 > </canvas>
< script src="doughnut_chart.js" > </script>
Code : Javascript
Graph Subheading
Code : HTML
< canvas id="radar_chart" width=200 > </canvas>
< script src="radar_chart.js" > </script>
Code : Javascript
Graph Subheading
Code : HTML
< canvas id="radar_chart" width=200 > </canvas>
< script src="radar_graph.js" > </script>
Code : Javascript