I currently have a working chart using this:
$.ajax({
type: "GET",
url: graphURL,
data: "",
cache: false,
success: function (response) {
//alert(response);
jsonData = JSON.parse(response);
if(jsonData != '' && jsonData != null) {
var category = jsonData.XData.split(",");
var series = jsonData.YData.split(",");
series = $.each(series, function (i, amt) {
series[i] = parseFloat(series[i]);
});
//Display chart
UserChart(series, category, jsonData.YAxisTitle);
}
}
});
... but it doesn't allow me to set options like if I wanted an area chart instead of line etc.. how do I modify the code so I could include something like the following which I see in all examples:
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL Stock Price',
data : data,
type : 'area',
threshold : null,
tooltip : {
valueDecimals : 2
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
}
}]
The problem is that series is the series points' data.
Try to pass a serie to UserChart.
Like the following:
var points = jsonData.YData.split(",");
points = $.each(series, function (i, amt) {
points[i] = parseFloat(series[i]);
});
// here you set your serie config
var serie = {
name: 'AAPL Stock Price',
type: 'area',
data: points,
threshold : null,
tooltip : {
valueDecimals : 2
}
};
UserChart(serie, category, jsonData.YAxisTitle);
Then in UserChart you should add the serie directly to the chart series.
Example:
var options: {
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : []
};
function UserChart(serie, category, jsonData.YAxisTitle) {
options.series.push(serie);
// add your code
}
Related
I'm using C3 chart to present some data on my project and I want to show up legends (Label in my case) instead of numbers in the AcisX :
Data json format :
[
{"Label":"DQUA","Aut":3.75,"NoAut":3.75,"CM":32},
{"Label":"DPRO","Aut":43.9,"NoAut":0,"CM":144},
{"Label":"DMAI","Aut":1.6999999999999993,"NoAut":0,"CM":0},
{"Label":"DENG","Aut":0,"NoAut":0,"CM":16}
]
My attempt to get the task work :
var chart = c3.generate({
bindto: '.ks-chart-orders-block',
data: {
url: '/Home/AbsencesByDepartementFiltredByReasons',
mimeType: 'json',
type:'bar',
keys:{
value: ['Aut','NoAut','CM']
},
}
}
});
Getted Result :
Expected Result:
You need to modify the x-axis with a custom category:
var chart = c3.generate({
bindto: '.ks-chart-orders-block',
data: {
url: '/Home/AbsencesByDepartementFiltredByReasons',
mimeType: 'json',
type:'bar',
keys:{
x: 'Label',
value: ['Aut','NoAut','CM']
},
},
axis: {
x: {
type: 'category',
tick: {
centered: true
}
}
}
});
So I'm working with a bar graph in Chart.js, and I'm trying to get the custom tooltips working. Searching around, it seems like the thing to do in this context is to add
tooltipTemplate: "<%= value %>% test"
to my options section, and that would display the word test after my data value in the resulting tooltip. However, my tooltip remains completely unchanged in reality. And ideas?
Thanks!
Here is an example of custom tooltip label:
var ctx = document.getElementById("myChart");
var barChartData = {
labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
datasets : [ {
type : 'bar',
label : "Revenue (US$)",
data : [ 4000, 4850, 5900, 6210, 2500, 4000, 6500 ],
backgroundColor : 'rgba(0, 0, 255, 0.3)'
} ]
};
var myChart = new Chart(ctx,
{
type : 'bar',
data : barChartData,
options : {
responsive : true,
tooltips : {
callbacks : { // HERE YOU CUSTOMIZE THE LABELS
title : function() {
return '***** My custom label title *****';
},
beforeLabel : function(tooltipItem, data) {
return 'Month ' + ': ' + tooltipItem.xLabel;
},
label : function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
},
afterLabel : function(tooltipItem, data) {
return '***** Test *****';
},
}
},
scales : {
xAxes : [ {
display : true,
labels : {
show : true,
}
} ],
yAxes : [ {
type : "linear",
display : true,
position : "left",
labels : { show : true },
ticks : {
beginAtZero : true
}
} ]
}
}
});
I'm trying to learn and use echarts.
I learned how to create a static chart using echarts and now I need to add data and series to my chart, dynamically.
There's methods like addSeries and addData in API but when I try to use these methods, there is some strange situation!
Assume that I have some radio channels that they had some programs in a period of time.
I don't know how many channels would be checked, so I have to get channel list from my database and then count programs per channel.
I tried this:
$.ajax({
type: 'POST',
url: "my url",
data: event,
error: function (jqXHR, textStatus, errorThrown) {
alert('ERROR');
},
beforeSend: function (xhr) {
$(document).find('.loaderWrapper').find('.loader').html('<img src="<?= base_url() ?>global/templates/default/desktop/assets/images/globe64.gif" width="76"><br /><span class="farsi">wait</span>');
},
success: function (data, textStatus, jqXHR) {
//console.log(JSON.parse(data), $.parseJSON(data));
var chartData = eval( $.parseJSON(data) );
if(data === 'eventError')
{
$(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">choose event</span>');
return false;
}//if eventError
if(data === 'dbError')
{
$(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">error</span>');
return false;
}//if eventError
var channelsArray = [];
for( var i=0; i < objSize(chartData.allChannels); i++ )
{
channelsArray.push(chartData.allChannels[i].channel);
}
console.log(channelsArray);
require(
[
'echarts',
'echarts/chart/bar', // require the specific chart type
'echarts/chart/line', // require the specific chart type
],
function (ec) {
// Initialize after dom ready
var myChart = ec.init(document.getElementById('programPerChannel'));
option = {
title : {
text: 'test title',
x : 'right'
},
tooltip : {
trigger: 'axis'
},
legend: {
data: channelsArray
},
toolbox: {
show : true,
x : 'left',
feature : {
mark : {
show: true,
title: {
mark : 'marker',
markUndo : 'undo',
markClear : 'clear'
},
lineStyle : {
width : 3,
color : '#1e90ff',
type : 'dashed'
}
},
dataView : {show: false, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : channelsArray
}
],
yAxis : [
{
type : 'value'
}
]
};
// Load data into the ECharts instance
myChart.setOption(option);
for ( var j = 0; j < channelsArray.length; j++)
{
myChart.setSeries([
{
name:channelsArray[j],
type:'line',
stack: 'area',
symbol: 'none',
itemStyle: {
normal: {
areaStyle: {
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 200, 0, 400,
[[0, 'rgba(128,' + 10 * j / 2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']]
)
})()
}
}
},
data:[
[j * 10, j * 11, j *3, j * 7],
]
}
]);//set series
//adding data inside addSeries will set data to first channel only, code was tested with or without this part
myChart.addData([
[1, 10 , j, j*2],
[1, 10 , j, j*2],
[1, 10 , j, j*2],
[1, 10 , j, j*2]
]);//add Data
}//for
}//functuin(ec)
);
$(document).find('.loaderWrapper').find('.loader').html('');
}//success
});//Ajax
With addSeries method, data will set to first channel only, and with addData echarts will show just flying bubble!!! :)
First situation image :
Second: bubbles!!!
Would you please help me to find out which part is my problem?
Thanks in advance
Reason for the first situation(just first channel will have data) is that setSeries method is not merging the series to the list of series, it is getting replaced. So you have to create/prepare a seriesList and then use setSeries method like this
var seriesList = [];
for ( var j = 0; j < channelsArray.length; j++)
{
seriesList.push(
{
name:channelsArray[j],
type:'line',
stack: 'area',
symbol: 'none',
itemStyle: {
normal: {
areaStyle: {
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 200, 0, 400,
[[0, 'rgba(128,' + 10 * j / 2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']]
)
})()
}
}
},
data:[
[j * 10, j * 11, j *3, j * 7],
]
}
);//end-push
} //end-for-loop
myChart.setSeries(seriesList);
If you want an animated/moving dynamic graph then this demo will help.
Second: Bubbles !! is the default noDataLoadingOption animation of echarts. This can occur if there is no data loaded into the echart instance OR by breaking any options/configs passed or assigned to the echarts instance.
I am generating a pie chart from data stored in JSON format. I am trying to change color according to the JSON value.
Ex : if value # json[0]['data'][0][0] = "FAILED" //setColor(RED).
I was able to set the color for column stack charts using options.series.color, however when I tried to use this option with pie chart its converting data into series and unable to render the chart on a container.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
function getData(id) {
$.getJSON("pie.php", {
id: id
}, function(json) {
option.series = json;
chart = new Highcharts.chart(options);
});
}
</script>
can we set the color in getData function only before calling 'chart' or do i need to use Highcharts.setOptions() and define the color codes.
The better option is to create series based on your json data. This is how you can do to specify color based on data.
var serie = {
data: []
};
var series = [serie];
jQuery.each(jsonData, function(index, pointData) {
var point = {
name: pointName,
y: pointData.Value,
color: pointData.Value == 'FAILED' ? 'ff0000' : '00ff00',
serverData: pointData
};
serie.data.push(point);
});
chart.series = series;
OR
Have a look at this easier version
JSFiddle
$( document ).ready(function() {
var data = [{
"name": "Tokyo",
"data": 3.0
}, {
"name": "NewYork",
"data": 2.0
}, {
"name": "Berlin",
"data": 3.5
}, {
"name": "London",
"data": 1.5
}];
// Highcharts requires the y option to be set
$.each(data, function (i, point) {
point.y = point.data;
point.color = parseFloat(point.data) > 3 ? '#ff0000' : '#00ff00';
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: data
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
we can set highchart custom color by setOption function which is as
Highcharts.setOptions({
colors: ['#F64A16', '#0ECDFD',]
});
It sets color to my pie chart.
Another solution for dynamic 3D color
Actually this customization for theme selection Here it is
3 colors sets to color variable
var colors = Highcharts.getOptions().colors;
$.each(colors, function(i, color) {
colors[i] = {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
stops: [
[0, '#0ECDFD'],
[0.3, '#F64A16'],
[1, color]
]
};
});
& assign directly in series
{
type : 'column',
name : 'bug',
data : [],
color : colors,
pointWidth : 28,
}
I am working on drawing graphs from our data. There is no problem on drawing graph basically. The only problem is that the flags information is not loaded and located on the graph lines. Let me give you the issues on it.
Data cannot be brought to the graph if it has over 900 numbers of items.
One data might have more than 4000 items.
Instead using one big data, I tried to spilt one data into small pieces of data. Each piece of data has 800 items, and they are intended being loaded on the graph sequentially. However, this process was not easily done well. Sometime the graph module cannot load every piece exactly. Moreover, this process take much time than using one data.
I wonder whether an appropriate way to load flag data which contains many items exits or not.
$(function() {
var report_data;
$.ajax({
type: "post",
url:"/apps.chart/chart.reportShort",
data:"callback=?&report_type=CO&business_code=005930",
dataType:"json",
success:function(report){
report_data = report;
}
});
$.getJSON('/apps.chart/chart.chartList?callback=?&report_type=CO&business_code=005930', function(data) {
// Create the chart
$('#chartView').highcharts('StockChart', {
chart: {
plotBorderColor: '#346691',
plotBorderWidth: 2,
height: 600
},
rangeSelector : {
inputEnabled: $('#chartView').width() > 400,
selected : 1
},
title : {
text : 'SK'
},
tooltip: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y년 %m월 %d일'
},
style: {
width: '300px'
},
valueDecimals: 0
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m.%d',
week: '%m.%d',
month: '%Y.%m',
year: '%Y'
}
},
yAxis : {
labels : {
formatter : function() {
var n = this.value;
var reg = /(^[+-]?\d+)(\d{3})/;
n += '';
while (reg.test(n))
n = n.replace(reg, '$1' + ',' + '$2');
return n;
},
align : 'left',
x : 5,
y : 2
},
maxPadding: 0.2,
minPadding: 0,
minorTickInterval: 'auto',
title : {
text : '금액(원)',
}
},
series : [{
name : '종가',
data : data,
id : 'dataseries',
marker : {
enabled : true,
radius : 3
},
shadow : true,
tooltip : {
valueDecimals : 0
}
}
// the event marker flags
,{
type : 'flags',
data : report_data,
style: {
cursor: 'hand'
},
onSeries : 'dataseries',
shape : 'circlepin',
width : 15,
height : 15,
color : '#121212'
}
]
});
});
});
Probably the problem is that you call two ajax asynchronously, so I advice you to next ajax insiae first callback and then initialise chart.