Want to change chartjs bar width and on click of bar stroke values from another div should get change

159
December 18, 2017, at 9:33 PM

I am using chartjs script to display bar chart. Want to reduce width of bar and on click of bar stroke another div should get change with proper values from database. I have gone through all queries related with chartjs on stackoverflow but failed to exact implement it. here is my code.

 $(function () {
/* ChartJS
 * -------
 * Here we will create a few charts using ChartJS
 */
//--------------
//- AREA CHART -

//--------------

var areaChartData = {

  labels  : [document.getElementById("date1_w").value, 
document.getElementById("date2_w").value, 
document.getElementById("date3_w").value, 
document.getElementById("date4_w").value, 
document.getElementById("date5_w").value, 
document.getElementById("ldate_w").value],
  datasets: [
    {
        label               : 'Total View Count',
      fillColor           : '#0087be',
      strokeColor         : '#0087be',
      pointColor          : '#0087be',
      pointStrokeColor    : '#0087be',
      pointHighlightFill  : '#fff',
      pointHighlightStroke: 'rgba(220,220,220,1)',
      barPercentage: 0.5,

      data                : 
[document.getElementById("graph_countfive1").value, 
document.getElementById("graph_countfour1").value, 
document.getElementById("graph_countthree1").value, 
document.getElementById("graph_counttwo1").value, 
document.getElementById("graph_countone1").value,
document.getElementById("graph_count1").value]
    },
    {
      label               : 'Total Visitors Count',
      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)',
        barPercentage: 0.5,

      data                : 
[document.getElementById("graph_countfive1_visitor").value, 
document.getElementById("graph_countfour1_visitor").value, 
document.getElementById("graph_countthree1_visitor").value, 
document.getElementById("graph_counttwo1_visitor").value, 
document.getElementById("graph_countone1_visitor").value, 
document.getElementById("graph_count1_visitor").value]
    },

  ],

}

//-------------
//- BAR CHART -
//-------------
var barChartCanvas                   = 
$('#barChart').get(0).getContext('2d')
var barChart                         = new Chart(barChartCanvas)
var barChartData                     = areaChartData
barChartData.datasets[1].fillColor   = '#004069'
barChartData.datasets[1].strokeColor = '#004069'
barChartData.datasets[1].pointColor  = '#004069'
var barChartOptions                  = {
             options: {
             scales: {
                  xAxes: [{
                      barPercentage: 1,
                      categoryPercentage: 0.5 / 10 * barChartData.datasets[0].data.length
                  }],
                  yAxes: [{
                    ticks: {
                      beginAtZero:true
                    }
                  }],
                }
             },
  //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  : false,
  //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         : 15,
  //Number - Spacing between data sets within X values
  barDatasetSpacing       : -175,
  //Boolean - Whether to show a stroke for datasets
  datasetStroke           : true,
  barDatasetWidth       : -10,
  dataPointMaxWidth: 20,
  //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,

      // Boolean - Determines whether to draw tooltips on the canvas or not
    showTooltips: true,
    // Array - Array of string names to attach tooltip events
    tooltipEvents: ["mousemove", "touchstart", "touchmove"],
    // String - Tooltip background colour
    tooltipFillColor: "rgba(0,0,0,0.8)",
    // String - Tooltip label font declaration for the scale label
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    // Number - Tooltip label font size in pixels
    tooltipFontSize: 14,
    // String - Tooltip font weight style
    tooltipFontStyle: "normal",
    // String - Tooltip label font colour
    tooltipFontColor: "#fff",
    // String - Tooltip title font declaration for the scale label
    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    // Number - Tooltip title font size in pixels
    tooltipTitleFontSize: 14,
    // String - Tooltip title font weight style
    tooltipTitleFontStyle: "bold",
    // String - Tooltip title font colour
    tooltipTitleFontColor: "#fff",
    // Number - pixel width of padding around tooltip text
    tooltipYPadding: 6,
    // Number - pixel width of padding around tooltip text
    tooltipXPadding: 6,
    // Number - Size of the caret on the tooltip
    tooltipCaretSize: 8,
    // Number - Pixel radius of the tooltip border
    tooltipCornerRadius: 6,
    // Number - Pixel offset from point x to tooltip edge
    tooltipXOffset: 10,
    // String - Template string for single tooltips
    //tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
   //tooltipTemplate: "<%=datasetLabel%> : <%= value %>",
    // String - Template string for single tooltips
    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %>",


}
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions)

});

</script>
 <script>

//function to calculate active points /* $(function (evt) { var item = barChart.getElementAtEvent(evt)[0];

if (item) {
    var label = barChart.data.labels[firstPoint._index];
    var value = 
 barChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
}
});
document.getElementById("barChart").onclick = function(evt){
var activePoints = barChart.getElementsAtEvent(evt)[0];
// => activePoints is an array of points on the canvas that are at the same 
position as the click event.
}; */
</script>
READ ALSO
Amchart scatter plot with time series data

Amchart scatter plot with time series data

I m trying to plot a scatter graph using Amcharts library and my data is in time seriesI m having a hard time to plot it,

169
Creating a plugin which will allow utilities of a backend streamwriter and streamreader

Creating a plugin which will allow utilities of a backend streamwriter and streamreader

I was looking trough the permisions and API's of chroom when creating an extension and I could'nt find the suiteable one for my needsBlob is not an option because we don't need download , we need to create txt file ,not in downloads folder, which can be updated...

145
Change style for element from ng-repeat

Change style for element from ng-repeat

I am trying to uniqeley identify buttons in a tablerow, so I can change the style if one of them is clickedHere is the table i am working on:

159