We Keep Coding

Location of data on the highcharts

I'm using codeigniter with highcharts, but when I fetch the data from database, it only appears like this:
What do you think is the problem?
controller
public function tabular()
{
$data['pizzas'] = $this->user_model->tabular();
//var_dump($this->user_model->tabular());
$this->load->view('template/header');
$this->load->view('template/menubar');
$this->load->view('template/highcharts',$data);
$this->load->view('template/footer');
}
model
public function tabular() {
$this->db->select('products.name AS name, SUM(order_details.price) AS total');
$this->db->from('order_details');
$this->db->join('products', 'products.prod_id = order_details.prod_id', 'LEFT');
$this->db->group_by("products.prod_id");
$query = $this->db->get();
foreach ($query->result() as $row){
$results[] = array(
'name' => $row->name,
'total' => (float) $row->total
);
}
return $results;
}
view
Highcharts.chart('chart-C', {
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: 'P{point.total:.2f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>P{point.total:.2f}</b> of total<br/>'
},
series: [{
name: 'Sales',
colorByPoint: true,
data: <?php echo json_encode($pizzas); ?>
}],
});
json_encode var_dump
string '[{"name":"pizza burger","total":870},{"name":"buffalo chicken","total":1085},{"name":"bacon mushroom","total":165},{"name":"sausage mania","total":450},{"name":"beef shawarma","total":1575},{"name":"yummy hotdog","total":230},{"name":"oreo pina","total":240},{"name":"tuna garlic","total":130},{"name":"all hungarian","total":135},{"name":"beef pepperoni","total":135},{"name":"hawaiian","total":480}]' (length=401)

You can process your php data <?php echo json_encode($pizzas); ?> in js as
var chartData=<?php echo json_encode($pizzas); ?>
var category = [];
var data = [];
for (var i = 0; i < chartData.length; i++) {
category.push(chartData[i].name);
data.push(chartData[i].total);
}
Now category is array containing categories for xAxis of highcharts and data is array containing data for series
these can be used in highcharts as
xAxis: {
categories: category,
},
and
series: [{
name: "Order",
data: data
}],
See the working code below
var chartData = [{
"name": "pizza burger",
"total": 870
}, {
"name": "buffalo chicken",
"total": 1085
}, {
"name": "bacon mushroom",
"total": 165
}, {
"name": "sausage mania",
"total": 450
}, {
"name": "beef shawarma",
"total": 1575
}, {
"name": "yummy hotdog",
"total": 230
}, {
"name": "oreo pina",
"total": 240
}, {
"name": "tuna garlic",
"total": 130
}, {
"name": "all hungarian",
"total": 135
}, {
"name": "beef pepperoni",
"total": 135
}, {
"name": "hawaiian",
"total": 480
}]
var category = [];
var data = [];
for (var i = 0; i < chartData.length; i++) {
category.push(chartData[i].name);
data.push(chartData[i].total);
}
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'column chart'
},
xAxis: {
categories: category,
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
legend: false,
series: [{
name: "Quantity",
data: data
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Flot line chart with categories not working

I have a flot chart with the following code:
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
tickSize: 1,
mode: "categories"
}
};
var data = [];
data.push(
{"label": "Agrobiodiversity for consumption",
"data": [["January", 3.0], ["February", 3.9], ["March", 2.0], ["April", 1.2], ["May", 1.3], ["June", 2.5],
["July", 2.0], ["August", 3.1], ["September", 2.9], ["October", 0.9],["November", 0.5],["December", 1.8]]});
$.plot($("#flot-dashboard-chart"), data, options);
But I I get:
I have tried addigng the categories in the axis options but nothing seem to work.
Any idea what else do I need to add or what do I need to correct?

U can use my high chart, and u can remove unnecessary stuffs.
Demo with jsFiddle
var chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
labels: {
formatter: function() {
var link_array = ["first", "second", "third", "fourth"];
i = 0;
if (this.value == 'Sugammadex and related compounds')
return '' + this.value + '';
if (this.value == 'Cyclodextrin enabled diclofenac injection (generic Dyloject)')
return '' + this.value + '';
if (this.value == 'Cyclodextrins in biological products')
return '' + this.value + '';
if (this.value == 'Cyclodextrins as a new class of antibiotics')
return '' + this.value + '';
},
useHTML: true
},
categories: ['Sugammadex and related compounds',
'Cyclodextrin enabled diclofenac injection (generic Dyloject)', 'Cyclodextrins in biological products',
'Cyclodextrins as a new class of antibiotics'
],
title: {
text: null
}
},
yAxis: {
labels: {
formatter: function() {
var x_text = ["", "Feasibility study", "Lead / formulation Optimization", "Product Development", "Final product"];
return x_text[this.value];
}
},
title: {
text: '',
align: 'high'
},
tickInterval: 1
},
tooltip: {
formatter: function() {
var x_text = ["", "Feasibility study", "Lead / formulation Optimization", "Product Development", "Final product"];
return x_text[this.y];
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
data: [1, 2, 3, 4]
}]
});
$(document).ready(function() {
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
});
});

Well the "categories" mode is a plugin that need to be loaded in the HTML

Highchart: How could I set animation duration in case of adding data points to bar/column chart?

Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/
$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
chart1.series[0].remove();
chart1.addSeries({data: [chartData[index - 1]]});
setTimeout(function(){chart1.series[0].setData([]);}, 1000);
setTimeout(function(){
chart2.series[0].addPoint([index, chartData[index - 1]]);;
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 80,
categories: [''],
min:0,
max:0
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: [],
pointWidth: 28
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: []
}]
});
});
The bar charts are not animating at all. (I will do something about the color.)
I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.

Highchart: why can I not set the duration in this case?

Relevant code is here: http://jsfiddle.net/e0qxfLtt/5/
$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
var x = index, // current time
y = chartData[index];
$('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
setTimeout(function(){
if(index === 1){
$('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
}
$('#container1').highcharts().series[0].addPoint([x,y]);
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 1000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
categories: ['a', 'b'],
min: 0,
max: 1
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 2000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});
});
I would like the chart on the left to animate over a duration of 2 seconds, and used this code for the purpose:
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
However, that chart seems to animate over an instant despite the setting.
Could it due to the setTimeout functions?
If so, is there any way around that?

Displaying multiple Highcharts from single json

In this fiddle : http://jsfiddle.net/LLExL/5018/
I'm displaying a chart with dates on X axis and counts on Y axis.
I'm attempting to generalize this a little by displaying multiple charts using a single snippet of json. So have defined this modified json file :
[
{
"header": "test1",
"children": [
{
"date": "2015-01-02",
"count": "36"
},
{
"date": "2015-01-03",
"count": "29"
}
]
},
{
"header": "test2",
"children": [
{
"date": "2015-01-02",
"count": "36"
},
{
"date": "2015-01-03",
"count": "29"
}
]
}
]
Does Highcharts support this type of functionality out of box ? If so how it be achieved ? Each header element above is chart header.
fiddle code :
html :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 350px; height: 300px;"></div>
javascript :
var pointStart = new Date().getTime();
var jsonString = '[ {"date":"2015-01-02","count":"36"} , {"date":"2015-01-03","count":"29"} ]';
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData, function(i, obj) {
var d = new Date(obj.date)
data.push([Date.parse(d), parseInt(obj.count)])
combinedHeights.push(parseInt(obj.count))
});
jQuery(document).ready(function() {
$('#container').highcharts({
chart : { type : 'line' },
title: {
text: 'test' // Title for the chart
},
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000 * 30
}
},
xAxis : {
type : 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
var chart = $('#container').highcharts();
chart.addSeries({
data: data
});
});
Update :
http://jsfiddle.net/LLExL/5081/
Code :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container0" style="width: 350px; height: 300px;"></div>
<div id="container1" style="width: 350px; height: 300px;"></div>
jQuery(document).ready(function() {
var jsonString2 = '[ { "header": "test1", "children": [ { "date": "2015-01-02", "count": "36" }, { "date": "2015-01-03", "count": "29" } ] }, { "header": "test2", "children": [ { "date": "2015-01-02", "count": "16" }, { "date": "2015-01-03", "count": "15" } ] } ]'
var myData = JSON.parse(jsonString2);
$.each(myData, function(i, obj) {
create(JSON.stringify(obj) , 'container'+i)
});
var jsonString = '{ "header": "tester", "children": [ { "date": "2015-01-02", "count": "76" }, { "date": "2015-01-03", "count": "29" } ] }'
// for (i = 1; i <= 2; i++) {
// create(jsonString , 'container'+i)
// }
function create(jsonString , containerName) {
var pointStart = new Date().getTime();
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData.children, function(i, obj) {
var d = new Date(obj.date)
data.push([Date.parse(d), parseInt(obj.count)])
combinedHeights.push(parseInt(obj.count))
});
$('#'+containerName).highcharts({
chart : { type : 'line' },
title: {
text: myData.header // Title for the chart
},
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000 * 30
}
},
xAxis : {
type : 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
var chart = $('#'+containerName).highcharts();
chart.addSeries({
data: data
});
}
});

You can prepare parser, which puts a new div and create chart parsing data. The options can be common object, but using $.extend() is needed avoid using the same reference.
Parser:
var $chartGrid = $('#chart-grid'),
title = [],
serie,
date,
name;
$.each(json, function(i, item) {
name = 'container-' + i;
$chartGrid.append('<div id="'+name+'" class="chart"></div>');
serie = [{
data: []
}];
$.each(item.children, function(j, points) {
date = points.date.split('-'); //Date.parse doens't work in FF and IE
serie[0].data.push({
x: Date.UTC(date[0],date[1],date[2]),
y: parseFloat(points.count)
});
});
options.title.text = item.header;
options.series = serie;
$('#' + name).highcharts($.extend({}, options));
});
Example: http://jsfiddle.net/LLExL/5085/

try this out http://jsfiddle.net/Paulson/LLExL/5082/
var pointStart = new Date().getTime();
var jsonString = '[{"header":"test1","children":[{"date":"2015-01-02","count":"36"},{"date":"2015-01-03","count":"29"}]},{"header":"test2","children":[{"date":"2015-01-02","count":"29"},{"date":"2015-01-03","count":"36"}]}]';
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData, function(i, obj1) {
var newData = [];
$.each(obj1['children'], function(i, obj2) {
var d = new Date(obj2.date)
newData.push([Date.parse(d), parseInt(obj2.count)])
});
data.push(newData);
});
jQuery(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'test' // Title for the chart
},
legend: { enabled : true },
plotOptions: {
series: {
pointStart: pointStart,
pointInterval: 24 * 3600 * 1000 * 30
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
series: [{
data: data[0]
}]
});
$('#container2').highcharts({
chart: {
type: 'line'
},
title: {
text: 'test' // Title for the chart
},
legend: { enabled : true },
plotOptions: {
series: {
pointStart: pointStart,
pointInterval: 24 * 3600 * 1000 * 30
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
series: [{
data: data[1]
}]
});
});