score:1
i'm doing this in asp.net/c# like this:
my data from the db looks like this:
size:'38 inch' minimum:80 standard:85 maximum:90
create a model
namespace yournamespace.models
{
public class chart
{
public string[] labels { get; set; }
public list<datasets> datasets { get; set; }
}
public class datasets
{
public string bordercolor { get; set; }
public bool fill { get; set; }
public string label { get; set; }
public string backgroundcolor { get; set; }
public string type { get; set; }
public string borderwidth { get; set; }
public int[] data { get; set; }
}
public class configurations
{
public string crops { get; set; }
public int hp { get; set; }
public string pump { get; set; }
public string tractormanufacture { get; set; }
public string tractormodel { get; set; }
}
}
get your data and load up your model from your controller. i've added a 3 series for the bar chart (min,standard,max) and a line - add the line first. the trick for loading the data is that it has to be an array of integers, for example: datamin.toarray().
list<string> labellist = new list<string>();
foreach(chartfromdb db in cdb)//chartfromdb holds the structure mentioned above
{
labellist.add(db.size);
}
chart _chart = new chart();
_chart.labels = labellist.toarray();
_chart.datasets = new list<datasets>();
list<datasets> _dataset = new list<datasets>();
list<int> datalist = new list<int>();
list<int> datamin = new list<int>();
list<int> datastandard = new list<int>();
list<int> datamax = new list<int>();
//line goes first
for (int y = 0; y < cdb.count; y++)
{
datalist.add(conf.hp);
}
_dataset.add(new datasets()
{
type = "line",
bordercolor = "#ff6347",
fill = false,
label = "your pto-hp",
data = datalist.toarray(),
backgroundcolor = "#ff6347",
borderwidth = "2"
});
for (int i=0;i< cdb.count; i++)
{
datamax.add(cdb[i].maximum);
datastandard.add(cdb[i].standard);
datamin.add(cdb[i].minimum);
}
_dataset.add(new datasets()
{
type = "bar",
fill = true,
label = "base - minimum",
data = datamin.toarray(),
bordercolor = "#ffe07c",
backgroundcolor = "#ffe07c",
borderwidth = "1"
});
_dataset.add(new datasets()
{
type = "bar",
fill = true,
label = "standard - minimum",
data = datastandard.toarray(),
bordercolor = "#e4a317",
backgroundcolor = "#e4a317",
borderwidth = "1"
});
_dataset.add(new datasets()
{
type = "bar",
fill = true,
label = "high performance - minimum",
data = datamax.toarray(),
bordercolor = "#ad9754",
backgroundcolor = "#ad9754",
borderwidth = "1"
});
_chart.datasets = _dataset;
return json(_chart, jsonrequestbehavior.allowget);
on your client, make an ajax/api call to your controller and pass the return data to some function and load
function loadcharts(data) {
//the hi/low will allow you to dynamically adjust the upper/lower bound of the grid
var hi = somemethodtogettheupperboundforyourchart;
var lo = somemethodtogetthelowerboundforyourchart;
var ctx = document.getelementbyid('canvas').getcontext('2d');
var mybarchart = new chart(ctx, {
type: 'bar',
data: data,
options: {
title: {
display: true,
text: 'some title for your graph'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xaxes: [{
stacked: false
}],
yaxes: [
{
ticks: {
max: hi ,
min: lo,
stepsize: 10,
callback: function (value, index, values) {
return value + " some description for your value";
}
}
},
{
stacked: false
}, {
legend : {
display: false
}
}
]
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
}
}
});
}//loadcharts
you will get something that will look like this:
Source: stackoverflow.com
Related Query
- Multiple stacked bar chart using ChartJs
- Using ChartJS to create a multiple grouped bar chart - see picture below
- Draw stacked horizontal bar chart with Average line using ChartJS
- Chartjs v2.0: stacked bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Click event on stacked bar chart - ChartJs
- How to create stacked bar chart using react-chartjs-2?
- Chartjs - show elements in all datasets on hover using bar chart
- X-axis multiple colored label for bar chart using chart.js
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- Stacked bar chart starting from 0 - ChartJS React
- Stacked bar chart with rounded corner of bar using Chart.js
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Pagination in Bar chart using ChartJS
- How to draw multiple color bar in a bar chart using chart.js
- Stacked Floating Horizontal Bar using ChartJS
- How to highlight single bar in bar chart using Chartjs
- Bar Chart Not Stacking When Using ChartJs
- ChartJs Stacked Bar Chart
- Stacked bar chart with chartjs with included values
- Chartjs Stacked bar chart not displaying correctly
- Stacked Bar chart fixed width bar chart issue - Chartjs
- Multi-colored legend stacked bar chart Chartjs
- ChartJS add custom tooltip to a stacked bar chart
- Vertical stacked bar chart using SharePoint List
- Chartjs - Stacked bar chart data order causes invisible other values
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- Chartjs - Stacked bar chart blocking other values
- Bar Chart in Angular JS Using Chartjs
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
More Query from same tag
- Problem with Charts.js in vue. anyone can help step by step
- On click of legend, bar is hiding without issue but data value is not hiding in charts.js
- React Native Updating State with Api
- charts.js global options gridLines
- How to display different datasets from different ajax calls in the same ChartJS?
- min and max tag is not showing in chart chart.js
- How to remove trial version watermark in canvasjs using Jquery (without license)
- ChartJS unique datasets per label
- Using chartjs to limit data?
- chart.js scale xaxis with date, strange renderer
- Showing points data withou hover chartjs
- Add spaces/margin between bars - Chart.js
- Dynamic line chart with chart.js and PHP
- ChartJS tooltip scrollbar to prevent data overflow?
- How to insert php in data chart.js
- Draw points and lines inside a bar in bar chart
- setting chartjs global configuration using chartkick
- Mixed chart barchart won't show
- How to fill remaining polar area with color
- Chartjs: how to remove datapoint info from label?
- Creating dynamic object to reorganize API response using Typescript
- Chart.js pie tooltip getting cut
- Chart.js using the value of certain data in external json file
- display multiple charts angular.js chart.js
- How to export Chart.js chart using toBase64Image, but with no transparency?
- Drilldown on barchart using CHARTJS Devexpress
- Chart JS - Remember hidden label state after page refresh
- Avoiding Empty Curly Braces in MongoDB Aggregation
- gradient background on radar chartjs
- chart.js v3 - data decimation not working with zoom plugin