Please tell me how to implement the date output in Russian? I watched similar scripts on the web, but due to lack of knowledge of js, I could not figure it out. The graph shows data for the last seven days. I get them from the DB and insert them into the graph by adding php code with the necessary data. Thank you for any answer.
var ticketVolumeChartInit = function ticketVolumeChartInit() {
var $ticketVolume = document.querySelector('.echart-ticket-volume');
if ($ticketVolume) {
var userOptions = utils.getData($ticketVolume, 'options');
var chart = window.echarts.init($ticketVolume);
var ticketVolumeLegend = document.querySelectorAll('[data-ticket-volume]');
var getDefaultOptions = function getDefaultOptions() {
return {
color: [utils.getColors().primary, localStorage.getItem('theme') === 'dark' ? '#235FAD' : '#6AA2EC', localStorage.getItem('theme') === 'dark' ? '#1C4477' : '#AACAF4', localStorage.getItem('theme') === 'dark' ? '#152C48' : '#DFEBFB'],
legend: {
data: ['Посещения', 'Просмотры новостей', 'Просмотры офферов', 'Переходы по офферам'],
show: false
},
xAxis: {
type: 'category',
data: utils.getPastDates(7),
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: utils.getGrays()['300']
}
},
axisTick: {
show: false
},
axisLabel: {
color: utils.getGrays()['600'],
formatter: function formatter(value) {
return window.dayjs(value).format('MMM DD');
}
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: utils.getGrays()['300']
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: utils.getGrays()['600']
}
},
tooltip: {
trigger: 'axis',
padding: [7, 10],
axisPointer: {
type: 'none'
},
backgroundColor: utils.getGrays()['100'],
borderColor: utils.getGrays()['300'],
textStyle: {
color: utils.getColors().dark
},
borderWidth: 1,
transitionDuration: 0,
position: function position(pos, params, dom, rect, size) {
return getPosition(pos, params, dom, rect, size);
},
formatter: tooltipFormatter
},
series: [{
name: 'Посещения',
type: 'bar',
stack: 'total',
data: <?php echo json_encode($visits); ?>,
emphasis: {
itemStyle: {
color: utils.getColor('primary')
}
}
}, {
name: 'Просмотры новостей',
type: 'bar',
stack: 'total',
data: <?php echo json_encode($news_views); ?>,
emphasis: {
itemStyle: {
color: localStorage.getItem('theme') === 'dark' ? '#2567BD' : '#5595E9'
}
}
}, {
name: 'Просмотры офферов',
type: 'bar',
stack: 'total',
data: <?php echo json_encode($views_offers); ?>,
emphasis: {
itemStyle: {
color: localStorage.getItem('theme') === 'dark' ? '#205396' : '#7FB0EF'
}
}
}, {
name: 'Переходы по офферам',
type: 'bar',
stack: 'total',
data: <?php echo json_encode($transitions); ?>,
itemStyle: {
barBorderRadius: [2, 2, 0, 0]
},
emphasis: {
itemStyle: {
color: localStorage.getItem('theme') === 'dark' ? '#1A3F6F' : '#AACAF4'
}
}
}],
grid: {
right: '0px',
left: '23px',
bottom: '6%',
top: '10%'
}
};
};
echartSetOption(chart, userOptions, getDefaultOptions);
ticketVolumeLegend.forEach(function (el) {
el.addEventListener('change', function () {
chart.dispatchAction({
type: 'legendToggleSelect',
name: utils.getData(el, 'ticket-volume')
});
});
});
}
};
Related
anyone can help me to solve my case, well I have an ApexCharts for show the data that can be refreshed whenever user want to and the data should be change to the updatest datas.
but I dont have idea how to reload the data ini ApexCharts
this my script
var options = {
series: [{
name: 'Stock Value',
type: 'column',
data: val_data_1
}, {
name: 'Actual Value',
type: 'column',
data: val_data_2
}, {
name: 'difference',
type: 'line',
data: val_data_3
}],
chart: {
height: 350,
type: 'line',
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: [1, 1, 4]
},
title: {
text: 'XYZ - Stock Opname',
align: 'left',
offsetX: 110
},
xaxis: {
categories: categories,
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
colors: '#008FFB',
}
},
title: {
text: "Stock Value",
style: {
color: '#008FFB',
}
},
tooltip: {
enabled: true
}
},
{
seriesName: 'Income',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
colors: '#00E396',
}
},
title: {
text: "Actual Value",
style: {
color: '#00E396',
}
},
},
{
seriesName: 'Revenue',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
colors: '#FEB019',
},
},
title: {
text: "Differences",
style: {
color: '#FEB019',
}
}
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
i've have to hear for use the chart.UpdateSeries() but in my case I dnt know how to use it
Indeed, you have to use the updateSeries() method. It is documented here: Methods – ApexCharts.js
To help you, I give you an example with updateSeries() using a simple button. When you click on it, random integers are generated in the data array. The series is then updated accordingly.
let options = {
series: [{
name: 'Series',
data: [1, 7, 3]
}],
chart: {
type: 'line',
height: 350
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3']
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
function getRandomNumber() {
return Math.floor(Math.random() * 10);
}
document.querySelector('button').addEventListener('click', () => {
chart.updateSeries([{
data: [getRandomNumber(), getRandomNumber(), getRandomNumber()]
}])
});
button {
padding: 10px;
color: white;
background-color: #0d6efd;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
color: black;
background-color: #0dcaf0;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
<button type="button">Update series</button>
I've some trouble making changes in the bar of color in the apex chart. The chart is a mixed chart (Line/Bar).
I want to change a single bar color.
I've tried the solution is that is to added a fillColor into the series.data as per the apex chart documents but it does not work.
Chart Snap
enter image description here
Here is my code.
where
response.device.data.values AND response.flowmeter.values is a array of values.
if (newChart !== null) {
newChart.destroy();
}
var options = {
chart: {
height: 350,
stacked: false,
height: '400',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: []
}
}
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 1],
curve: 'stepline'
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "<?=_('Device(s)')?> (m3)",
style: {
color: '#008FFB'
}
},
tooltip: {
enabled: true
}
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "<?=_('Flowmeter(s)')?> (m3)",
style: {
color: '#00E396',
}
}
},
],
tooltip: {
followCursor: true,
},
legend: {
horizontalAlign: 'center',
offsetX: 40
},
zoom: {
enabled: false
},
xaxis: {
categories: response.device.data.labels,
labels: {
style: {
fontSize: '10px'
}
}
},
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
data: response.flowmeter.values
}
],
};
newChart = new ApexCharts(document.querySelector("#new-chart"), options);
newChart.render();
You can set color prop in the object of the series.
Somethings like that:
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
color: "00FA9A",
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
color: "#F44336",
data: response.flowmeter.values
}
],
You could probably make use of passing a function to the fill property. Check this link: https://apexcharts.com/docs/options/fill/. You can also customize based on the series index.
colors: [function({ value, seriesIndex, w }) {
return colors(value)
}],
function colors(id) {
var colors = [
"#33b2df",
"#546E7A",
"#d4526e",
"#13d8aa",
"#A5978B",
"#2b908f",
"#f9a3a4",
"#90ee7e",
"#f48024",
"#69d2e7"
];
return colors[id] ?? '#33b2df';
}
I am trying to make the data grouping more obvious in my chart:
I would like a line to go through the middle to indicate that they are two different data sets. However i am not quite sure how to do it.
Here is my code for generating the chart:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLine: {
show: true
},
axisTick: {
show: true
},
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {
axisLine: {
show: true
},
axisTick: {
show: true
},
axisLabel: {}
},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
formatter: '{c0}'
},
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
tooltip: {
formatter: '{c0}'
},
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
What can I try next?
I think what you are looking for is a splitLine.
Just enabled splitLine on your xAxis and style it accordingly.
xAxis: {
splitLine: {
show: true,
lineStyle: ...
}
}
I want to display data from MySQL database to highchart. When I do print_r the data, it can display the array as well, but when I try to display them to the chart, it's not working. here's my code:
controller:
$lokasi = $this->Objekwisata_m->getLokasi();
$jumlahSad = array();
$temp = 0;
foreach ($lokasi as $lok ) {
$sad = $this->Objekwisata_m->getSad($lok['id_lokasi']);
$jumlahSad[$temp] = count($sad);
$temp++;
}
$data['jumlahSad'] = $jumlahSad;
$data['lokasi'] = $this->Objekwisata_m->getLokasi();
$this->load->view('objek_wisata_v', $data);
model
public function getSad($id_lokasi){
$this->db->select('t.result');
$this->db->from('tbl_testimoni t');
$this->db->join('tbl_master_lokasi l', 't.id_lokasi = l.id_lokasi', 'left');
$this->db->where("t.result", "'sad'");
$this->db->where("t.id_lokasi = '".$id_lokasi."'");
$query = $this->db->get();
return $query->result_array();
}
highchart.js
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Grafik Kepuasan Pengunjung KRB'
},
xAxis: {
categories: [<?php foreach($lokasi as $lok){
echo "'".$lok['nama_lokasi']."',";
}?>],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: 'percents'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Sad',
data: [<?php foreach($jumlahSad as $s){
echo "'".$s."',";
}?>]
}, {
name: 'Happy',
data: [<?php foreach($jumlahHappy as $h){
echo "'".$h."',";
}?>]
}, {
name: 'Disgust',
data: [<?php foreach($jumlahDisgust as $d){
echo "'".$d."',";
}?>]
}]
});
</script>
Can you please take a look at following code and let me know why I am not able to initialize the closing tag for
$("#submitform").on("click", function (e) {});
I already tried it in http://www.jshint.com/ but it doesn't show any dis match character it took me hours to work on it but unfortunately I couldn't find out what is causing this. The weird thing is the application is working fine and I am not getting any error on console!
$("#submitform").on("click", function (e) {
$("div.alert").remove();
// Validation
var proceed = true;
if (targetPower == "Target Energy") {
$('#counter').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>This is a Requierd Field</div>');
proceed = false;
}
if ($("#scenSelect").val() == "0") {
$('#counter1').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Please Select From List</div>');
proceed = false;
}
if (proceed) {
//Change Concat
targetPower = targetPower.replace(/\D/g, '');
senario = $("#scenSelect").val();
var mapquery = senario + "_" + targetPower;
var data = 'column=' + mapquery;
if (qtype == "econo") {
var req = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econo.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
var req2 = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econocharts.php"
});
req2.done(function (data) {
var cars = [];
cars.push(data[0]);
cars.push(data[1]);
cars.push(data[2]);
cars.push(data[3]);
cars.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[0]
}]
}]
});
// Second Chart
$('#chart2').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'title!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
plotLines: [{
color: 'grey',
value: '.5',
width: '3'
}],
categories: ['Powerlines', 'Roads'],
style: {
color: Highcharts.getOptions().colors[0]
},
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Km Powerline',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Km Roads',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' Km</b>';
}
},
series: [{
name: 'Powerline',
//color: '#0066FF',
type: 'column',
yAxis: 1,
data: [0, cars[2]],
tooltip: {
valueSuffix: ' km'
}
}, {
name: 'Roads',
type: 'column',
data: [cars[1], 0],
tooltip: {
valueSuffix: ' km'
}
}]
});
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[4]
}]
}]
});
// Four Chart
$('#chart4').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Total Cost Per Year'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000000;
}
},
title: {
text: 'Million $'
},
tickInterval: 100000000,
max: 1300000000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x +
' <b>' + this.y + '< $/b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[3]
}]
}]
});
});
} //end of ecolo
if (qtype == "ecolo") {
var add = 'img/' + $("#aniSelect").val() + '.png';
image2.animate({
opacity: 0
}, 500, mina.easein, function () {
image2.remove();
image2 = map.image(add, -100, 0, 794, 680).insertBefore(st).animate({
opacity: 1,
x: 0
}, 500, mina.easeout);
});
var selectedanimal = $("#aniSelect").val();
var dataecolo = 'column=' + mapquery + '&animal=' + selectedanimal;
if ($('#c1').is(':checked')) {
var req = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolo_yes.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
//Performance
var req3 = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolochart_yes.php"
});
req3.done(function (data) {
var cuyes = [];
cuyes.push(data[0]);
cuyes.push(data[1]);
cuyes.push(data[2]);
cuyes.push(data[3]);
cuyes.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[0]
}]
}]
}); // End of Chart One
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[4]
}]
}]
}); //end of Chart 3
});
} //end of if Checked
else {}
} // end of ecolo
} // end of procced
mapReset();
e.preventDefault();
});