actually I'm doing this internship for my school i need to use the information on a very large database to actually draw a pie chart on the website i am developing for them. they want to know the number of ports used versus not used also they want to know for each equipment the number of ports used versus not used in such way that any new data entered can automatically change the graph. the only values present are "used" and "not used" how do i use these information to draw the pie chart?. thank you
Since you don't list the database structure here is a generic SQL query:
SELECT status, COUNT(*)
FROM yourTable
GROUP BY status
Here status refers to the column that states "used" or "not used" and yourTable is, well, the table that contains this info. Once you have this you can create a pie chart in highcharts via:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Ports in use'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'used',
y: 56 // from the SQL query
}, {
name: 'not used',
y: 24, // from the SQL query
sliced: true,
selected: true
}]
}]
});
Live demo.
To have this chart updated I would recommend a timer to re-query the database on an interval and refresh the data in the chart. Because you do not mention any other dependencies I am just going to link out to how to update a highcharts chart. If you provide more info like what libraries you are using or what framework the webpage is using then a more detailed answer can be provided.
Related
Currently, I am creating quickcharts line graphs and attached it to my mail body. But the dataset is fetched using a mysql query and the dataset changes time to time. Here is my sample code.
$chartConfig = "{
type: 'line',
data: {
labels: [$date_array2],
datasets: [{
data: [$value_array2],
backgroundColor: ['#F5DEB3'],
fill: false,
}]
},
options: {
title: {
display: true,
text: 'UGW Max Daily Throughput, in Gbps',
},
legend: {
display: false
},
}
}";
In here both $date_array2 and $value_array2 are fetched using a mysql query. But now I need to make a scale to visualize this graph more clear, so I dont want to start the graph with zero. But I could not make min and max values since the dataset is changing day by day. What I need to do is, I need to check the dataset(only 7 day) and idenitify the min and max values and adjust the y axis. I have read https://www.chartjs.org/docs/2.9.4/charts/line.html but couldnot find a proper solution.. Can someone propose a method to do this?
I need to show grid lines when my chart has no data. (For now, It shows a blank division when there is no data) How to show grid lines? Is it possible to do? I tried but couldn't find an useful answer. Following is the method I used to draw the chart.
public drawChart(): void {
this.options = new StockChart ({
rangeSelector: {
selected: 0,
inputEnabled: false,
},
chart: {
type: 'spline',
},
yAxis: {
labels: {
formatter: function(): string {
return this.value + '';
},
},
opposite: false,
},
plotOptions: {
series: {
showInNavigator: true,
},
},
series: [],
});
}
To show the gridlines yAxis needs to have defined some min and max values. When series is applied those values are calculated and set to the yAxis, but in the case of the empty data, we need to apply them as the dummy values. Later, when data will be applied we can reset those values by using the yAxis.update feature.
Demo: https://jsfiddle.net/BlackLabel/zcsp8nfr/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I would like to create a SAPUI5 combination chart - a column chart with a line for a particular category for each month that will compare one year to another. There are about 11 possible categories that the user can choose but the chart would only show one category's information at a time.
It would be similar to the following for one category:
I can create the chart to show data but I am having trouble converting it to use the data based on a category. I would think I can do what I want but I think the issue is in how my data is supplied.
This is my json (I am showing two categories in the data for example - I would like to be able to apply a filter for the category the user chooses):
{
"bullet": [{
"field":"Products Classified",
"months":[{
"month":"1",
"current":"17",
"previous":"140"
} ,{
"month":"2",
"current":"37",
"previous":"66"
},{
"month":"3",
"current":"60",
"previous":"66"
},{
"month":"4",
"current":"41",
"previous":"121"
}]
}, {
"field":"Products Not Classified",
"months":[{
"month":"1",
"current":"7",
"previous":"25"
} ,{
"month":"2",
"current":"50",
"previous":"78"
},{
"month":"3",
"current":"55",
"previous":"56"
},{
"month":"4",
"current":"45",
"previous":"60"
}]
}]
}
Here is part of my controller....
var oModel = new JSONModel("ByYear_sum.json");
sap.ui.model.FilterOperator.EQ, filterText);
var oDataset = new FlattenedDataset({
dimensions: [{
name: "Month",
value: "{month}"
}],
measures: [{
name: "Start Year",
value: "{current}"
},{
name: "End Year",
value: "{previous}"
}],
data: {
path: "/bullet"
filters: [oFilter]
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
visible: true,
formatString: '#,##0'
}
},
valueAxis: {
title: {
visible: false
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: 'Year Comparison'
}
});
var feedValueAxis = new FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Start Year", "End Year"]
}),
feedCategoryAxis = new FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Month"]
});
The value of filterText would be used to show the chart information for the chosen category (for example Products classified or Products Not classified).
I tried putting /months/ in front of the values (for example "{/months/previous}") to get to the values for the category (i.e. Products classified) but it doesn't seem to find the data properly (I get no data).
I would also like to display the text value of the month, not the number, how can I apply a formatter to the value?
My example chart shows year numbers....The years being compared come from user input, I currently cannot figure out how to get the values of the years chosen to show - I had to put 'Start Year' and 'End Year'. Is there a way to make the legend and popover show the year values (so dynamic based on user input)? Everything I tried gave me errors and wouldn't display the chart - I think because the feeds needed to match the same text and when I tried using a value it couldn't match.
I was finally able to get this to work, with some guidance from others.
1) In the title, I was able to set and update the title properties when the user chose a different filter.
2) The path was incorrect as well....it should have been /bullet/0/months - the '0' changes depending on the filter. I just had to get the index of the category chosen and use that for the path.
3) I changed my data to return the month abbreviation, instead of the number.
4) I was finally able to get the years to show both in the legend and the popup if you click a data point. In the FlattenedDataSet definition, I put a variable name in that is passed in when creating the FlattenedDataSet - so example: name was name: sYr, where sYr was passed in and the value of the year. In the FeedItem creation, the values look like: 'values': [sYr, eYr] I thought I had tried these, but it seemed to work with all the other changes that were made. I just had to create new FlattenedDataSet and FeedItems (and remove the old FeedItems) and update the chart with the new values.
Can I create these types of charts using Google charts where I can set the target at top also.
Are these charts bar type. I didn't find anything which can make bar charts like this or is this a completely different chart type.
Edit
I found the solution at Google Chart Tools - How to create stacked bar chart. These are stacked bar charts. but still I didn't find how to put target at the top
Use a ComboChart, and set the series.<series index>.type option to 'bars' for the "Pending", "Loss", and "Won" series. Set the series.<series index>.type to 'steppedArea' and series.<series index>.opacity to 0 for the "Target" series. Set the connectSteps option to false. Here's one way to do it, assuming your data is in the order "Won", "Loss", "Pending", "Target":
var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
isStacked: true,
connectSteps: false,
series: {
0: {
// Won
type: 'bars'
},
1: {
// Loss
type: 'bars'
},
2: {
// Pending
type: 'bars'
},
3: {
// Target
type: 'steppedArea',
areaOpacity: 0
}
}
});
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.