Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Contoh </title>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
- </head>
- <body>
- <div class="container">
- <canvas id="myChart" width="50" height="50"></canvas>
- </div>
- <script>
- var ctx = $("#myChart").get(0).getContext("2d");
- var myChart = new Chart(ctx);
- var areaChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [
- {
- label: "Electronics",
- fillColor: "rgba(210, 214, 222, 1)",
- strokeColor: "rgba(210, 214, 222, 1)",
- pointColor: "rgba(210, 214, 222, 1)",
- pointStrokeColor: "#c1c7d1",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(220,220,220,1)",
- data: [65, 59, 80, 81, 56, 55, 40]
- },
- {
- label: "Digital Goods",
- fillColor: "rgba(60,141,188,0.9)",
- strokeColor: "rgba(60,141,188,0.8)",
- pointColor: "#3b8bba",
- pointStrokeColor: "rgba(60,141,188,1)",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(60,141,188,1)",
- data: [28, 48, 40, 19, 86, 27, 90]
- }
- ]
- };
- var barChartOptions = {
- //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
- scaleBeginAtZero: true,
- //Boolean - Whether grid lines are shown across the chart
- scaleShowGridLines: true,
- //String - Colour of the grid lines
- scaleGridLineColor: "rgba(0,0,0,.05)",
- //Number - Width of the grid lines
- scaleGridLineWidth: 1,
- //Boolean - Whether to show horizontal lines (except X axis)
- scaleShowHorizontalLines: true,
- //Boolean - Whether to show vertical lines (except Y axis)
- scaleShowVerticalLines: true,
- //Boolean - If there is a stroke on each bar
- barShowStroke: true,
- //Number - Pixel width of the bar stroke
- barStrokeWidth: 2,
- //Number - Spacing between each of the X value sets
- barValueSpacing: 5,
- //Number - Spacing between data sets within X values
- barDatasetSpacing: 1,
- //String - A legend template
- legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
- //Boolean - whether to make the chart responsive
- responsive: true,
- maintainAspectRatio: true
- };
- barChartOptions.datasetFill = false;
- myChart.Bar(areaChartData, barChartOptions);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
