yii2mod / yii2-c3-chart Goto Github PK
View Code? Open in Web Editor NEWYii2 wrapper for D3-based reusable chart library
License: MIT License
Yii2 wrapper for D3-based reusable chart library
License: MIT License
With JavaScript c3 library this is easy - all I have to do is reference the custom function I've created as follows:
`
function getXTickFormatFunction(intervalIsHour) {
return function xTickFormat(x) {
if (intervalIsHour) {
var hourlyFormat = d3.time.format('%H');
return hourlyFormat(x);
} else {
return createDailyXAxisValue(x);
}
}
}
function xTickFormat(x) {
if (false) {
var hourlyFormat = d3.time.format('%H');
return hourlyFormat(x);
} else {
return createDailyXAxisValue(x);
}
}
function getRotation(intervalIsHour){
return intervalIsHour ? 0 : 90;
}
function getTooltipContentFunction(customChartValues, sortValues) {
return function customTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) {
var customValues = customChartValues;
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value, name, bgcolor;
if (sortValues) {
d = d.sort(function(a,b) {
return b.value - a.value;
});
}
for (i = 0; i < d.length; i++) {
if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
if (! text) {
title = customValues['tooltipTitles'][d[i].index];
text = '<table class="' + $$.CLASS.tooltip + '">' + (title || title === 0 ? '<tr><th colspan="2">' + title + '</th></tr>' : '');
}
value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index, d);
if (value !== undefined) {
// Skip elements when their name is set to null
if (d[i].name === null) { continue; }
name = customValues['tooltipContent'][d[i].name][d[i].index];
bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
text += '<tr class="' + $$.CLASS.tooltipName + '-' + $$.getTargetSelectorSuffix(d[i].id) + '">';
text += '<td class="name"><span style="background-color:' + bgcolor + '"></span>' + name + '</td>';
text += '<td class="value">' + value + '</td>';
text += '</tr>';
}
}
return text + '</table>';
}
}
function createDailyXAxisValue(date) {
var nextDayDate = new Date(date.getTime() + 1 * 86400000 );
var weekDayFormat = d3.time.format('%w');
var dayOfMonthFormat = d3.time.format('%e');
var generalFormat = d3.time.format('%e-%b-%y');
var weekDay = weekDayFormat(date);
var dayOfMonth = dayOfMonthFormat(date);
var nextDay = dayOfMonthFormat(nextDayDate);
var isLastDayOfMonth = Number(nextDay) === 1 ? true : false;
if (Number(weekDay) === 1) {
var dayFormat = d3.time.format('%A');
return dayFormat(date);
} else {
return generalFormat(date);
}
}
function generateSalesChart(chartData, intervalIsHour, chartType = 'spline', rotateAxis = false, sortTooltipValues = false) {
var xTickFormatFunction = getXTickFormatFunction(intervalIsHour);
var rotate = getRotation(intervalIsHour);
var tooltipContentFunction = getTooltipContentFunction(chartData.customValues, sortTooltipValues);
var xAxis,
yAxis,
data;
if (rotateAxis) {
xAxis = {
type: 'category',
tick: {
culling: false
},
label: chartData.xAxisLabel
}
data = {
x: 'x',
columns: chartData.initialData,
type: chartType
}
yAxis = {
label: chartData.yAxisLabel,
tick: {
culling: false
}
}
} else {
xAxis = {
type: 'timeseries',
tick: {
culling: false,
format: xTickFormatFunction,
rotate: rotate
},
label: chartData.xAxisLabel
}
yAxis = {
label: chartData.yAxisLabel,
format: d3.format(chartData['yFormat']),
tick: {
format: d3.format(chartData['yTickFormat'])
}
}
data = {
x: 'x',
xFormat: chartData['xFormat'],
columns: chartData.initialData,
type: chartType
}
}
return c3.generate({
data: data,
axis: {
x: xAxis,
y: yAxis,
rotated: rotateAxis
},
tooltip: {
format: {
value: function (value, ratio, id) {
var format = d3.format(',.2f');
return chartData.currency.symbol +format(value);
}
},
contents: tooltipContentFunction
},
grid: {
y: {
show: true
}
}
});
}`
So for example, let's take the "tooltipContentFunction". How would this translate in the yii2-c3-chart widget? I.e. how could I reference a custom function that manipulates the contents of the tooltip with the yii2-c3-chart widget that would have the same outcome as when referencing a Javascript function for custom formatting in the JavaScript c3 library?
Hello!
as of right now, any option in c3 that uses a function, for example:
var chart = c3.generate({
data: {
//...
color: function (color, d) {
// d will be 'id' when called for legends
return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
}
//...
}
});
will not run the code inside the function. i've played with several different methods but can't seem to find one that'll allow me to write a function in php.
Gives following error, let me know what to do?
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.
Problem 1
- The requested package yii2mod/yii2-c3-chart could not be found in any version, there may be a typo in the package name.
Potential causes:
- A typo in the package name
- The package is not available in a stable-enough version according to your minimum-stability setting
see <https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion> for more details.
Read <https://getcomposer.org/doc/articles/troubleshooting.md> for further common problems.
Hello,
There is an issue with setting these two property.
This is how it working now:
100, 'width' => 100, 'options' => [ This is how it should regarding c3 documentation: [ 'id' => 'x', ], 'clientOptions' => [ 'size' => [ 'height' => 100, 'width' => 100, ] http://c3js.org/samples/options_size.htmlA declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.